How to Build a Mobile Compatible Websites
Remember that a mobile website is similar to any standard website. These have HTML pages, text content, data, images and video, just like any other website you see on a desktop or laptop computer. They are that are accessed using Wi-Fi, 3G or 4G networks.
Mobile websites differ from the websites designed for the typical desktop by being designed specifically for the smaller handheld display and touch-screen interface found on the tablet computer and mobile phone devices.
The Main Challenges
Web designers have seen websites viewed on mobile devices more and more over the last few years. Designers can no longer afford to ignore this with the advent on mobile apps and mobile website.
Four main challenges that face designers.
- So many devices, some many browsers.
Mobile development is more than cross-browser compatibility, as it is also be cross-platform compatible. There are so many mobile devices from well established vendors such as Apple and Samsung, and more on the way up. Testing for each device is a near impossible task. To make things even more difficult is the fact that all the devices can use many different mobile browsers such as the native pre installed browser or Android or Firefox and other browser.
- Internet connections and slow speed.
A survey by EPiServer shows that the slowness of a mobile website is a major issue for users of tablet and smart phones. They are not as tolerant in waiting for a website to load or for features of a web page to load as those users who are using a desktop.
Internet connections provided by vendors are in some part responsible for the slow speeds experienced by users. Networks being busy or the web hosting being slow, both of which are beyond the designers control.
Designers are challenged to design with mobile users in mind and give them the tailored but complete experience they want on the device that they use. Rather than simply cut out parts of the regular desktop designers should streamline their mobile websites should avoid pop ups, Flash applications, high quality background images, and unplayable videos. They should also check that any redirects to a mobile URL are working. Therefore the speed of the Internet connection and loading time should be increased to a near instant load and quick and enjoyable experience.
- Small screen size
Mobile devices present designers with a further challenge which is a seriously small screen size. This forces designers to produce radically different layouts of the main website. Typically the mobile website scrolls vertically or downwards with sections “stacked” on top of each other. Designers should however restrict just how much they do this because users do not want to endless scroll to get to what they want to see, else they will just leave the website.
- Ease of use
As well as battling different screen sizes, designers also face the issue of ease of use or easy to use. As with all websites, they must be easy to use else the users will just leave the website.
Designers can do a few things and include the following:
- Improve readability by increasing the font size of any small or medium-sized text.
- Increase the clickable areas of any important buttons or links because “clicking” on links and parts of web pages is generally less precise on mobile devices.
- Choose vertical scrolling over horizontal scrolling because horizontal real estate is especially expensive on mobile devices.
- Avoid floated elements where possible as these cause problems for mobile layouts.
- Avoid mouse over states because these do not work with most mobile devices. This calls either for showing the links at all times on mobile devices.
Three approaches to mobile design
With the above four issues in mind, designers have many approaches open to them when they are designing mobile compatible websites.
- Responsive Web Design (RWD)
Using RWD enables you to optimise your website experience across different screen sizes and devices without creating multiple websites. This is accomplished by using flexible templates, CSS media queries, and JavaScript events. This approach results in is a website that can respond to the viewport size of a device and adjust images, template layout and content visibility. They can even harness novel device capabilities such as dragging, swiping and other user-gestures recognised by touch devices.
In addition, only a single URL is needed and this makes it easier for your users to interact with, share, and link to your content. No redirection is needed for a device-optimised view. This reduces load time.
- The Dynamically Custom HTML on the same URL
Websites can set to detect what kind of device users are using to view your website and so present a custom page (HTML + CSS) to the user on the same URL. These custom pages can be designed for any kind of device.
Detecting the user’s device and changing the content served requires some customisation that need to be maintained on a per device basis. Detection thus heavily relies on the device to relay its true user agent.
- Separate mobile URLs
A third option is to build a separate site for mobile traffic which is independent of your original desktop site. Designers can let the user decide if they wish to view the mobile website or not. The IKEA furniture store was one such example.
While this option requires more user interaction from the user, it is arguably the most fool-proof method of dividing mobile user traffic from desktop traffic and also the easiest option to accomplish. There is no need to detect devices.
However some mobile users may miss the view mobile link and other non-mobile visitors may click the link because it visible regardless of what device is being used such as desktop, tablet, or smart phone. Some users do prefer a condensed layout that is optimized for their device, whereas other users may prefer to access the entire website, without the restrictions of a limited mobile layout.
How software can help accomplish this task and make it easier?
Web design software in this day and age means software that can be bought and downloaded to a desktop computer, and software that can be subscribed to and used online.
From the beginning of web design, web design software over time has made the task of designing websites easier by reducing the complicity involved such as remove the need to hand code all the time, reduce the time it takes to design a website, and allow more novices to design their own website and so make it all less elitist. Designers have used software such as FrontPage, Dreamweaver, Visual Studio, and Expression Web to aid them in this task.
Designers can again make use of these tools to help them in their task of designing mobile websites. Such software is now both desktop based and online via many website builders such as those provided by GoDaddy and FashHosts. There are many more.
Dreamweaver, the industry standard, in its latest version uses responsive design in combination with a range of built in settings for desktop, tablet and smart phones and allows designers to design a mobile compatible website with ease.
Equally, website builders such as those provided by FastHosts and GoDaddy enable even the most novice designer to design a mobile compatible website with just a few clicks.
Both types of web design software make the task of mobile site creation easier because they include the ability to automate most of the tasks and processes needed. Typically, the responsive design approach is followed and so the concepts of Fluid Layouts, Proportion-based grids, and Media Queries are used.
Designers are able to address the some of the main challenges discussed above using software to automate to some degree the creation of code for a successful fluid layout combined with CSS and JavaScript media queries. Websites will adjust to the screen sizes of different devices and cater for the number of browsers available on mobile devices. Ease of use is helped by features in software that help make menus and clickable areas to easier to click on. It is also the designer’s purgative to take such steps.
Software cannot help what the Internet connection and speed are and so remain both out of the designer’s hands and user’s hands in many cases but the designer has the discretion to streamline their mobile site by avoiding any unnecessary that could slow the website’s loading time on a mobile device.
