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