The advent of mobile phone internet access has signaled a change in the job description of the average web developer. Designing websites for a (relatively) simple desktop browser is now only one part of web development, and web developers must adapt to the surge in popularity of the smaller, mobile format.
So to help make sure this little transitional phase runs as smooth as possible, we’ve collated a list of top tips to ensure you’re fully prepared and equipped to take things mobile.
1. Recognize The Difference
Perhaps the most important thing to remember when designing for the mobile web is that it is a completely different format than that of the desktop browser. As a developer, it is important to get into the mindset of treating the mobile web world separately.
For example, lazy or slack coding that may go unnoticed on a large scale could be crucial when dealing with the much more concise mobile format.
2. Simplify Your Design
A key principle to bear in mind is that when it comes to the mobile web, simple is always better. Whether it be the visual design of the page, the actual coding or the content itself, trimming it down to its most simple is always most effective.
Simply taking a web page and downsizing it to fit on a mobile screen will look cluttered and unreadable. Follow the example of sites like Digg and keep your page lean and stripped to the bare bones.
3. Be Flexible
Just as the mobile format differs from the desktop, a level of flexibility is needed within the format itself. For example, when designing graphics, consider screen size, shape and resolution: designing one uniform graphic and expecting it to fit every phone type would be a grave error!
4. Test, Test, Test
With so many different formats to consider, regular and effective testing is an absolute must. It doesn’t matter how you do it, whether it be renting time, buying a range of phones to experiment with or simply asking your friends and colleagues to give up their phones for a few minutes, there is no substitute for real time testing.
5. Prioritize Your Pages
The amount of time people spend browsing on phones is minimal compared to on their home computers or laptops, so you need to make sure the page gets the most important information across first. Users often only tend to browse for minutes at a time, so if they can visit your page and get the information they need in seconds they will be sure to visit again in future.
6. Know Your Audience
If you’re going to prioritize your pages, you’ll need a good grasp of your target audience. For example, if your page is a general blog mainly used for casual browsing, you will want to keep most of the detailed information off the front page, looking more for a general overview.
It may seem overkill, but it’s these seemingly trivial issues which can a separate and average page from a very good one.
7. Keep Up To Date
Like most forms of modern technology, the mobile phone is constantly developing, and as a developer, it’s your job to keep up with the latest advancements. Take the iPhone as an example. It completely revolutionized mobile browsing, and its thousands of applications mean you can do pretty much anything from it.
The takeaway here is that as a developer, you simply can’t afford to be left behind by the fast paced progress of the mobile world.
8. Pick Your Domain
When it comes to choosing a domain name for your site, try and keep it as close to your normal domain name as possible. Perhaps the best way of doing so is to simply create a sub domain, which means the user doesn’t have to remember a second domain name and makes advertising a lot easier. Again, simplicity will see you reap the rewards in the long run.
9. Deal With Images
When designing for a desktop browser, a huge, eye-catching image is often a great solution to help improve the page’s visuals. However, images have to take a back seat to some extent when it comes to the mobile web. High resolution images, especially at the top of the page, can cause the page to take an unnecessarily long time to load, so try and keep images small. Image optimization is also a great way to make sure whatever images you use are of a high quality for the format.
10. Reduce Page Length
Many smaller devices actually restrict the amount of screen size that is available for any particular application, so often the ability the scroll both horizontally and vertically can be an issue.
There are a number of ways to get round this problem, perhaps most efficiently by presenting users with an intuitive means of internal navigation where they can quickly access other pages. This way, you can keep the amount of information on each page as minimal as possible.
11. Optimize Graphics
Graphic design for the mobile web requires some real restraint from the designer, especially one who’s used to developing large scale, intricately artistic creations. Their complex beauty often goes unnoticed on the small screen, hence designs often work best when kept particularly clear-cut. Stick to straight lines and contrasting colors to make your graphics stand out.
12. Play It Safe
As previously mentioned, lazy mark up will be much more damaging to a mobile web browser than a desktop. So when it comes to mark up, make sure all tags are supported to ensure your page comes out looking and functioning as well as possible.
For example, features such as tables and nested tables can take much longer to render on a mobile phone because they typically have much less powerful processors, and many casual browsers will just navigate away from your page instead of waiting!
13. Utilize White Space
An error that many inexperienced developers make is to think that because the format is smaller, it’s okay to cram the pages full of a content, so much so that the user can barely make sense of the screen. This is not good.
The right way to do it? Embrace white space. Yet again, the minimalist approach is key. Don’t be afraid of blank spaces: they simply keep the user’s attention focused on the content that really matters.