More and more people are now accessing websites using their mobile phones or by using a tablet. When I look at the statistics for my client sites I typically see on average 20% of visitors have viewed the website using their mobile or tablet device. This is one in five people now viewing websites using their mobile or tablet.
It is obviously becoming more and more important that websites look good on mobile devices as well as on desktops. You can see what your website looks like on a mobile or tablet by going to http://mobiletest.me/, or you can simply resize your browser window, making it as narrow as possible. How does it look? In many cases, it will not look that good!
So how easy is it to update a website so it looks good on a mobile? Well the answer is surprisingly, pretty easy!
Usually the structure of the website does not need to be changed at all the only thing that needs to be changed are the rules that dictate the styling for the site. Those rules that affect the layout, font size, and other design aspects. By just updating the website's layout rules (the CSS), a website can be made to look good both on a desktop computer and also on a mobile or tablet.
1 in 5 people typically now view a website using their mobile or tablet.
How is this possible? Without going into too much detail it is possible to add layout rules that target mobile or handheld devices specifically, and do not affect the display on a normal desktop computer. So someone viewing the website on a desktop computer would have one set of layout rules applied while someone else viewing the same website on their mobile would have another set of rules applied, and so would see the same website but just displayed in different ways. This means that a website can be made "mobile–friendly" very quickly depending on the size of the website.
Mobile and Desktop Viewing Differences
What are the major differences between viewing a website on a normal desktop computer and on a mobile phone or tablet?
The most obvious difference is screen size. As mobile phones have much smaller screens than desktops, either you will see only a fraction of the full website or the website will be shrunk down so that it fits the screen of the mobile. This will mean that it will be very difficult to see any part of the site without zooming in.
Test your website by going to http://mobiletest.me/... How does it look?
The second major difference is that instead of using a mouse to navigate websites, with touchscreens, people use a finger or thumb. This means firstly, that there is no 'hover' effect, so if your website uses dropdown menus, they will be much more difficult to use on a mobile phone or another touch screen device. Secondly, small hyperlinks are more difficult to 'touch' than they would be with a mouse, making it much more difficult to navigate through a site on a mobile device.
To fix these problems, drop-down menus can be made to appear when "touched", and then disappear when "touched" again; links on a page can be made larger so that they are easier to touch. Content also needs to be laid out differently. On a desktop, using a widescreen monitor, there is no problem having lots of columns spanning the screen. Whereas, on a mobile phone, there is no space to have multiple columns. All the content needs to be displayed in a single column, to avoid having to scroll sideways.
A little bit of history
When it first became possible for people to view websites using their mobile phones, website designers responded by creating separate websites that were dedicated for viewing by mobiles. This was particularly true for more popular or larger websites such as the BBC and others. However, creating separate websites just for mobiles is quite costly and time-consuming, and as phone and tablet technology advance and more and more people began accessing websites using their phones, a more cost-effective and easier way of optimising websites for mobiles was needed.
Instead of creating separate websites specifically for mobiles, a new design process was started called "adaptive" design. Adaptive design meant that the same website could be displayed differently on different devices. Different layout rules could be written targeting the different devices or different sized screens. However, as more and more types of devices and different sized phones became available, using adaptive design became more and more complicated as so many different sets of rules were needed for all of the different types and sizes of devices.
This is where "responsive" design took over. Responsive design does not target specific screen sizes or types of mobile phone, instead it uses a flexible design style that adapts to all different screen sizes. It does this by using a system of "breakpoints" and percentage values instead of fixed widths to determine column sizes. By using percentages to determine column widths, columns can grow in size automatically depending on the size of the screen and still adhere to the same width ratio of the separate columns overall. Images can also scale up and down depending on the space available.
"Breakpoints" are pre-set screen sizes at which point the layout and design of the website will change to accommodate the different screen size. A typical website may have three or four breakpoints giving three or four different layout styles for the site.
Responsive website design is now the most common form of design for website to handle different sized screens. Responsive website design is also the easiest type of design to implement, to make websites look good on mobiles, tablets and desktops. Using responsive design is the reason why it does not cost that much to make new and existing websites mobile friendly.
As so many people are now viewing websites using their mobile or tablet, many website designers advocate a "mobile first" design approach for websites. A mobile first design strategy means that the website layout is primarily aimed at mobile devices, and then has a series of updated layouts to work on larger sized screens if the website is not being viewed using a mobile. The logic for mobile first design, is that the website is aimed at having the simplest layout for mobile devices, and then adds more and more complexity for progressively larger screen sizes. This strategy is the direct inverse of current website practice, which designs primarily for desktop users first, and only targets mobile users after that.
Mobile Website Design Benefits
Having a website that works well on mobile devices, means that not only does everyone accessing the website using different devices, all get a well presented and well designed site, but in addition, the search engine optimisation (SEO) for the website is much improved.
Third-Party Services
Lastly, if you do not want to go to the trouble of updating your site for mobiles and tablets, it is possible to use third-party services, such as Dudamobile that automatically change the delivery of your website so that it will work properly for mobiles and tablets. These third-party services will charge a monthly or annual fee. This can provide an easier option, however a certain amount of configuration is still required when setting up the service. However, it complicates things using a third party service when it is quite straightforward to update the website design directly.
Now you have seen the advantages of mobile website design, if your website is not working for mobiles, you can really benefit by updating it.
- Log in to post comments