Suddenly my computer was impossibly slow, my recorded shows were stilted and out of sync. I checked task manager and my CPU usage was 100%.

The first thing is to evaluate if there is something that has recently changed on the computer, and I had just added a 5 Tb USB WD Elements HD to store tv recordings from Windows Media Center. In doing so I added media locations to the setup in Windows Media Center.

I followed the following procedures to get my CPU usage back to normal. The first of the two issues was that Windows Media Center was indexing a whole lot of folders that it didn’t need to so the first procedure removes those. The second issue was that the Media Player Network service that makes media files available to other Players on other computers was running rampant and so I stopped and disabled that service.

For the first procedure:

In Windows Media Player click Organize and then click Manage Libraries.  Click on each of the four libraries one at a time. Remove any locations that aren’t directly involved with that particular media. For example, on my computer the location D:\ was found on two media. That means that that whole drive was being indexed for those media instead of just the folders that contained the media files.

For the second procedure:

Open Services. One way to open it is to open task manager. (Right click on the task bar and select Task Manager) . In Task Manager click the Services tab, then in the lower right corner slick the Services button.

In services turn off the “WMPnetwk.exe” service by double clicking on it. Then double click on startup type and change to Disabled. You can try to stop the service but it failed in my case

Restart your computer.

When I did this my computer CPU usage was better and my computer was much quicker.

However, the situation was not completely resolved.

Not long after I did the above actions, Media center became intermittently unresponsive.  It was nowhere the stilted performance that it was, but it was still problematic.

Checking Task Manager again, I found wmplayer.exe using 50% CPU.  At first I just killed the process, but not long after that I found wmplayer.exe still using 50% CPU even when Media Player of Media Center weren’t running!  And, of course, the problem is Media Center would stop responding to commands from the remote control or the mouse.

Next I found a windows forum that suggested deleting the library database files as they may contain old references that are calling Media Player to index old locations.

Delete The Library Database File

Library database files are located in your user profile.  In Windows Explorer browse your way to:

%USERPROFILE%\AppData\Local\Microsoft\Media Player.

Delete all the files that end in .wmdb.  After you restart Windows Media Player (or Media Center) they will be recreated.  %UserProfile% is the location of your user profile, so in my case it was C:/Users/Mark.

I found 25 files that ended in .wmdb!  After I deleted these I went back in and found that Windows had recreated just 6 .wmdb files so 19 of those 25 weren’t helping.

 

Oh no, my computer is sick. I’ve run malware, anti-virus and defrag tools but something is dramatically slowing my computer down. I schedule checkdsk to run the next time I reboot, and guess what, it wont run.   So I run pre-boot assessment on my Dell laptop, and get the dreaded 0142 error message – hard drive failure.

But wait, my hard drive is still working enough to run the computer, its just slow. What do I do? I keep working with it until it crashes totally, right? Noooooooo! I quickly backup critical files onto a external hard drive, and shut it off.

My hard drive is a 320Gb Western Digital Model. I look on Newegg.com and a 750Gb Western Digital is on sale. I buy it right away.

The drive comes in a few days. I download Acronis True Image software off the Western Digital site.

The instructions say that it is best to put the drive to be cloned in the place where the existing drive exists but, alas, my computer won’t boot in that configuration. My computer has two hard drive bays, but I don’t have a second adapter so I connect the drive with a USB 2.0 cable I have.

I run the True image software following the prompts and it takes hours, but it works. The next morning I go to see the screen and the cloning is successful. I put the new drive in the bay where the failing one was and power it up.

“It’s a miracle. It’s healed”.

I reran the pre-boot assessment and diagnostic test and everything passes.

I know from experience that everything doesn’t always work this well. But this time, thank God, it did.

 

When my computer started taking forever to change screens I first did a Malware Bytes scan and then a complete anti-virus scan, then I ran disk defrag. There was no improvement and these processes took way longer than they used to do.

I next looked for possible hardware issues. I set up my drive which was C: to run Checkdsk on reboot. If wouldn’t run.  I got a “cannot access drive…” error message, and started suspecting the drive.

Dell Computers come with a Pre-boot assessment build which is a hardware testing system. It can be accessed by pressing F12 right after you power on. After that runs you are given the option to run diagnostics which puts the hardware through all its paces

The Pre-boot assessment tests memory, hard drive, CPU and more  outside of the Windows environment.  My first pass gave me a 0142 error code which signifies a failing hard drive.

The diagnostics have an express version that takes 20 minutes or so, and extended version that takes an hour or more and then they have a facility called the Symptom tree where you can find a symptom and run corresponding hardware tests.

These tools are a definite plus and give another reason why Dell has survived when so many others have not.  Their products are not always sports car fast, but they are reliable and they have tools like this to help the home user find and fix problems.

Note: see http://www.dell.com/support/article/us/en/19/SLN115162/EN for more on Dell computer’s diagnostic tools.

Toolbars are made relatively easy with VB.Net.  They are just another control you add to the form. The normal place for a tool bar is just under the menu bars. Once you add the toolbar you can click on it and you will see a generic button appear. Once you give it a name or other property it becomes permanent.

Typically a toolbar is full of easily recognizable buttons that are easy to recognize and make working with the program quicker to use. You can do a web search for free icons and find a ton of them. Some are free for any use, some are free for non-commercial use, and some are paid.

Here is a sample Wordpad like project to create a simple word processor in a program perhaps to edit and dress up reports generated by the program:

I have added some icons to the buttons but if you can see them they don’t come out very well, and they are hard to see, especially if you are getting up in years.

The solution is to make the icons bigger. Look at this:

The above illustrations are smaller than actual size. Here’s a before and after, actual size comparison:

If you are young you may prefer the smaller icons.  I can hardly make them out without moving my head closer to the screen.  The larger ones work better for me and a lot of older people.

There are four steps in accomplishing this upgrade after you have added the appropriate buttons and named them.

1. Change Autosize property to False
2. Resize the image file for the icon in a paint so that it is just a little smaller than the size of the button. I have 44 x 44 pixel buttons so I made 40 x 40 pixel images. Then import that image using the Image property.
3. Change ImageScaling property to None
4. Change the Size property of the button to 44, 44

Lastly, I have also shown in the illustration below that you should change the text to some simple help tip appropriate for the button because this becomes the tool tip.

Happy programming.

 

Visual Studio Express Tools are the limited but free versions of the Microsoft IDE. One of their limitations is the lack of database server tools. Whereas the paid versions of these tools let you connect to SQL Server this tool only intrinsically connects to Access databases, SQL Server files or SQL Server Compact files.

SQL Server Compact is the small footprint database that ports to anything from enterprise applications down to tablet and smartphone Apps. Its limitation includes the lack of programmability, i. e., stored procedures. Also with the Visual Basic Express – SQL Server Compact combination you can’t script queries and transfer data via SQL Management Console like you may be used to.

Microsoft says the advantage of stored procedures (sprocs) has diminished over time as SQL Server performance has improved to the point that precompiled queries may not be faster. In fact, since sprocs are optimized at the point of creation conditions may have changed to the point that the sproc performance may be now slower than pragmatically sending queries through code. And Compact Edition will certainly suffice if all you want to do is update table information with a data entry form or such.

There is a work around, however, if you want to access SQL Server in Visual Basic Express 2010. Visual Web Developer 2010 Express does allow connecting to SQL Server/Express.

That will give you the connection string and other parameters that you can copy to your visual basic project.

The Project

I created a table of winning PA Lottery daily numbers in a database in SQL Server Express called LotteryHelperDB.   In VB 2010 Express I started a new project.  I created a Windows Application project with a form in it.  On the form I added a datagridview, some text boxes and labels. (The screen shot is below.)

Then I programmatically set up the connection to SQL Server Express instead of using the data connection tool in VB 2010 Express.

How to set up a connection in Visual Web developer and use it in visual basic 2010 express

In Visual Basic 2010 Express you should be able to choose the SQL Server Database file option to get the right kind of database (the system.data.SqlClient provider), and then manually correct the connection string to point to your db. (Don’t worry if you actually can’t connect to an .mdf file. Just let the wizard set up the connection.

I did that and the IDE added the following to my App.config file:

<connectionStrings>

<add name=”SQLServerExpressConnectionExample.My.MySettings.LotteryHelperDbFileConnectionString”

connectionString=”Data Source=.\SQLEXPRESS;AttachDbFilename=&quot;C:\Users\Mark\Documents\Visual Studio 2008\Projects\LotteryHelper\LotteryHelper\LotteryHelperDbFile.mdf&quot;;Integrated Security=True;Connect Timeout=30;User Instance=True”

providerName=”System.Data.SqlClient” />

</connectionStrings>

 

In Visual Web Developer 2010 Express I opened a new project and connected to the SQL Server Express. That IDE created the following in the Web.config file:

<connectionStrings>

<add name=”ApplicationServices” connectionString=”data source=.\SQLEXPRESS;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnetdb.mdf;User Instance=true”

providerName=”System.Data.SqlClient” />

<add name=”LotteryHelperDBConnectionString” connectionString=”Data Source=MARK-LAPTOP\SQLEXPRESS;Initial Catalog=LotteryHelperDB;Integrated Security=True”

providerName=”System.Data.SqlClient” />

</connectionStrings>

In VB.Net 2010 I created a form with the datagridview, textboxes and labels as shown below.  I called the form “PADailyNumberForm”.

I added a data connection to the .mdf file to let the IDE configure for a data connection.  Then I used the connection string created in Visual Web Developer 2010 Express to replace the one generated in Visual Basic 2010 Express.

After I was done the code looked like this for my PADailyNumberForm:

 

Imports System.Configuration

Imports System.Data.Sql ‘ For SQL Server express

Imports System.Data.SqlClient

Imports System.Collections

 

Public Class PADailyNumberForm

 

Dim SQL_Conn As New SqlConnection       ‘SqlConnection for SQLServerExpress

Dim DataAdapterDN As SqlDataAdapter       ‘SqlDataAdapter for SQLServerExpress

Dim CommandBuilderDN As SqlCommandBuilder ‘SqlCommandBuilder for SQLServerExpress

Dim DataTableDN As New DataTable

Dim ds As New DataSet()

Dim DataRowDN As DataRow

Dim RowPostionDN As Integer = 0

Dim BindingSource1 As New BindingSource()

 

 

Private Sub PADailyNumberForm_FormClosed(ByVal sender As Object, ByVal e As System.Windows.Forms.FormClosedEventArgs) Handles Me.FormClosed

SQL_Conn.Close()

SQL_Conn.Dispose()

End Sub

 

Private Sub PADailyNumberForm_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

Try

 

SQL_Conn.ConnectionString = ConfigurationManager.ConnectionStrings(“SQLServerExpressConnectionExample.My.MySettings.LotteryHelperDbFileConnectionString”).ConnectionString

SQL_Conn.Open()

 

‘Use SqlDataAdapter for SQLServerExpress

DataAdapterDN = New SqlDataAdapter(“SELECT * FROM DailyNumberMidday Order by DNMiddayID”, SQL_Conn)

CommandBuilderDN = New SqlCommandBuilder(DataAdapterDN)

DataAdapterDN.Fill(DataTableDN)

Me.DisPlayCurrentRecord()

With DataGridView1

‘ Automatically generate the DataGridView columns.

.AutoGenerateColumns = True

‘ Set up the data source.

bindingSource1.DataSource = DataTableDN

.DataSource = bindingSource1

End With

Catch ex As SqlException ‘SqlException for SQlServerExpress

MessageBox.Show(“Error loading form: ” & Err.ToString, “Error”, MessageBoxButtons.OK, MessageBoxIcon.Exclamation)

System.Threading.Thread.CurrentThread.Abort()

End Try

End Sub

Private Sub DisplayCurrentRecord()

If DataTableDN.Rows.Count = 0 Then

lblRecordCount.Text = “0”

lblRecordNumber.Text = “0”

Else

lblRecordCount.Text = DataTableDN.Rows.Count.ToString

lblRecordNumber.Text = CStr(RowPostionDN + 1) ‘ DataTableDN.Rows.Count.ToString

TextBox1.Text = DataTableDN.Rows(RowPostionDN)(“DNMiddayID”).ToString

TextBox2.Text = Format(DataTableDN.Rows(RowPostionDN)(“DNDrawdate”).ToString, “Short Date”)

TextBox3.Text = DataTableDN.Rows(RowPostionDN)(“DNP1″).ToString

TextBox4.Text = DataTableDN.Rows(RowPostionDN)(“DNP2″).ToString

TextBox5.Text = DataTableDN.Rows(RowPostionDN)(“DNP3″).ToString

‘This sychronizes the Datagrid to the navigation bar

‘DataGridView1.CurrentCell = DataGridView1.Rows(RowPostionDN).Cells(0)

End If

 

End Sub

 

Private Sub btnMoveFirst_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnMoveFirst.Click

‘Move to the first row and update display

RowPostionDN = 0

Me.DisPlayCurrentRecord()

DataGridView1.CurrentCell = DataGridView1.Rows(RowPostionDN).Cells(0)

End Sub

 

Private Sub btnMoveNext_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnMoveNext.Click

‘Move to the next row and update display

If RowPostionDN < DataTableDN.Rows.Count – 1 Then

RowPostionDN = RowPostionDN + 1

Me.DisPlayCurrentRecord()

‘DataGridView1.Rows(RowPostionDN).Selected = True

‘The DataGridView should only contain a single CurrentCell –

‘this is the cell that is currently active (being edited for example).

‘Set the CurrentCell property to a non-hidden non-disabled, non-header cell

‘and that will move the black arrow to the row that contains that cell.

‘This row can be checked with the CurrentRow (read-only) property of the DataGridView.

DataGridView1.CurrentCell = DataGridView1.Rows(RowPostionDN).Cells(0)

End If

End Sub

 

Private Sub btnMovePrevious_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnMovePrevious.Click

‘Move to the previouos row and update display

If RowPostionDN > 0 Then

RowPostionDN = RowPostionDN – 1

Me.DisPlayCurrentRecord()

DataGridView1.CurrentCell = DataGridView1.Rows(RowPostionDN).Cells(0)

End If

End Sub

 

Private Sub btnMoveLast_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnMoveLast.Click

‘Move to the last row and update display

MoveToLastRecord()

End Sub

 

Private Sub MoveToLastRecord()

‘Placed in separate sub so that it can be called in subs below without an event argument

If DataTableDN.Rows.Count > 0 Then

RowPostionDN = DataTableDN.Rows.Count – 1

Me.DisplayCurrentRecord()

DataGridView1.CurrentCell = DataGridView1.Rows(RowPostionDN).Cells(0)

End If

End Sub

 

Private Sub DataGridView1_CellClick(ByVal sender As Object, ByVal e As System.Windows.Forms.DataGridViewCellEventArgs) Handles DataGridView1.CellClick

RowPostionDN = DataGridView1.CurrentCell.RowIndex

Me.DisPlayCurrentRecord()

End Sub

 

Private Sub btnAdd_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnAdd.Click

‘ Hide command buttons and navigation buttons so that record cannot be moved

ChangeDisplayMode(False)

‘Get the next DrawID and putthat value into Textbox1

TextBox1.Text = “”

‘Blank the other textboxes

TextBox2.Text = “”

TextBox3.Text = “”

TextBox4.Text = “”

TextBox5.Text = “”

End Sub

Private Sub btnCancel_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnCancel.Click

‘ Show command buttons and navigation buttons so that record manipulation can return to normal

ChangeDisplayMode(True)

 

End Sub

 

Private Sub btnSave_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSave.Click

‘Add a Row to te datatable using the values entered in the textboxes

Dim NewRowDN As DataRow = DataTableDN.NewRow

NewRowDN(“DNMiddayID”) = CInt(TextBox1.Text)

NewRowDN(“DNDrawdate”) = CDate(TextBox2.Text)

NewRowDN(“DNP1″) = CInt(TextBox3.Text)

NewRowDN(“DNP2″) = CInt(TextBox4.Text)

NewRowDN(“DNP3″) = CInt(TextBox5.Text)

DataTableDN.Rows.Add(NewRowDN)

DataAdapterDN.Update(DataTableDN)

 

‘Update the grid and navigation bar to show the newly created record

RowPostionDN = DataTableDN.Rows.Count – 1

DataGridView1.CurrentCell = DataGridView1.Rows(RowPostionDN).Cells(0)

Me.DisplayCurrentRecord()

ChangeDisplayMode(True)

 

End Sub

 

Private Sub ChangeDisplayMode(ByVal bSwitch As Boolean)

GroupBox1.Visible = bSwitch

btnUpdate.Visible = bSwitch

btnAdd.Visible = bSwitch

btnDelete.Visible = bSwitch

btnCancel.Visible = Not bSwitch

btnSave.Visible = Not bSwitch

 

End Sub

 

Private Sub btnDelete_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnDelete.Click

If (MessageBox.Show(“Are you sure you want to delete this record? This cannot be undone.”, “Confirm Record Deletion”, MessageBoxButtons.YesNo, MessageBoxIcon.Question) = Windows.Forms.DialogResult.Yes) Then

 

If DataTableDN.Rows.Count <> 0 Then

DataTableDN.Rows(RowPostionDN).Delete()

DataAdapterDN.Update(DataTableDN)

RowPostionDN = 0

End If

 

Else

Exit Sub

 

End If

 

MoveToLastRecord()

End Sub

 

Private Sub btnUpdate_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnUpdate.Click

If DataTableDN.Rows.Count <> 0 Then

DataTableDN.Rows(RowPostionDN)(“DNDrawdate”) = CDate(TextBox2.Text)

DataTableDN.Rows(RowPostionDN)(“DNP1″) = CInt(TextBox3.Text)

DataTableDN.Rows(RowPostionDN)(“DNP2″) = CInt(TextBox4.Text)

DataTableDN.Rows(RowPostionDN)(“DNP3″) = CInt(TextBox5.Text)

 

End If

End Sub

 

Private Sub GetNewDrawID()

 

End Sub

 

Private Sub DataGridView1_CellContentClick(ByVal sender As System.Object, ByVal e As System.Windows.Forms.DataGridViewCellEventArgs) Handles DataGridView1.CellContentClick

 

End Sub

End Class

The database is just a table with the daily number from the Pennsylvania lottery. In actuality a simple table like this could be ideally handled by SQL Server Compact unless you are planning on making it fancier by calculating possible winning numbers based on what has been drawn previously, calculating wins and losses and so forth. Even that could be done in the application and stored in the table in SQL Server Compact. But, for our purposes it illustrates how to get VB 2010 Express to connect to SQL Server Express.

Here is a screen shot of the little application:

Note: the only build error I had was the configurationmanager returned an error.  To correct it I added a reference to the configuration component:

Happy programming.

 

I occasionally sell items on Ebay and give customers the option of USPS or UPS.

Someone just purchased an item and chose UPS but when I went to purchase the shipping in Paypal I got an error message that the account information for UPS did not match the UPS information for me on file at PayPal

It has been a while since someone selected UPS but I have dropped a number of packages off at the local UPS office so I know it used to work.

I called UPS, and they said that it was because I didn’t have a UPS account so create one.

I created one, but that didn’t enable me to print the label. I still got the same error.

UPS told me to call PayPal tech support at 1-888-221-1161. I called that number and got a different story.

PayPal said that the account created at UPS wouldn’t work and that I needed to create a new one in PayPal.

Steps:

1. Log into PayPal. Make sure that your account information wherever listed has a correct phone number. I found this to be crucial as I did the steps below without a phone number listed one place and I still got an error. After I added the phone number the process worked.
2. Scroll down and click on the words Selling Tools.
3. Scroll down on that page and click on Set my shipping Preferences.
4. Scroll down on the PayPal Information Page to the UPS Account Information. If there is an account there, remove it because UPS accounts in PayPal that have been inactive (as little as a couple of months according to my technical support guy) are invalidated
5. Then, create a new account, following the prompts. (I had to log out of PayPal and log back in to get the old account info to disappear before I could create the new account.
6. I went back at this point and I could print my label.

 

The caveat is to make sure you have an active UPS account in PayPal before you list or you may run into this snag. Another warning is that PayPal says that it may take UPS 4-6 days to notify Paypal that you qualify for the special Ebay shipping rates with UPS.

Another lesson here that it serves no purpose to create a UPS account in UPS.com for Ebay because it will not work there.

A while back I wrote about jitter in Windows where the video doesn’t play smoothly.  At the time I was able to resolve the problem for at least a little while by turning off hardware acceleration. But the fix didn’t last.

So here it is a while later and I am having major problems with video in Windows 7 again. TV shows recorded in Windows media Center do play smoothly. But hardly anything else does. Netflix, either in Windows media center, or in a browser has an annoying reverb. The video will be smooth but the audio will sound like something out of a sound check.  And trying to play YouTube videos will result in just the opposite: the sound will come out pretty smoothly most of the time, but the video may have long pauses and look more like a slideshow than an actual video.

So this time I did one of things that is often recommended, I changed codecs.

I chose the codec’s by CCCP. CCCP stands for Combined Community Codec Pack. And can be located here.  (Apparently the developers have a sense of humor, and since their initials are the same as the Soviet Union’s they have adopted the red color and the Soviet flag on their website – ha ha!)

Anyway, downloading the file and installing it was as simple an installation as I’ve had in a while. I used the pack on two machines, a Vista laptop, and a HTPC Windows 7 machine.

So far, it’s working great.

Added Note: 12/7/2014:

Occasionally, I still found myself having jittery internet video even with the above changes.  I finally figured out that the jitter was caused when one or more of my media center extenders was on and pulling in signal and processing time from the HTPC.  Every time I shut off the extenders the jitter stopped on the TV I was watching.

Want to Comment?

Sometimes, inexplicably it might seem, a program for your website may tell you that you need to run a command on the Web Host’s server. You may be asked to use SSH (Secure Shell) to accomplish this task.  I was recently advised that I needed to perform a command on the server to let a WordPress Mobile Plug-in do its thing.

For that you will need a SSH client.

Putty is such an open source client.  It is very much like a DOS window except that it won’t know DOS commands of course.  For 1and1 hosting, the username and password is the same as for FTP.

There is no install program.  You simply run the .exe from wherever you put it in your file system.

Putty is available at http://www.putty.org/.   The download site is actually http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html.  There is a user manual at http://the.earth.li/~sgtatham/putty/0.63/htmldoc/.

 

 

In my previous post I give a quick and dirty overview of mobile web site design today and it really is a challenge to put together a strategy because there are so many mobile devices out there with so many different capabilities.

1and1 offers both access to Adobe Dreamweaver and its own Mobile Web Site Builder.

Wanting to avoid labor intensive solutions I look for tools to streamline the process of delivering mobile content to devices of various capabilities.  Dreamweaver offers some good tools for writing valid code, a WYSIWYG view, a multiscreen preview for viewing 3 different screen sizes at once, Device Central for emulating different devices, and a validation tool for W3C validation.  Still, there are some things that are different for different devices requiring coding to adapt to the different devices.

On the other hand, for at least a brochure site the Mobile Web Site Builder does quite a job with very little work although I found that it didn’t do everything perfectly.

You can access the mobile web builder on the home page of the 1and1 admin control panel.  The wizard generates a site based on your existing desktop site.  Once you setup the site there, you go back there to access the wizard to make changes.  The mobile site appears to be dynamically generated, there are no pages that can be accessed by FTP to work with outside of the wizard.

As far as bugs, while the builder did a pretty good job of converting the text of the desktop site to the mobile one there were a few places it missed.  For example the builder skipped the bulleted points on one of the pages and some of the words in the description of the site.  The fix was that I had manually edit the description and to write a page that converted properly to the mobile page and put it on the website.  There is a tool to change the source page for a mobile page.

All in all, it is a viable alternative that delivers a content adaptive site while avoiding the labor intensive programming that hand coding requires.

The interface allows for some customization, things like Contact Us and Call Me Back Links, color schemes, backgrounds and so forth. But the coolest feature is that the content is delivered adaptively to each device.

Differences between “Regular” and Mobile Web Design

• You will need to know the latest HTML (HTML5) and CSS.  Some references sources are:
  • HTML (HTML5 is the current standard) tags: http://www.w3schools.com/tags/, http://www.webmonkey.com/2010/02/html_cheatsheet/
  • CSS reference: http://www.w3schools.com/cssref/
  • W3C has an HTML tutorial at http://www.w3schools.com/html/
  • W3C also has a CSS tutorial at http://www.w3schools.com/css/
• The W3C has a Mobile Web Best Practices page that anyone interested in mobile web site design should check out.
  • This is an in depth look at what a good mobile design is and covers many points from maintaining a consistent look to maximizing the device potential of the devices that call upon the web site to avoiding tables and frames for layout.
• The difference between the main web and mobile web in terms of design is that the regular web has a few browsers to contend with but pretty much a standard screen size.  The mobile web has innumerable devices with various capabilities and screen sizes. Compared to the desktop mobile web design is the Wild West.
  • There are smart phones, dumb phones, and various degrees of “smart”ness in between found in phones
    • The iPhone, incidentally, is able to present regular whole regular web pages, thanks to it ability to zoom.
  • There are also tablets, not as big as desktops, but much larger than cell phones.
  • Some devices have built-in keyboards, others have touch screen keyboards, while some phones have only a basic number pad.  You should plan for all types
  • Unlike desktops mobile devices often have GPS built in as well as cameras, often more than one.  However, integrating mobile maps with built in GPS depends on the mobile device’s operating system so that means different pages, if not sites for Apple vs. Android vs. dumb phones
  • Mobile devices are less secure that our PCs at home in our private networks with firewalls and other protections.
  • Cell Phones usually have far lesser processor power as well as internet speed. (Most cell phones in the US still operate at 3G speeds which is comparable to modem speed on a PC)
  • PCs usually have access to printers while mobile devices usually do not.
  • PCs have more robust applications like office suites which are usually lacking of mobile phones and such
  • People surfing the web from a cell phone are often looking for fast and quick basic information.  That, coupled with smaller screen size, translates to much more basic sites for mobile sites.
• The mobile web has its own standards.
  • WAP – Wireless Access Protocol, no longer used much started in the late 90’s
  • XHTML superseded most WAP applications
  • HTML5 is the latest language that supports mobile web development

This introductory article is for simpler sites.

Mobile Web Design Hard Facts

• CSS is great but not all devices support it
  • That coupled with all the different devices boils down to requiring not only a different design from that that works well with the desktop but often multiple mobile web sites are required.
    • You can find specifications for mobile devices at DeviceAtlas.com.
  • A lot of desktop web sites incorporate Flash to display media like pictures or movies. However, many mobile devices don’t work with Flash. So, more intricate mobile web site designs will probably requires multiple mobile sites or coded sites that will deliver content based on the user agent requesting the page.  (User agent is a bit of html information that your device sends when requesting a page telling the requested page’s server what kind of device is requesting.)
  • Think Javascript!  Javascript is a standard acceptable on most devices so programming media with Javascript is perhaps the best  alternative.
  • An less labor intensive alternative is to host media on sites like Youtube or Flickr that have services designed to deliver content based on the requesting device’s capabilities
• Media Hosting Sites
  • Flickr
  • Smugmug
  • Picasa
  • PC Magazine has a review of photo sharing sites here.
  • Youtube
  • CNet compares video hosting services here
• Content Dedicated Networks (CDN)
  • Can be costly but enable much more control.
  • Examples are Akamai, Mobile CDN
  • A comparison of 10 CDNs is here
• GPS can be complicated.  Google Maps for mobile has instructions for the different operating systems.

Tools to Create Websites that are Mobile Friendly

There are lots of web creation tools, but not all tools have specific capabilities for mobile web sites.

Dreamweaver is the ultimate tool, but expensive. Their cloud package is more expensive monthly than web hosting for relatively simple sites.

Xara Web Designer is an interesting choice with a one time cost for non-programmers and programmers alike.

Large Web Hosting services like 1and1 Hosting and GoDaddy have wizards that create mobile web sites.  You have to be able to live with the limits of the wizard but this can be a good option for a web site with a professional look.

WordPress and Other CMS Tools

(A CMS is a content management system, a tool for managing websites.  For example WordPress is a CMS and was originally designed for blogs.  However, it is very powerful and there are sites that use it for sites that are not just blogging sites.

WordPress, depending on the theme that you have chosen, may actually scale to the mobile market.  However, if it doesn’t there are plug-ins like Mobile Press, Mobile Detector, Mobile Pack, and Mobile Touch that you can install.  Joomla has available extensions like Mobile Joomla that do server side conversions of your web site to mobile versions.  Drupal has mobile tools for mobile web site development.

Mobile Web Site SEO Suggestions

Use “HandheldFriendly” meta tag to tell requester that your page is designed with mobiles in mind: <meta name=”HandheldFriendly” content=”True” />

Use an online validator to validate your code. A commonly used one is http://validator.w3.org/.

Remember pages are optimized with good descriptive titles, headers, and tags.  Being a good description means being accurate so don’t look like a scammer and a page that promises more than it can deliver, or stuff tags that are beyond what the page is about.

Register your site with mobile search engines.  The big mobile web sites include google.mobi, yahoo.mobi, msn.mobi, aol.mobi, and m.ask.com.

 

Some Mobile Web Design Suggestions

• Limit page size to about 25k.
  • Use small images
  • You can use img {  max-width: 100%;  } to size images to a container size
• Limit menu and list of links to about 5.
  • I think a vertical list is more practical than a horizontal one as people don’t like to have to scroll but they would rather scroll down than sideways.
• The modern trend is simple graphics with text on them, i.e. flat design.  The Windows 8 look is an example of flat design.  It is very easy to find things and a lot of people seem to like it
• Its pretty much a standard that telephone links initiate the call.  Use “tel:” in hyperlinks to phones, it enables the user to click a link that starts the call.

Testing your Mobile Web Design

There is no substitute for testing mobile web designs better than the original devices. But there are emulators.  Dreamweaver comes with Device Central.

Firefox has an add-on, the user agent switcher, that enables you to send different user agents so that you can receive mobile web sites into a browser.  You can also use the small screen renderer add-on to approximate the screen real estate of you device.

There us another tool where you can see mobile phone pages in your browser using transcoder pages.  See google.com/gwt/n?=http://yourdomain.com to use one.

There’s a list of testing tools at 10 Excellent Tools for Testing Your Site on Mobile Devices

Publishing your Mobile Web

You will need either a new domain or a subdomain for your mobile web.  A new domain means that you may have to pay an annual domain fee for you .mobi domain.  Many can add a subdomain for free to their existing web packages.  A common subdomain is m.yourdomain.com.

In terms of loading your web to your site the options are the same for desktop web sites, use a FTP client like FileZilla or use the built-in capabilities of programs like DreamWeaver, or ExpressionWeb.