Mobile web use is booming - this month, Opera Software reached 249 million users across its mobile browsers - but are websites really prepared for the influx of users with small screens? There is a wide variety of mobile devices on the market, and more people are eager to make the most of their web-capable mobile devices.
In this State of the Mobile Web report, we take a closer look at seven must-do tips when making mobile-ready websites. When planning and designing websites that display well with both mobile and desktop screens, there's more to think about than just the sizes and resolutions of devices.
At Opera Software, our lead web designer Matt Cox (@coxy) has redesigned websites not only to fit various screens, but also to respect the different approaches website users have when switching between devices.
“If you're not designing a responsive site, you're designing wrong,” says Cox. Responsive design means adapting to the screen or window size of the user's browser, as well as changing the layout on the fly, without sacrificing the fidelity of the desktop website. “Where possible, mobile sites should be responsive to give the user the as-much-of-the-same experience on a mobile device as they have on a desktop computer.” Cox cites one such example in the GOV.UK website (http://www.gov.uk), where the front page looks good on both mobile devices and on the desktop computer.
A screenshot of GOV.UK
“Whilst I applaud the 'mobile first' method, embracing it can have as many pitfalls as it does benefits,” says Cox. Planning and designing websites with focus on one particular usage may restrict some website designers into a given set of thinking.
“Take the 'mobile in mind' method, where you can design for the largest, desktop resolution first, but constantly keep mobile in mind and ensure that every design decision factors in how what you're doing would appear and function on a mobile device. As a working process, it's sometimes far easier to scale down artwork than it is to scale it up.”
While we cannot all be programmers and designers with deep understanding of how to do every aspect of website development, a little knowledge can go far. As a manager or executive looking at the web design process from afar, do read up on the various technologies and what they can and cannot do, suggests Cox: “Work to understand the needs, requirements and restrictions of a developer.”
Moving on to the nitty-gritty details of web design, going from having a desktop-ready site to a mobile-ready site means having to make a few adjustments to the functionality. Mobile devices present different challenges for website designers. One such challenge are smartphones. “With the increasing amount of smartphones in the hands of the public, people are more aware of 'app-like' mobile interaction, allowing you to follow through such methods of navigation and interaction on your site,” says Cox. “Think carefully, as you work through the design process, of what would function more effectively as a swipe gesture, etc.”
Less is more, and even more so on a mobile device. “Make pages clutter-free, with a clear focus. Work to avoiding cases of accidental clicking by a user. What's more, keeping file size and load times down is always a good idea for a mobile site,” says Cox. “Use CSS3 technologies where possible. They give web developers and designers flexible tools to make elegant and user-friendly websites that can be used across different devices easily.
There's a lot you can do, even on a smaller-sized device. “Don't feel restricted in your possibilities. Some projects will require something new, different and unseen on a mobile device. Think fresh - don't let the restrictions of a small screen stifle your creativity,” advises Cox, regarding the importance of thinking creatively about mobile devices.
The final point of advice about web design is one that too many seem to take lightly. “Before you throw it live on the web, test it. Then, reiterate if things don't work for you,” advises Cox to those seeking to make sites work perfectly for their users, regardless of the device they choose.
In March 2013, the consumer base of the Opera Mini and Opera Mobile browsers increased in unique users. In all, more than 249 million people used Opera Mini or Opera Mobile last month. The Opera Mini servers (which do not process pages from Opera Mobile browsers) served more than 171 billion pages and compressed over 13 petabytes of data for Opera Mini users. 33% of the total users of Opera Mini and Opera Mobile are using smartphones to browse the web. Compared to March 2012, the total number of Opera Mini and Opera Mobile users grew more than 29% year over year.
In March 2013, over 249 million people used Opera Mini and Opera Mobile. More than 22 million were Opera Mobile users, and the rest were Opera Mini users. Compared to March 2012, Opera Mini and Opera Mobile combined grew more than 29% year over year.
|Month||Opera Mini||Total users|
Opera Mini users viewed over 171 billion pages in March 2013. Since March 2012, page views have increased by more than 46%.
In March 2013, Opera Mini users generated over 3.1 billion MB of data for operators worldwide. Data in the Opera Mini browser is compressed by up to 90%. If this data were uncompressed, Opera Mini users would have viewed over 13 petabytes of data in March. Since March 2012, data traffic has risen by 64%.
|Month||Data transfer (MB)|
For more information about the State of the Mobile Web report, please contact Pål Unanue-Zahl palu[at]opera.com, +47 2369 2400.
Get updated each time we release a report.