Before smartphones and tablets came on the scene, we didn’t have to worry too much about people browsing websites on anything other than desktop PCs. We designed and built websites for the standard screen sizes available at the time, and that was that.
In the last few years, smartphones and tablets have boomed. More and more people are choosing to browse the web on smaller devices, and after attending presentations and discussions around the subject at this year’s South By South West (SXSW), it’s clear that now is the perfect time to start talking about mobile web. Recent statistics alone show that mobile browsing takes up 8% of all browsing (compared with only about 4% a year ago) – see w3counter.com for more stats.
So what does this increase in mobile browsing mean for creative agencies? How should we be changing our thinking and workflow to cater for this rise in mobile popularity?
SXSW came to the rescue, with a lot of presentations focusing on exactly these topics. Everything from tech tips and useful resources, to discussions around top-line questions like “how accessible are web apps?” and “when should we start taking mobile web development seriously?”
Is ‘the page’ dead?
A trendy topic at the moment ‘responsive design’. What does this means and does it change the way we think about web design?
Understanding responsive design is really important when starting out on a new mobile web project, and it's easiest to explain by example. Open up the Boston Globe website in a maximised desktop browser and slowly make the window narrower. See what happens?
This is a great example of a “responsive” website – a site that, when viewed at different sizes, changes its content and layout dynamically.
Notice how elements get moved around to fit in nicely and how certain parts get hidden as the window gets smaller, showing only the most important elements. As the screen gets smaller you should reorganise and prioritise content, perhaps even present less on the page, which is exactly what the Boston Globe site does.
Using this website as an example, here are some basic principles of responsive design:
- Use flexible, or fluid, grid designs.
- Use flexible images and media.
- Decide what content takes priority.
- Remember that you don’t need to show everything – focus on what the specific user is likely to be looking for given the device they are browsing on.
Building responsive designs into our workflow
Gone are the days of designing websites 960px wide. Not only do we have much bigger screens, but also much smaller ones too!
For designers this means combining layout and content with well thought out user interface design. This could result in producing 3 or 4 designs for each page rather than a traditional “one size fits all” design.
It is important to have a basic understanding of HTML/CSS and browser support for this to work. Traditional websites are often designed to look beautiful on large screens, but in order to achieve these complex layouts, heavy use of images and/or Javascript may be required. With desktop browsing this is rarely an issue; but with mobile keeping pages simple and lean (in terms of keeping what needs loading to a minimum) is far more important. Therefore, for pages to be responsive, an understanding of what is possible in a browsers on a different devices is extremely important.
What is delivered to the browser requires combining device detection with suitable CSS (via media queries). Depending on the interactions required on the page (touches, swipes, etc) you may need to write a whole bunch of Javascript methods in order to deliver the best experience on the device being used (and all devices appear to be subtly different in their support, which is exciting!).
Finally, test, test and test again! No longer does this mean working through your standard stack of desktop browsers – you need to get your mits on as many devices, old and new, and check it works as expected on them all! Fortunately there are some handy tools for doing this!
CSS3 media queries
You may or may not have used these before, but if you’re familiar with media-dependent stylesheets (have been around since HTML4/CSS2), then this is just an extension of this.
To quote the W3 CSS3 Media Queries specification:
“A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.”
Lets see a few examples from W3 in action:
<link rel="stylesheet" media="screen and (color)" href="example.css">
This is an example of a media query in a link tag. Specifying “screen” should look familiar, but “and (color)” may be new. All it says is this stylesheet should only apply to colour screens.
@import url(example.css) screen and (color);
This is equivalent to the first example, but declared inside a .css file.
@media all and (min-width:500px) { … }
@media all and (orientation:portrait) { … }
@media screen and (device-width:1024px) { … }
The above examples specify rules for a block of styles inside a .css file, including some media-dependencies together with screen attributes such as min-width, orientation and device width.
Beware though, not all desktop browsers support them (can you guess which?). Check out caniuse.com for the full list.
Killer app design with HTML5, CSS3 & Javascript
In the smartphone world, web browsers are modern and capable. This is great news for designers (they can continue making beautiful looking websites), but it’s especially good news for developers! Gone are the days of worrying about supporting old browsers with limited styling capabilities or applying silly hacks and fallbacks throughout our code. We now have the opportunity to embrace the (almost) full power of HTML5, CSS3 and Javascript!
Some things to think about:
- HTML5 brings simpler, more semantic markup.
- Maximise CSS3 for visual design – no more image layouts for shadows, corners, custom fonts or gradients.
- No support for Flash? Not to worry – check out HTML5 video, audio, canvas and animations with CSS3 and Javascript.
- OpenGL/WebGL – do real-time hardware-accelerated 2D and 3D graphics work inside a web browser (beware some browser limitations on some devices though!).
Sounds like a lot of new stuff to learn, but in reality you’ve probably been using a lot of this for many years already without realising it!
There is more really cool new stuff coming through all the time, especially with Javascript. As well as all the trendy libaries out there (some listed below), new APIs are are being developed to create more native mobile experiences – an example being touch interfaces and accessing the device’s camera.
Testing with Adobe Shadow
Our prayers have been answered by Adobe Shadow – a handy app for viewing and testing your websites on multiple mobile devices.
Once Adobe Shadow has been launched and synced with your devices, you use it to display websites on iOS and Android devices, exactly as they would appear to users without having to manually control them on the device itself. It’s all controlled from your PC or Mac, which change magically on the devices for you! No more fiddly typing!
See example screenshots below for Adobe Shadow in action on our website.
What’s really great about Adobe Shadow is inspecting websites like you would on a desktop. Launch the tool from Chrome and you have a full DOM inspector, networking and Javascript console running on your PC Mac (see the screenshot below).
Adobe Shadow is available from Adobe Labs in beta. Grab yourself a copy the app and Google Chrome extension and give it a spin – I guarantee it will shave hours off your testing!
For a more in-depth look at Adobe Shadow head over to Chris' blog post.
Some final food for thought
There is a world of like-minded individuals out there, all in the same boat, so why not share and share alike! We’ve been checking out some Javscript and CSS tools and libraries to help with our web development (and mobile web development). Some are really neat and have great potential for improving development, but some I'm yet to be convinced by. Check out the below list for further reading and post your comments below to let us know how you getting on!
More posts on these will be appearing in Acknowledgement Labs soon!
Comments.