Mobile Web Design: Everything To Get You Started
The PC is dying. Every major corporation that was closely associated with the rise of the PC is either having to pivot or has gone out of business. Even corporations considered as untouchable by market forces such as Microsoft or Intel are now struggling to adapt to the mobile first and in many cases, the mobile only era.
So What Does This Mean For You and Your Business?
Metrics from every analytical company show that usage patterns are skewing towards mobile platforms all over the world. Websites are seeing almost a third of their traffic come from mobile users and this number may be much higher in certain sectors.
Google, the de facto search engine for most of the world has also recognized this trend and has included being ‘mobile-friendly’ as a factor to rank website results. Also, search results made from mobile devices will return those websites which are optimized to work seamlessly on those devices.
This means that every business that wants to stay relevant to its customers and the search rankings must ensure their website works perfectly with mobile devices.
How Do You Go Mobile?
There are three ways in which you can ensure that all the customers are shown websites that render perfectly on their devices.
- Responsive Web Design: This would be the first choice for most companies and the one that Google recommends to developers. It basically means that the same website (URL, HTML Code) is loaded using a different set of rules depending upon the device from which it is being accessed.
- Dynamic Serving: The URL of the website remains the same but a different version of HTML and CSS is loaded depending upon the browser information available to the server.
- Separate URLs: The mobile site here has a different URL than the main site and users trying to access the website from mobile devices are redirected to it. The domain name can be similar to the main website or completely different depending upon the site structure.
Google itself does not favor any particular URL format so long as they are accessible to its web crawlers.
Businesses also have to consider the source of their traffic when they are thinking about optimizing their website. If a large percentage of the traffic is using feature phones, then an acceptable solution for that would need to be implemented as well.
Designing For Mobile
The most straightforward way to design for mobile seems to be through using a CMS or a Content Management System. WordPress is by far the most popular option here and allows the user to implement pre-made themes that take the heavy lifting out of design.
Joomla is another option that is open source and completely free to use a web publishing platform. It uses the model-view-controller framework that is accessible even independently of CMS.
The advantage of this method is that even a novice can design the website by themselves and be assured that it will display correctly on any device. Using responsive design is highly recommended using this option. The budget required to get your website off the ground will also be the least using this method, however truly differentiating it from others on the internet might be a little more difficult.
When it comes to content being displayed on the mobile screen, be ruthless with has to stay and what has to go. The top mobile websites around the world strip down the web version of their websites to show only the most essential operations of their website.
Ideally, the entire content to be displayed on the mobile website and on the main website should be designed keeping mobile in mind. The advantage of this method is that almost anything that the mobile browser can display can also be displayed by the desktop browser, however, it does not quite work the same way the other way round.
Avoid Flash videos on your website since most major platforms do not support it or have it switched off by default. Content that does not display properly on a mobile screen will also negatively impact the Google ranking of the website.
While minimizing content will ensure that your site is easy to navigate and loads quickly as well, the mobile website must keep design cues similar to the main website so that users recognize the fact that they are where they meant to be and not somewhere entirely different.
Use of an analytical tool to help map out the most commonly followed visitor paths and weed out elements that are superfluous to usage will allow developers to streamline their design.
Remember too that you are designing the website for human fingers which are nowhere near as precise as a mouse pointer and require much more space. Menus should be large and be usable without having to zoom into the screen.
A Spartan approach to design has to be taken when you are going from a traditional website to a mobile one. Avoid having too many pages to which the user has to navigate and instead try and include an endless scrolling format.
It is also surprising how many time users realize that they can remove some of the clutter from their desktop version while designing the mobile version of the website.
Having a mobile website is no longer an option for business, it is a necessity. The ones that adapt first will be the one that benefits the most.