Introduction
Building websites is now harder than ever because we need to build for a variety of screens and devices.
Google reports, “90% of people move between devices to accomplish a goal, from smartphones, PCs, tablets or TV.”
Mobile phones have been the fastest and most widely adopted. This presents the biggest global change and the biggest opportunity.
Overview
Mobile First by Vince Nardone.
In this presentation I will cover...
| The Problems We Face today | |
| Strategic Approaches To Mobile | |
| Mobile Design Best Practice | |
| A Summary Of What I Have Covered |
If you would like more information or help in tackling a mobile problem then please feel free to contact me.
Problems
The shift to mobile web browsing has been predicted for years and will surpass fixed web usage in time.
A lot more devices with different screen sizes, resolutions, interactions and interfaces are visiting websites today.
Device diversity growth shows no sign of slowing or stopping. The future will bring even greater device diversity.
Mobile web adoption has been growing 8 times faster than web adoption grew at its peak in the late 90s and early 00s.
Web adoption saw winners and losers and over time mobile web adoption will too.
Growth isn’t the only problem facing websites, device diversity is also an increasing problem.
Tablets, smart TVs, cars, refrigerators, cameras and video game consoles, the list goes on.
All will connect to the web with their own specific requirements and considerations.
What we are witnessing is a real change and breakthrough in technology and the way we will all use the web.
Considerations
| Screen Sizes | |
| Mobile Web Adoption | |
| Device Diversity |
Websites are becoming increasingly important in how they communicate and contribute to business goals.
With increased importance comes increased complexity.
Approaches
Mobile specific websites can work well but a separate m-dot website is not the best solution. Why?
It affects search engine optimization, slows down website performance with lookups and redirects, results in subdomain spaghetti, complicates social media sharing, affects email accross devices and complicates use.
Website builders must ensure their website provides the same content to all visitors regardless of device.
However, in practice it can be tricky to provide the best user experience depending on the context. So it may be worth testing for each specific website on a use case basis to find the appropriate solution.
To succeed web builders need to respect performance constraints, both in delivering and running content.
HTTP requests, limited power and unreliable bandwidth all have impact on a mobile user experience. Images, scripts / styles should be optimised, content / data reflowed, and UI elements well placed.
Responsive design techniques are better and easier to maintain, but this is just one part of an adaptive approach.
The critical idea is to maintain One Web. That is, to use web standards like HTML, CSS and JavaScript, and to deliver experiences via the same URLs that adapt to the device being used.
Considerations
| Mobile Specific Websites | |
| The User Experience | |
| Performance Constraints | |
| One Web |
If a website is basic, the simple tactics of responsive design provide a good enough solution.
However, as soon as it gets more complex, responsive problems arise.
The bigger picture beyond mobile is a fully fledged adaptive website solution.
Practices
A list of mobile web design best practices...
Progressive Disclosure
Think Outside The Screen
Long Pages Beat Clicks
Use Anchors In Content
Visual Hierachy For Context
Use Accordians
Use Carousels
Have A Full Site Option
Keep Headings Short
Use Placeholder Text On Inputs
Use Label Text On Larger Inputs
Place Labels Above Inputs
Use Select Boxes
Do Not Reinvent The Wheel
Popups Suck On Mobile
Do Not Overuse Modals
Use Visual Cues And Icons
Take Care With Images
Text Should Be Text
Content Is King
Use Images Sparingly
Font Based Icons
Make It Smart But Smaller
Think Mobile First
Avoid Hide And Seek
Use Webfonts
Use Asset Management
Choose The Right Elements
Assume Fat Fingers
Show Users How It Works
Break the Rules
Use Familiar Design Patterns
Choose A Good Font Size
Feedback Is Awesome
Use Pixel Sizes For Fonts
Know The Usable Screen Size
Hide the Address Bar
Use Autocomplete
Use Popular Search Terms
Make Search Inputs Bigger
Make Buttons Bigger
Embrace Device APIs
Use Related Searches
Show Advanced Search Options
Make Passwords Easier
Less Is More
Make Sharing A Call To Action
Simple Login
Make Marketing Mobile Friendly
Speed Is What You Need
Considerations
| Image Optimization | |
| Resource Optimization | |
| Content Reflowing | |
| User Interface (UI) Elements | |
| Tables Of Data |
When building mobile websites all of these things should be considered, but you must bear in mind that it may not be possible to provide exactly the same experience as the desktop version.
Summary
So there you have it. The mobile issue is not going to go away. As more users take to using these different devices they will have high expectations, especially if they are interacting with a trusted brand.
So careful consideration should be made when building mobile websites and as adoption and device diversity continues to grow, companies will have to get on board or get left behind.
However, It does present some big challenges, but it also signifies an exciting time in this technological revolution.
Considerations
| User Expectations | |
| Careful Consideration | |
| Adoption And Diversity Will Grow | |
| Do Not Get Left behind | |
| Big Challenges | |
| Exciting Times | |
| Technological Revolution |
Remember to Keep It Simple and Think...Mobile First!