Designing anything always brings a set of challenges for both designers and developers. Although overcoming these challenges is often what makes design so rewarding,web design for mobile devices is no different and I have certainly come across these challenges myself. As a result of this I imagine that other designers already have, or may, come across many of the same issues that I did. That is why I have chosen to outline the seven most common mobile design issues you’ll likely come across in 2017.
1. Resolution and Device Sizes
As designers we have all at some point come across the issue of designing websites for different resolutions, but in mobile design that same problem arises again but with a slightly different issue. Not only are we having to design for smaller resolutions but also there are a greater number of differences in device sizes, and unlike traditional web design we can’t just fix this issue by designing for the smallest resolution and wrapping the content. As the devices in question are smaller, we ultimately want to use the whole width of the screen and that means percentage-based widths. We can use some of our traditional principles and still create our content, navigation, and images to fit even the smallest of devices, but as the res gets larger we need our content to expand and fill the screen. The solution is simple – just make sure your tags, etc. are percentage-based and transition well. But remember the important rule: TEST your site on many devices to make sure your design works.
2. Research the Area
As with any type of design, we must research and understand what that particular area of design involves. Mobile design is no different and that is probably why you are reading articles like this. Jumping into mobile design without understanding its basics can be a big mistake and the outcome can look unsightly. If you do your research you will be a lot more confident; a better understanding leads to a better end result. Check out our other article about this called “5 Tips for Creating a Mobile-Friendly Website“.
3. Advances In Mobile Technology
Again, this is nothing new to an experienced designer. Rapid change has been occurring in web design for years, from ever increasing screen resolutions to new markup standards and browsers. As the mobile industry is on the rise and more and more devices are coming into the market, there is ultimately going to be more and more competition as companies compete with their own technologies. Designers need to stay on top of this, understand the changes, and adapt with each transition. If you keep on top of the industry then I’m sure your design will prosper as a result.
4. Simplicity and Content
If you read my previous two articles on mobile design then you will already be familiar with the concept that ‘simplicity is key’ to mobile design. Most mobile users are on the move, looking for information, so they won’t be interested in fancy graphics, images, and animations. If it isn’t essential, then remove it from the design. If you keep the design clean, simple, and usable, then deciding on your content and the way it looks will become much easier. Concentrate on establishing effective navigation at the top and bottom of the page with a possible search bar as the user will want the information rapidly. If they can’t find it quickly, then it’s likely they will go somewhere else. Remember that typing on a mobile device is a lot trickier than on a keyboard, so if you are using online forms, then keep them as simple as possible. An additional, essential point to remember is to make sure your typography is clear, simple (i.e. use one of the common fonts), and easy to read.
5. Test, Test, and Test Again
If you take one thing from this article then let it be test, and then test again, and then test once again. Much in the same way as traditional web design, it is important that we test our creations. Only in this way will we know if they work well. Understandably, it is much trickier than working with a desktop website as we are never going to have all the mobile phones available. To make things simpler, we can make sure we keep our designs simple and that they are coded to standards. This way we can be sure that whatever else happens when our designs are loaded that at least all of the content will be viewable and readable.
A really good method for testing mobile designs is to use the opera browser. Using opera, we can choose to disable images, CSS etc., as well as decrease the size of the screen and view our mobile site. This way we can get a good idea of what our site will look like if CSS and images aren’t loading the way we want. To do this in the Opera toolbar, go to “View” and select “Small Screen.” This will display the website in a narrow window, similar to what would be used on a mobile device.
6. Browser Detection
If you are a designer then browser detection scripts are going to become a difficult area to deal with, as customising or writing the scripts may be necessary. Mobify is a good place to start. Using mobify all this is taken care of leaving you to just concentrate on the design. Once you have finished, you can simply cut and paste 2 lines of javascript to do all the browser/mobile detection for you.
A few points to follow to guarantee success:
1. Clean XHTML Markup and CSS
XHTML a markup language we are all familiar with and styling using CSS.
2. Know Your Phones
Make sure you cater for the largest and smallest of mobile devices. Scale your site and content to fit all screen sizes.
3. Know Your Users
Your users are likely to be on the go and in need of info fast. Make sure your site is clean, usable, and easy to find, and read the information that is needed.
4. Simplicity Is Key
Simplicity is key. Use simple styles, essential content, and only important images. Stay away from complex animations.
5. Use a Sub-domain
Using a sub-domain is the easiest and cheapest way to launch your site. Something like ‘www.mobilewebsite.com’ always looks good and will function well with your users.
6. Validate Your Markup
Using valid standards to semantically correct markup will make sure your content is viewable and easily readable even in the poorest of conditions.
7. Test
Testing is the only way to make sure your design works properly. Test on a number of devices, a number of sizes and platforms to make sure everything is as it should be.