The Microsoft World: Designing Mobile Friendly Web pages
Today, about 30% of traffic to Websites comes from mobile devices. 60% of local searches on Mobile phones lead to a phone call. There are more than 2.5 billion Mobile Internet users.
And as more low-priced Mobile devices become available, the usage rate can only increase. A mobile-friendly website has become an imperative.
There is another pressing reason for having a mobile-friendly Website. Google's mobile search engine results pages (SERPs) are now "significantly impacted" by the mobile-friendliness of a website.
The varied world of Mobile Devices
Mobile Devices vary from the Smartphone to Phablets, to Tablets, to Microsoft’s Surface or Apple’s IPad.
Every Website now needs to cater for the fluid environment required of the new paradigm. This page describes how my Website was transformed to handle Mobiles over a matter of days. All thanks to Microsoft's ASP.Net Web Forms, Master pages and Visual Basic.
How this Website appears on a Smartphone device
The image below has been dynamically extracted from the current Home Page of this Website. The scrollbar is active - try it!
No content was omitted when extracting text from the Home Page.
Web Page Changes needed for A Smartphone
With a restricted Width, changes were needed to make the content fit meaningfully on the screen. These were:
- The Heading was abbreviated
- The Menu was reduced to 6 items
- Navigation made simple and easy to use
- A single-column layout was used for the content
- The side-bar was removed
- Client References were removed
- Newspaper columns were removed
Most of this has been achieved by altering the CSS styles. No content was changed.
The result is that the Visitor can view as much relevant information as possible, without any loss in content. When the device is automatically changed to display horizontally (from portrait to landscape), the width of the Web page shown increases accordingly.
Responsive Web Design
Responsive Web Design provides an optimal view of a Website, with minimal resizing, scrolling or zooming – on any device be it a Tablet, Desktop, Mobile or Smartphone. Responsive Web Design has removed the need for mobile versions of a Website – as it can automatically adjust the page size according to the screen.
Using Responsive Web Design to create a single Website that can handle multiple devices has a cost benefit. It is also the technique recommended by Google. Creating a separate Website solely for Mobiles is frowned upon.
The Website designer uses CSS styles to create pages that can handle the varying widths of different devices. But there is a limit to what CSS manipulation can achieve. Some features will need to be omitted to cope with the limited screen space of a Smartphone.
For the well-established or large Website, it is desirable to produce Mobile friendly results without making too many changes. It is a reasonably simple matter to amend a Website so that it is capable of handling Mobiles. This can be done by adding an additional ASP.Net MasterPage to handle Mobiles. The Website will then become Mobile-friendly with minimal changes.
With Responsive Web Design and a dedicated Mobile ASP.Net MasterPage file, very sophisticated Mobile-friendly Web pages can be created.
There are limitations in creating Web pages for Smartphone:
- The Menu links have no Hover or Visited effects
- Drop-downs may or may not work, and do not work when Hovered
- There are no Tooltips
- The width is too limited to view Sidebars as well as the content
- The size of an active link area must be large enough to handle finger activation – and there must be sufficient space between the links
- The padding and images in links must be active
- Text entry is awkward and should be limited
Handling Smartphone on your Website
Allowing for Smartphone access is reasonably easy – if you are using an ASP.Net MasterPage File. Here are the steps:
- Add a new MobileMasterPage file to the Website
- A responsive viewport meta tag should be placed in the <head>
- Add logic to check for a Mobile using the Request "user agent"
- Reference the Mobile MasterPage in the code section of each page – when a Mobile is being used
- Design a structure in the Mobile MasterPage ensuring the Menu and Heading use Responsive Web design techniques
- Check the resulting pages in a desktop Browser with varying widths to ensure no cut-off occurs
To check for problems and to see a Mobile view of a Web page, use the Google resource Mobile-Friendly Test on each of your pages.