Responsive Web Design. Webinar, August 2012

Transcription

1 Responsive Web Design Webinar, August 2012

2 The browser landscape is changing The United Kingdom is the second largest global internet user In a recent study, 11% of UK internet traffic was from mobile devices Mobile internet usage has doubled in the last 12 months Mobile internet users are set to overtake fixed users in 2013 (2.1 billion) More than 50% of usage in emerging markets is from mobile devices Mobile Operating System split (Source: StatCounter) Fixed vs Mobile usage (Source: StatCounter) Fixed Mobile 0 ios Blackberry Android Simbian OS Other 0 Q Q Q Q4 2011

3 What used to happen Create separate mobile websites Build native mobile apps Think with a separate mobile mindset Use the desktop version and zoom! Why this isn t good Wouldn t it be great if there was a simple catchall solution? Expensive design and development costs Mobile sites often contain duplicate content Content has to be managed twice Separate sites cater for lowest common viewport (320x480) Apps are native and expensive to produce Sharing is a fragmented experience

4 What is responsive? Being device agnostic Responding to the device s viewport Being standards compliant Creating a consistent User experience Creating a consistent brand experience Being inexpensive and hassle free! Giving insightful analytics What isn t responsive? Having to manage multiple websites that do the same thing Getting an app for that! Device sniffing Creating a mobile.mydomain.co.uk Walling off parts of your online presence

5 Benefits of going responsive A single source marketing and content One website to rule them all, one CMS to manage them Single codebase, single database, single style guide Easy to roll-out updates Easier to create extensions Everything works from a single URL Content isn t duplicated (bad SEO) Single source of Content (good SEO)

6 More benefits... Uses the latest standards compliant code Future proofed inline with coding practice Built for convenience Easily tailored for low bandwidth mobile use Simple to optimise performance New devices/break-points easily added

7 When you should develop a mobile app Working offline Using the phone s features (eg: GPS, Accelerometer) Easier to monetize Better Push Notification system First class citizen Powerful gaming experience Enhanced brand and performance experience

8 Summary Device agnostic Single design and development process Central marketing and content source One domain name to remember Emphasis on Content Easy to optimise (for low bandwidth) Future proofed and extensible Better inherent SEO Better inherent analytics Cost effective for Client/Customer Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience Ethan Marcotte Author: Responsive Web Design

9 Worth remembering... Bing justifies why NOT creating a mobile version is the future: Don t get bogged down in the details. Slick SEO is all well and good, but the true objective should always remain the same: to keep customer s goals and site speed a priority mobile internet usage has doubled in the last 12 months Implement responsive design not because it is a trend, but because it will: meet your visitor s goals. Our real concern are the hundreds and millions of additional URLs that are created on mobileonly domains, which for most of them will never accrue any value and rarely, if ever, rank in any form of search, yet still consume resources on both your servers and ours. If your mobile website visitors require a unique experience which differs greatly from your desktop website you may need to consider a mobile-specific interface Especially if you rely heavily on mobile users for leads. Re-shuffle not Re-design Any questions?

10 A word about design Single design process can be achieved Remember the 6 breakpoints 320, 480, 600, 768, 1024 & Aim to re-shuffle not re-design Many pages can be designed in the browser Opportunity for a consistent design/brand experience

11 Think about layout Simple grid. Simple layout. Simple design 960px with 4x columns 1-5 column approach Add/remove Content and customise Mobile Users often need different Content Optimise the site s performance Prioritise Content over design

12 Applying styles Keep design modular and fluid Use Vector images whenever you can Use Pattern Overlay for textures/repeats Focus on typography. It flows better than images! Bigger fonts are trendy and easier to read Use plenty of margins and gutters Try and use real Content

13 Think ahead - Retina displays Offers a pixel free richer experience Perfect for HD movies Will become standard eventually 2x the usual resolution 2x the number of PSD templates Set Photoshop Actions to scale 200% Append images

14 Worth remembering... Bing justifies why NOT creating a mobile version is the future: Don t get bogged down in the details. Slick SEO is all well and good, but the true objective should always remain the same: to keep customer s goals and site speed a priority mobile internet usage has doubled in the last 12 months Implement responsive design not because it is a trend, but because it will: meet your visitor s goals. Our real concern are the hundreds and millions of additional URLs that are created on mobileonly domains, which for most of them will never accrue any value and rarely, if ever, rank in any form of search, yet still consume resources on both your servers and ours. If your mobile website visitors require a unique experience which differs greatly from your desktop website you may need to consider a mobile-specific interface Especially if you rely heavily on mobile users for leads. Re-shuffle not Re-design Any questions?