HostingGreen web hosting packages
TutorialsBeginners guides to SEO & hosting
WIGHT HAT BLOG
Building a mobile friendly website
Adam Provis, April 30, 2011
We have just had a website makeover and one of the things that we wanted to address was making it mobile friendly. Whilst modern touch screen phones can handle most websites some can still be difficult to read on a small screen.
There were three options open to us to create a site that was just as easy to use on a mobile as a computer:
- Creating a separate website more suitable for smaller screen sizes
- Creating separate CSS styles which conditionally apply when a smaller screen size is detected
- Making a truly responsive and fluid layout that will naturally shape to the screen
The second option, creating a mobile CSS style avoids all of the problems with a separate mobile. An alternate CSS file can be linked into the page with a media=”handheld” attribute or a clause can be added to the existing CSS file to achieve the same aim. The common CSS is loaded and then, if the media type matches the addition styles override the previous statements. The HTML on the website cannot have style information within it and so all positioning and styling is controlled from the external CSS file(s). This isn’t generally a problem for more recently designed sites as the modern thinking is that the content and design should be strictly separated but it could be a major effort to convert an older site especially if the site isn’t using CSS at all.
The third option is the holy grail of mobile site design. A responsive layout will naturally adapt as the screen size changes using carefully constructed CSS minimum and maximum width fields and independent DIV sections on the page. Whilst these websites can cope with pretty much any display they are normally only feasible for a new site design (as it probably involves a complete re-build) and take a lot of work to get right.
Considering these options, we decided to go for option 2. If you are reading this post on a touch mobile then it should render in a very useable manner. We have decided to ignore old fashioned small screen mobiles as this site is more about written content and we don’t think that people would want to read a lot of text on a screen smaller than an after dinner mint. However, for some websites such as a restaurant or estate agent, these users can be important as people may need to quickly get the phone number or directions- for this purpose, the first option of a separate mobile site may be appropriate.
One thing is certain. People are using mobiles to look at your site and the number is only going to grow. As time goes on it is not really an option to simply ignore mobile users for most businesses.
Next post: Make your website social in 10 minutes
Previous post: SEO for WordPress