Your SlideShare is downloading. ×
0
Modern digital design #1The power of Responsive Design                   Lydia Livingston                   Danny Fontaine...
1. Introduction2. History of Responsive Design3. What is it?4. Why is it so good?5. Things you might consider6. Further re...
1. Introduction
Hello!         Lydia Livingston         • Art Director         • Experienced creative lead         • Likes to draw stuff  ...
Hello!         Danny Fontaine         • Senior UX Consultant         • Designer         • Responsive maestro         • Mr ...
About Valtech          We are global and always on.
About Valtech
About Valtech      • Unlike traditional digital agencies we have      • hard-core software engineering expertise      • Un...
Valtech and Responsive Design      • Now our standard practice      • Recommended to all our clients
Valtech and Responsive Design     “Day by day, the number of devices, platforms and     browsers that need to work with yo...
2. History of Responsive Design
History of Responsive Design      • In the 90’s and early 00’s design was simple      • Desktop PC’s, 800x600 – 1024x768 r...
History of Responsive Design      • In 2007 Apple launched the iPhone      • In 2010 298 million smartphones were sold wor...
A brief history       And then in apple launched the iPad!       • Suddenly there was another way to access the internet  ...
A brief history                  • Fluid design
A brief history       So, how could we solve the problem of       designing for all these devices?       • For a while the...
3. What is it?
In a nutshell...        Responsive design is an approach that uses flexible layouts and        media queries to detect a v...
A technical explanation...       A site responsive site uses CSS3 media queries to adapt the       layout to the viewing e...
A technical explanation...              • Responsive in Action
A technical explanation...        • Key concept – User Experience
A technical explanation...                     • Mobile First
A technical explanation...        Mobile is exploding        • Heavy mobile data users are projected to triple to one     ...
A technical explanation...                   • Native Vs website
Some brands that already do it                                 • Microsoft                                 • Disney       ...
An example of a brand not doing it
Tools and methodology (tech time)    • Rapid Prototyping & frameworks
4. Why is it so good?
Why is it so good?      • No need to make multiple sites – ‘one size fits all’      • Update once      • Makes you create ...
One size fits all
Why it’s important       • UK smartphone ownership to hit 55% in 2015 (New Media Trendwatch)       • Only 40% of the top 1...
Why it’s important       • 8% of the UK population now owns a tablet, which equates         to roughly 3m users, according...
5. Things you might consider
Things you might consider      • Advertising                            Ad is cut off      The future?
Things you might consider      • Web browsers      • Time and money
6. Further reading
Further reading            • Ethan Marcott – alistapart.com            • Mark Boulton – www.markboulton.co.uk            •...
7. Conclusion
Conclusion      • The future is here      • You need it      • It’s more, but is it?
Conclusion    2013 is the year of    Responsive Web Design!    Mashable.com
Thank you
Upcoming SlideShare
Loading in...5
×

Modern Digital Design: The power of Responsive Design

645

Published on

You've probably already heard of the term Responsive Design. Currently it's one of the hot topics being discussed in the digital space and something many businesses are trying to get their heads around.
So what exactly is Responsive Design? And why does it matter?

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
645
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Modern Digital Design: The power of Responsive Design"

  1. 1. Modern digital design #1The power of Responsive Design Lydia Livingston Danny Fontaine 12/03/12
  2. 2. 1. Introduction2. History of Responsive Design3. What is it?4. Why is it so good?5. Things you might consider6. Further reading7. Conclusion
  3. 3. 1. Introduction
  4. 4. Hello! Lydia Livingston • Art Director • Experienced creative lead • Likes to draw stuff • Prefers her Samsung Galaxy S3 to her iPhone 5 • Designs user centric solutions • Comes from a traditional design background
  5. 5. Hello! Danny Fontaine • Senior UX Consultant • Designer • Responsive maestro • Mr Apple • Finds code sexy
  6. 6. About Valtech We are global and always on.
  7. 7. About Valtech
  8. 8. 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.
  9. 9. Valtech and Responsive Design • Now our standard practice • Recommended to all our clients
  10. 10. 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 Veen CEO and co-founder of (Adobe) Typekit
  11. 11. 2. History of Responsive Design
  12. 12. 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!
  13. 13. 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
  14. 14. A brief history And then in apple launched the iPad! • Suddenly there was another way to access the internet • The tablet market exploded • Apps are great! But people still wanted to browse main site • We still had not learned to design sites for these new screens
  15. 15. A brief history • Fluid design
  16. 16. A brief history So, how could we solve the problem of designing for all these devices? • For a while there was no clear direction • Then in May 2010 Ethan Marcotte laid out the solution • for designers in his blog ‘A List Apart’ • He coined the phrase ‘Responsive Design’ and the • movement was born!
  17. 17. 3. What is it?
  18. 18. 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
  19. 19. 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.
  20. 20. A technical explanation... • Responsive in Action
  21. 21. A technical explanation... • Key concept – User Experience
  22. 22. A technical explanation... • Mobile First
  23. 23. 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
  24. 24. A technical explanation... • Native Vs website
  25. 25. Some brands that already do it • Microsoft • Disney • Burton • Currys • Grey Goose
  26. 26. An example of a brand not doing it
  27. 27. Tools and methodology (tech time) • Rapid Prototyping & frameworks
  28. 28. 4. Why is it so good?
  29. 29. 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 • Less systems • Provides the best site experience for you AND your customer
  30. 30. One size fits all
  31. 31. 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)
  32. 32. 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 • Majority or people access sites on their tablet while at home • ‘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)
  33. 33. 5. Things you might consider
  34. 34. Things you might consider • Advertising Ad is cut off The future?
  35. 35. Things you might consider • Web browsers • Time and money
  36. 36. 6. Further reading
  37. 37. 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
  38. 38. 7. Conclusion
  39. 39. Conclusion • The future is here • You need it • It’s more, but is it?
  40. 40. Conclusion 2013 is the year of Responsive Web Design! Mashable.com
  41. 41. Thank you
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×