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.