Building Mobile Websites
How to Design and Build a Mobile Website
Mobile websites are websites specifically created/designed for mobile devices like mobile phones, tablets PCs. In essence for small devices.
Modern web design has become graphic rich with pictures/video as almost standard, and over the years sites have been designed for ever larger screen size with the standard now around 950px wide.
One of the main web page design criteria has always been to minimise scrolling, and so the web page size increase has followed the adoption of larger monitor sizes.
Below is a screen shot showing the monitor sizes of visitors to this site notice that the majority have a screen resolution of at least 1280px wide. At this resolution a web page 850px wide will fit easily without having to scroll horizontally.
However notice the screen size of the monitor in position 12. Yes it is 320 px wide and yes it is a mobile device. Guess how a 950px wide page would appear on this device?
Here are the actual stats for mobile device access to this site. Although the numbers are small ( around 3% of total) they will grow as the adoption of smart phones grows.
However small the numbers are for this site they could actually be quite different for your site. It would be logical to expect visitors to sites like restaurants, hair stylists, plumbers, real estate etc would be significantly larger.
If you have an existing site then you can use your site analytics to see the percentage of visitors that are using mobile devices.
I use the free Google Analytics and I would recommend you consider implementing it on your site if you haven't already done so.
How Your Website is Displayed by Mobile Devices
Depending on the design of your existing website the appearance of you website on a smart phone/mobile device might be quite acceptable.
Generally the simpler the site design then the more chance you have of having your site display satisfactory, although you will always have the problem of horizontal scrolling.
Sites that are graphic rich will generally display worse than simple text based sites.
However how the site displays is only part of the picture. The other is how the visitor is meant to react to the site.
For example:
- Are you expecting them to fill out a form?
- Watch a video?
- Call a contact number?
- Email You?
- etc
Is is possible to accomplish the task easily using a mobile device? that remember, is using a touch pad and not a mouse and keyboard.
There are several online emulators or simulators that let you view your existing site using a mobile phone that you can use to test your site. The ones I use are:
Mobile Website Design Considerations
Mobile devices offer two main problems
- Reduced Bandwidth
- Reduced Screen size
Both of these problems were present at the start of the Internet era, but have been largely eradicated with the introduction of broad band internet access and large monitor sizes.
Reduced bandwidth means that large graphics shouldn't be used but the fact that the screen sizes are so small means that they couldn't be displayed correctly anyway.
Also remember that flash video isn't supported.
Because of the screen size initiations simple one column templates are almost always used and navigation is kept very simple with the minimum number of choices.
Creating A Mobile Site
If your existing site displays poorly on mobile devices then you have really two options.
- Use your existing site with a mobile friendly style sheet
- Create a new mobile friendly site
Using your existing site with a mobile friendly style sheet
This technique involves detecting the device that the visitor is using and if it is a mobile device then use a mobile friendly style sheet to display the site content.
This technique as the following advantages/disadvantages
Advantages
- No need to create a new site or new content
- Only one url/domain name
- Transparent to the visitor i.e. the visitor doesn't need to do anything.
Disadvantages
- The solution is a compromise and it is unlikely that the information is presented to the mobile device in an optimum way as the sit design is still for a desktop based client.
Create a new mobile friendly site
Mobile visitors have
Advantages
- The information is presented and tailored to the mobile device and will give a better user experience.
Disadvantages
- Need to use two domain names or 2 urls
- Need to create brand new site and content
- Visitor needs to choose between mobile and desktop sites.
Mobile Devices
Although website access has been possible for a few years on older generation mobile phones the majority of new phones being sold are Smartphones and these support a full web browser. This means that the majority of current sites will display on these phones but the user will be required to scroll a lot due to the small screen which is far from ideal. This is how this site appears on an apple iphone.
Resources: