Thursday, December 28, 2017

30 mobile website design tips













Mobile website design experts Anna Dahlström, Dean Evans and Sam Hampton-Smith share their best advice for those involved in pages for mobile devices.


In the last few years mobile design has exploded, but knowing what to do and where to start can be tricky. Mobile website design is not just a question of choosing between a mobile website or an app – there are a range of options in between and aspects to take into account. To help you out, we have gathered together 30 top tips on what to consider when defining your mobile strategy and designing for mobile. 

Note that we are focusing on on mobile website design and, to a lesser extent, app design, but not responsive websites – take a look at our article on how to make an app and our roundup of responsive web design tutorials if that's what you're interested in.

01. Think ahead - define your objective now and for the future

Mobile website design tips 1

Devices change, but objectives should stay consistent (image source: http://www.flickr.com/photos/adactio/6153481666)
We're in a time when technological advances happen quickly in mobile website design, and new players are constantly being introduced. Consider how the first iPad came in the summer of 2010 and the Apple Watch in 2015; it's safe to assume that even just two years from now things will very different to today.


As much possible we need to build something which can be evolved a year or two from now rather than require a complete redesign. So define your immediate mobile website needs as well as your longer term ones and cosider the pros and cons of the value that doing an app brings vs investing in a site that works across devices.

02. Know your target audience and what they use

Knowing what type of device people are viewing your mobile website on is key for guiding the design process and your mobile website strategy. Though many people have smartphones, don't assume that everyone does, or that they all have an iPhone or Android phone. Instead look into what devices your target audience actually are using with the help of analytics or research.

Other things to consider is how your target audience use their phone and for what as well as if they have a reliable internet connection. The latter is particularly important if, for example, your users will fill in forms on their mobile devices.

03. Understand mobile website usage and behaviour patterns

Mobile website design tips 3

Understand how your audience is interacting with their devices (image source: http://www.flickr.com/photos/jorgeq82/4732700819)
There are a range of misconceptions regarding mobile website usage that can lead to misleading design decisions. One of the most common ones are how mobile users are always rushed and on the go, or that we're only interested in certain things when we use our mobile phones.

In fact a big portion of our mobile website usage happens when we have time to kill or when we're sat at home in the sofa and that impacts how we should approach things.


It's better to base your design decisions on the theory that we're increasingly using our phones for the same tasks as we do on desktop, as this is actually what's already happening. But as much possible do research into the specifics for your target audience to understand what's true for them.

04. Understanding tasks and context

In the early days of mobile usage there was a stronger relationship between tasks and context. Limitations with devices as well as how we experienced the internet on them meant that the tasks we carried out were quite limited. If someone accessed our site on a mobile device we could assume they were on the go and after something specific.

Today mobile devices are used anywhere and everywhere and increasingly for the same tasks as a desktop. Though context is still an important consideration, it's in the form of how our surroundings impact our usage rather than that the context we're in equals a set number of tasks that we want to carry out.

05. Try to avoid bespoke mobile site

So how do you decided what to do with your mobile website? Limitations with current technical solutions like a CMS may make building a bespoke mobile website necessary. But if possible try to avoid building separate mobile sites. In the long run these will be more costly and time consuming to maintain as it means doing bespoke ones for different devices.

Building something which works on as many devices as possible will provide you with the best setup for focusing your resources and budget on the content rather than maintenance.

06. Keep core content the same

Mobile website design tips 6

Content is the core to your mobile offering (image source: http://www.flickr.com/photos/sepblog/3649959481/)
As users increasingly are using their mobile devices for the same tasks as on desktops and due to this expect an equal and continuous journey across devices, there is a strong argument that your mobile website should be a reflection of your desktop version.

People do click the 'desktop version' link, particularly when served with a very limited mobile website, or a site that is substantially different structurally or visually to what they are used to. So try to keep the core content the same and keep in mind how the user will move from one device to another and what that should mean for their experience.

07. Optimise for mobile

Just because you keep the core content the same doesn't mean that you shouldn't or can't optimise your mobile website. On the contrary you should optimise both display of content, interactions where appropriate to make them better for touch and look at using built in device capabilities.

Mobile provides great opportunities for creating even better and more tailored experiences than on desktop and these can still be achieved even if you don't build a bespoke mobile website or app.

08. Look at entry points as a guide for whether to do an app or not

Mobile website design tips 8

Look at entry points for users (image source: http://www.flickr.com/photos/slieschke/2202041617)
Apps are great for more focused and personal experiences and if you're considering supplementing your offering with an app using analytics and looking at entry points can be a first guide. If the majority of your users arrive via direct traffic this could indicate that they bookmark your URL and that an app icon on the home screen would be of value. If most of your traffic comes via shared links an app alone won't cut it as people need to be able to get to your content even if they haven't installed your app.

09. Use analytics to define what devices to focus on

Mobile website design tips 9

Ah, the BlackBerry 9780. Classic
Consulting analytics is also great for defining what devices to focus on in terms of operating system, version, or screen size. For example, in Google analytics you can see a breakdown of the devices that are being used, the divide between different operating systems as well as what versions of each operating system that is being used.

10. Consider the different types of apps

Advertisement

If you have identified that you need an app look into what type of app that is right for you. Native apps like Instagram are built specifically for each operating system. Due to that they often provide the most device optimised experience but it does mean maintaining bespoke code bases.

An alternative is hybrid apps like Facebook that are based around HTML5 and JavaScript, using a wrapper to provide native capabilities. This means fewer versions to maintain but can be timely to get the functionality to be app like. What to choose depends amongst other things on your objectives, budget and how often you need to update your content.

11. Adhere to UI guidelines and patterns

Every operating system has a set of UI and interaction principles that their users are used to. If you create an Android app don't just take your iOS app design and use it as is but optimise and recognise that each operating system is different. Learning what makes them different and adhering to the guiding principles will make your app easier to use.

download uc mini browser app

vidmate download for hd video


No comments:

Post a Comment