Sam RoshanApril 22,2014

Indispensable Mobile Web Design Tips

Experts have predicted that before 2014 comes to a close the number of mobile subscriptions will exceed the planet’s population. A mobile revolution has certainly gathered momentum, and as a consequence many people are focusing on designing for the mobile web.

Consequently, web developers need to come up to speed with mobile design, in order to be competitive and remain viable in the future. With this concept in mind, we’re providing some tips developers should be aware of when they’re designing for mobile.

IMG_18042014_193140

Considering User Behaviour

Not all your mobile visitors will be accessing your site while they are on the move. This is a concept that you should consider. Mobile browsing may frequently be done while waiting for a train, riding in a taxi, or even while relaxing at home.

Therefore, if you make your design overly simplistic, it may be counter-productive. If you have a flat design, that has very little content, this may discourage some visitors from engaging more fully with your site, since it will appear like a simple banner ad.

Many people use mobile devices to browse the web, even more so than using their desktop. Therefore, although you do need to make your site usable on mobile, it should still be rich in content.

Rapidly Changing Technology

IMG_21042014_105742

Mobile devices have changed considerably since the iPad was first introduced. Since the mobile industry is continually and rapidly evolving you should consider how you can create your designs so that they’ll remain viable in the future.

Therefore, you need to remain aware of the most recent trends in order to ensure that your design will remain usable for the next few years.

Currently, responsive design is widely used and it will likely be implemented in your designs as well, in order to improve their mobile usability.

While many of your visitors will be using smartphones, others will not.

Therefore, you have to create your designs to accommodate them:

  • Conduct some research during the initial phase of your design;
  • Gain an understanding of the types of devices that are used to access your site; and
  • Learn the behaviour of your users

Breakpoints & Your Grid

When you’re creating a responsive design, you need to define the grid and breakpoints at the outset of the design. There are many online tools that can be used to assist you in defining your columns along with their widths and their gutters.

Many developers set breakpoints on the basis of display resolution. However, this may not be the optimal solution, since there are a wide variety of devices with many varying resolutions.

Alternatively, breakpoints can be used based upon your content and design, as opposed to resolution. In order to test your grids and breakpoints, you can use a browser window during the design process so you can visualise the behaviour of your content when it’s resized. Your content should flow as naturally as possible and you can make use of breakpoints, as needed, to accomplish this.

User Experience And Compatibility

There are differences in mobile operating systems. Therefore, you should consider the guidelines when you are designing for iOS and Android devices, and the differing browsers that may be used.

Be aware that site visitors will be using a number of operating systems and some will be using older versions. Therefore, you will want to try to make your site as backward compatible as possible. It may be helpful to examine your analytics to determine the types of devices that are being used to access your site.

Even after your design is completed and you have launched your site, it’s instructive to examine your analytics and adapt your site as necessary.

Mobile Optimisation

Mobile Optimisation

Mobile site optimisation, particularly on landing pages, is vital, since this is your site’s entry point.

Therefore, your site needs to be optimised with your target audience in mind, as well as search engines.

Site navigation should be simple and straightforward, text should be unambiguous, click-to-call functionality should be used, simple one-click and/or progressive forms used, and relevant meta data and alt tags should be implemented.

In order to ensure that your site loads quickly

  • File sizes should be minimised
  • Images should be compressed and/or combined in CSS sprites
  • JavaScript and CSS resources should also be compressed

There are a number of resources available on the web for doing this. JavaScript can be compressed with UglifyJS and Compass can be used to create improved mark-up and sprites.

Your landing pages should always have a clear call-to-action. Forms should be kept simple, with a minimal number of input fields, otherwise mobile users are likely to become frustrated and exit your site.

A similar concept applies to actions. Keep your actions as simple as possible and only require them when absolutely necessary. Mobile navigation should also be very straightforward. Overly complex navigation will tend to increase your bounce rate.

When your site contains buttons, be sure that they can be easily pressed with the user’s thumb, without activating other content that was not desired.

Optimisation is also a consideration when you’re creating a responsive design.

There has been a lot of debate recently on the way that responsive sites are making the web much slower. Some have even gone so far as to say that slower load times will eventually lead to a move away from responsive designs.

Nevertheless, you can use conditional loading methods that will help make your site load faster and won’t download desktop site versions automatically.

Site Content

Since the web is all about content, you need to carefully plan your content modules. The way your content modules behave, must be defined to be sure that they render properly when a user navigates to them and takes action.

Therefore, you must examine, and define the way content will be displayed when switching from a desktop to mobile display and vice versa. You’ll need to determine the manner in which your modules will stack and then reorder themselves.

It’s usually best to have this defined in the early stages of your design. Create a sketch that will show how you envision the display of your content and then figure out how this will be achieved.

You should use wireframes when designing the main pages of your site, but this may not be required for every page in your site. It should be adequate to create a master set for varying screen sizes and orientations.

It’s a good idea to create a prototype of your design and test it thoroughly. Make sure all aspects of your design function as desired.

Keep your users in mind as you are testing to ensure that your navigation is straightforward and that you have a minimal number of navigation layers. Test your design on people who aren’t necessarily very tech savvy, and get their feedback.

Conclusion

In order to provide your clients with a well-rounded service, it has become necessary for designers to consider mobile users in all of their site designs. Like many of life’s endeavours, it’s important to engage in some planning so you have a clear concept of how you’ll proceed.

By planning effectively and being mindful of users, most obstacles you will encounter can be overcome and your testing will identify the remainder. By creating fast loading responsive designs, with engaging content, you’ll be able to achieve your design goals.

Author: Sam Roshan Sam Roshan has been working in the Digital Marketing industry for over 7 years. He has worked for multiple companies ranging from corporates to boutique agencies encompassing his unique skill set to ensure businesses of all sizes can compete and grow their business using Online marketing strategies.

Instant Website Analysis

We offer a FREE 20 page anaylsis of your website. This indicates areas that need improving or changed for a positive user experience and increase traffic volumes.

etraffic TV

<… name="allowfullscreen" value="true">

Join the etraffic community

Connect with us on the following social media platforms.

Writers

• Social Networks •

• Our Locations •

Click To View Our Contact Details

Level 1, 530 Little Collins Street, Melbourne VIC 3000, Australia | 1300 887 151

Level 2, 50 York Street, Sydney 2000 | 1300 788 679

Level 1, The Realm, 18 National Circuit, Barton Canberra ACT 2600 Australia | 1300 765 708

Level 1, 16 McDougall Street, Milton 4064 | 1300 765 709

220 Varsity Parade, Varsity Lakes QLD Australia 4227 | 1300 887 804

Level 1, Paspalis Centrepoint, 48-50 Smith Street, Darwin NT 0800 Australia | 1300 889 815

Level 18, Central Park. 152-158 St Georges Terrace Perth, WA 6000 Australia | 1300 550 753

Level 3, 97 Pirie Street, Adelaide 5000 | 1300 669 895

Level 6 Reserve Bank Building, 111 Macquarie Street, Hobart TAS 7000, Australia | 1300 885 870

We seek to create long-term relationships
Tell us about your business goals and we will contact you