Modern Digital Design: The power of Responsive Design
-
Upload
valtech-uk -
Category
Technology
-
view
550 -
download
2
description
Transcript of Modern Digital Design: The power of Responsive Design
![Page 1: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/1.jpg)
Modern digital design #1The power of Responsive Design
Lydia LivingstonDanny Fontaine12/03/12
![Page 2: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/2.jpg)
1. Introduction
2. History of Responsive Design
4. Why is it so good?
3. What is it?
5. Things you might consider
6. Further reading
7. Conclusion
![Page 3: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/3.jpg)
1. Introduction
![Page 4: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/4.jpg)
Lydia Livingston
Hello!
• Art Director
• Experienced creative lead
• Likes to draw stuff
• Designs user centric solutions
• Prefers her Samsung Galaxy S3 to her iPhone 5
• Comes from a traditional design background
![Page 5: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/5.jpg)
Danny Fontaine
Hello!
• Senior UX Consultant
• Designer
• Responsive maestro
• Finds code sexy
• Mr Apple
![Page 6: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/6.jpg)
About Valtech
We are global and always on.
![Page 7: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/7.jpg)
About Valtech
![Page 8: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/8.jpg)
About Valtech
• Unlike traditional digital agencies we have• hard-core software engineering expertise
• Unlike traditional software engineering • businesses we combine creative skills
• Unlike software engineering companies and • digital agencies we work with business analysts • and concept developers
We are hybrids.
![Page 9: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/9.jpg)
Valtech and Responsive Design
• Now our standard practice
• Recommended to all our clients
![Page 10: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/10.jpg)
Valtech and Responsive Design
“Day by day, the number of devices, platforms and browsers that need to work with your site grows.
Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”
Jeffrey VeenCEO and co-founder of (Adobe) Typekit
![Page 11: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/11.jpg)
2. History of Responsive Design
![Page 12: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/12.jpg)
History of Responsive Design
• In the 90’s and early 00’s design was simple
• Desktop PC’s, 800x600 – 1024x768 resolution
• Designers often had a print background
• We knew exactly what we were designing for!
![Page 13: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/13.jpg)
History of Responsive Design
• In 2007 Apple launched the iPhone
• In 2010 298 million smartphones were sold worldwide
• Smartphones then (2010) constituted 22% – and was rapidly growing
• Consumers were accessing the internet in ever increasing numbers but were disappointed with the experience
![Page 14: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/14.jpg)
A brief history
• Suddenly there was another way to access the internet
• The tablet market exploded
And then in apple launched the iPad!
• Apps are great! But people still wanted to browse main site
• We still had not learned to design sites for these new screens
![Page 15: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/15.jpg)
A brief history
• Fluid design
![Page 16: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/16.jpg)
A brief history
• Then in May 2010 Ethan Marcotte laid out the solution • for designers in his blog ‘A List Apart’
• For a while there was no clear direction
So, how could we solve the problem of designing for all these devices?
• He coined the phrase ‘Responsive Design’ and the • movement was born!
![Page 17: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/17.jpg)
3. What is it?
![Page 18: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/18.jpg)
In a nutshell...
Responsive design is an approach that uses flexible layouts and
media queries to detect a visitor’s screen size and orientation so it
can respond and change the website layout accordingly.
www.riksbank.se
![Page 19: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/19.jpg)
A technical explanation...
A site responsive site uses CSS3 media queries to adapt the
layout to the viewing environment – along with fluid
proportion-based grids and flexible images.
• Media queries
• The fluid grid concept
• Flexible images
Truly responsive Web design requires all three features to be implemented.
![Page 20: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/20.jpg)
A technical explanation...
• Responsive in Action
![Page 21: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/21.jpg)
A technical explanation...
• Key concept – User Experience
![Page 22: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/22.jpg)
A technical explanation...
• Mobile First
![Page 23: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/23.jpg)
A technical explanation...
Mobile is exploding• Heavy mobile data users are projected to triple to one billion by 2013
• Smartphone sales will surpass worldwide PC sales by the end of 2011
• Over half of Android and iPhone users spend more than 30 minutes per day using mobile applications
![Page 24: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/24.jpg)
A technical explanation...
• Native Vs website
![Page 25: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/25.jpg)
Some brands that already do it
• Microsoft
• Disney
• Burton
• Currys
• Grey Goose
![Page 26: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/26.jpg)
An example of a brand not doing it
![Page 27: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/27.jpg)
Tools and methodology (tech time)
• Rapid Prototyping & frameworks
![Page 28: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/28.jpg)
4. Why is it so good?
![Page 29: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/29.jpg)
Why is it so good?
• No need to make multiple sites – ‘one size fits all’
• Update once
• Makes you create more lightweight, faster sites
• SEO benefits – inbound links concentrated into one site and domain
• Content prioritisation
• Provides the best site experience for you AND your customer
• Less systems
![Page 30: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/30.jpg)
One size fits all
![Page 31: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/31.jpg)
Why it’s important
• UK smartphone ownership to hit 55% in 2015 (New Media Trendwatch)
• Only 40% of the top 100 UK advertisers currently have ‘mobile-optimised’ sites (Guy Phillipson, CEO of the IAB UK.)
• UK smartphone penetration will overtake the US in 2016 (eMarketer)
• Top 6 mobile searches conducted by UK smartphone users, October 2012 (% of respondents)
1. News – 54% 2. High street retailers – 30% 3. Movies – 28% 4. Music – 27% 5. Local travel updates – 24% 6. Finance and insurance – 15%
• Dominos made £10m via mobile last year (2012) (Econsultancy)
![Page 32: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/32.jpg)
Why it’s important
• 8% of the UK population now owns a tablet, which equates to roughly 3m users, according to stats from YouGov (July 2012)
• Almost 70% of tablet owners make a purchase on their device every month (according to a study by InMobi and Mobext 2012)
• 44% of people would not want to be separated from their tablet
• ‘Mobile and tablet devices are more sociable• and more often accessed outside of the work • environment, making them absolutely• crucial in the B2C market’ (Econsultancy)
• Majority or people access sites on their tablet while at home
![Page 33: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/33.jpg)
5. Things you might consider
![Page 34: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/34.jpg)
Things you might consider
The future?
Ad is cut off
• Advertising
![Page 35: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/35.jpg)
Things you might consider
• Web browsers
• Time and money
![Page 36: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/36.jpg)
6. Further reading
![Page 37: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/37.jpg)
Further reading
• Ethan Marcott – alistapart.com
• Mark Boulton – www.markboulton.co.uk
• www.responsiveads.com
• www.newmediatrendwatch.com
• www.emarketer.com
• jetstrap.com
• mattkersley.com/responsive
• How they designed Boston Globe
![Page 38: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/38.jpg)
7. Conclusion
![Page 39: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/39.jpg)
Conclusion
• The future is here
• It’s more, but is it?
• You need it
![Page 40: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/40.jpg)
Conclusion
2013 is the year of Responsive Web Design!Mashable.com
![Page 41: Modern Digital Design: The power of Responsive Design](https://reader034.fdocuments.us/reader034/viewer/2022051818/54c17b584a7959a6318b45ec/html5/thumbnails/41.jpg)
Thank you