Skip to main content

Mobile Web Design

Last year, mobile web browsing overtook desktop use for the first time. By December, mobile users accounted for  50.25%*  of the market share compared with desktops  44.74%*.



 

In 2017 mobile experience can no longer be seen as an afterthought to your main desktop site, it has to be given equal priority at every stage of the process, as it will comprise the main (and often only) experience for many of your customers.

Here are the key areas to consider for mobile sites:

Text

Users tend to  scan, rather than read   online. Therefore, for all web users you want to keep your text brief, to the point and make it as easy to scan as possible. When it comes to mobile devices, keeping text simple and well-structured is even more important, since due to the smaller screen size comprehension of text on a  mobile   is 48%**   of the same content on a desktop site.

Keeping  paragraphs short , making good use of  headings , and using  bold to highlight   important key words will make scanning through your content easier for your users.

And most importantly, make sure that  links   within your content use  descriptive wording . For example, using the linked text  meet our team   is much more useful when skimming than  click here.

Order

One screen of content on a 30” inch desktop monitor requires  5 screens   worth on a 4 inch phone. Therefore, it takes much  more effort   for a mobile user to absorb all the same information that a desktop user could see when they first land on a page. You need to think carefully about the order of your content and how it is prioritised, because what seems like a small restructuring on a desktop screen could have a  large knock on effect   on a mobile.

Layout

On a desktop, you can have your content arranged in multiple columns, but on a mobile screen everything will be moved into  a single long column . When you are creating your content, think carefully about how this will be presented on a mobile (and make sure to view it on a mobile frequently) so that these users get the best possible experience.

Make sure that related content will  stay together   and everything your users read will flow properly in this new layout. Be careful never to use phrases such as “the form to your right” or “the menu to your left” as this  won’t be accurate   on mobile.

Unique Content vs Chrome

Finding your way around a mobile site can be much more difficult than on a desktop site, for a number of reasons. Due to the small screen size, the ratio of “chrome” (site wide elements such as headers and menus) to the page content is crucial.  You don’t want  a large header or menu   at the top of your screen taking up most of the space “above the fold” and making it difficult for users to  view a page’s content .

As a minimum, you want to make sure the unique content of a page takes up  at least two thirds   of the space above the fold, which leaves only a tiny space for your logo and menus. This is why most mobile sites have the main menu hidden and accessible via the hamburger icon (three horizontal lines).

Navigation

While a hamburger menu makes the best use of the space available in most cases, the downside is that mobile users  don’t see the links   in your menu when they first visit your site, and will be more focused on content. When you think about second or third level menus, this is even more pronounced, as users need to dig much further on a mobile site to access this content.

So when using a mobile, it is often much easier for users to  navigate using the content . Make sure you link to relevant pages within the content of your site as much as possible, and consider having a list of other useful pages to visit, or a call to action at the bottom of pages, to give your users somewhere to go next, as  scrolling  back to the top or  going back   can be more difficult on a mobile.

Carousels

While carousels are a popular way to get more content “above the fold” on a website, they do have drawbacks, and these are  even more pronounced   for a mobile user. Since there is  less space   available above the fold for mobile users, they are likely to scroll or  move on much faster   than a desktop user, so the likelihood is they will  never see   the second slide of a carousel. If you have a series of offers or products which are interchangeable and it doesn’t matter too much which one a user sees, a carousel might still work for you, but if you have information you need your  users to see , don’t put it on the second slide of a carousel.

Conclusion

The key to a good mobile site lies mostly in the text. Keep it  simple, short, well-structured   and linked together in a logical way so your users can find what they need as easily as possible.

Most importantly, remember to  keep checking   your mobile site regularly, so that you can iron out any issues before your users find them.

#load_back{width:100%;height:100%;opacity:.7;background-color:#fff;position:absolute;z-index:1050;text-align:center;} #load_img{width:100%;height:100%;position:absolute;text-align:center;} #load_img img{z-index:1051;position:relative;} .load_center{position:absolute;left:0;right:0;bottom:50%;} .load_center img{margin:5px;} div.TableColumnHandle{cursor:url('https://s1-word-edit-15.cdn.office.net:443/we/s/1680223702_resources/1033/ColumnSelect.cur'), pointer}div.TableColumnHandle{background-image:url('https://s1-word-edit-15.cdn.office.net:443/we/s/1680223702_resources/1033/Blank10x10.gif')}div.TableColumnResizeHandle{background-image:url('https://s1-word-edit-15.cdn.office.net:443/we/s/1680223702_resources/1033/Blank10x10.gif')}.NavHierarchy.NavHierarchyLoading{background-image:url('https://s1-word-edit-15.cdn.office.net:443/we/s/1680223702_resources/1033/progress16.gif')}Word Online

* http://gs.statcounter.com/comparison-market-share/all/worldwide/#monthly-201612-201612-bar    

**From Mobile Usability by  Jakob   Nielson and  Raluca   Budiu