Responsive Web Design       Paweł Skowronek          0807883/2
Last Time1. What is Responsive Web Design?2. Mobile vs. Desktop3. What makes a website responsive?4. Why websites should b...
Today1. Is the User Interface responsive?2. Usability Specification3. Persona4. User eXperience Requirements5. User eXperie...
(Wordpress, 2011)
(Wordpress, 2011)
(Wordpress, 2011)
(Wordpress, 2011)
(Wordpress, 2011)
(Wordpress, 2011)
HeaderNav      Content    Side        Footer
1. Is the User Interface responsive?2. Usability Specification3. Persona4. User eXperience Requirements5. User eXperience E...
max-width:1000px        HeaderNav      Content                         Side         Footer
max-width:1000px                                #page {                                          margin: 0 auto;        He...
max-width:1000px                                #page {                                          margin: 0 auto;        He...
max-width:1000px                                #page {                                          margin: 0 auto;        He...
max-width:800px       HeaderNav                        @media (max-width: 800px) {                           #main #conten...
max-width:800px       HeaderNav                        @media (max-width: 800px) {                           #main #conten...
max-width:650px Header    Nav           @media (max-width: 800px)                              +                  @media (...
max-width:450px Header           @media (max-width: 800px)                            {...}    Nav                        ...
Is the User Interface responsive?        1. Media Queries        2. Flexible/Fluid grid        3. Responsive Images
Is the User Interface responsive?        1. Media Queries         ✓        2. Flexible/Fluid grid        3. Responsive Ima...
Is the User Interface responsive?        1. Media Queries         ✓        2. Flexible/Fluid grid   ✓        3. Responsive...
Is the User Interface responsive?        1. Media Queries         ✓        2. Flexible/Fluid grid   ✓        3. Responsive...
1. Is the User Interface responsive?2. Usability Specification3. Persona4. User eXperience Requirements5. User eXperience E...
Usability Specification•   Efficiency of use    Users find it easy to read an article on various    devices (i.e. Smartphone,...
1. Is the User Interface responsive?2. Usability Specification3. Persona4. User eXperience Requirements5. User eXperience E...
•   Jenny•   22 years old•   Final year Psychology student•   Writing dissertation•   Lives far from university•   Has to ...
•   Jenny•   22 years old•   Final year Psychology student•   Writing dissertation•   Lives far from university•   Has to ...
1. Is the User Interface responsive?2. Usability Specification3. Persona4. User eXperience Requirements5. User eXperience E...
User eXperience Requirements• website accessible on different devices• easy to follow website’s layout• readable articles ...
1. Is the User Interface responsive?2. Persona3. User eXperience Requirements4. User eXperience Evaluation
User eXperience Evaluation• website accessible on different devices       1.Laptop - max-width: 1000px       2.Tablet - ma...
User eXperience Evaluation• easy to follow website’s layout         Header                        Header          Nav     ...
User eXperience Evaluation• readable articles - appropriate font size on  different devices           1000px, 850px - 15px...
Conclusions• website accessible on different devices• easy to follow website’s layout• readable articles - appropriate fon...
References•   Usability First, 2011. Requirements Specification. Usability First, [online].    Available at: <http://www.us...
Questions?
Responsive Web DesignThanks.Paweł Skowronekpawelskowronek@me.compawelskowronek.me@pawelskowronek
eBusiness Engineering Responsive Web Design Part 2
Upcoming SlideShare
Loading in …5
×

eBusiness Engineering Responsive Web Design Part 2

652 views

Published on

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
652
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • eBusiness Engineering Responsive Web Design Part 2

    1. 1. Responsive Web Design Paweł Skowronek 0807883/2
    2. 2. Last Time1. What is Responsive Web Design?2. Mobile vs. Desktop3. What makes a website responsive?4. Why websites should be responsive?
    3. 3. Today1. Is the User Interface responsive?2. Usability Specification3. Persona4. User eXperience Requirements5. User eXperience Evaluation
    4. 4. (Wordpress, 2011)
    5. 5. (Wordpress, 2011)
    6. 6. (Wordpress, 2011)
    7. 7. (Wordpress, 2011)
    8. 8. (Wordpress, 2011)
    9. 9. (Wordpress, 2011)
    10. 10. HeaderNav Content Side Footer
    11. 11. 1. Is the User Interface responsive?2. Usability Specification3. Persona4. User eXperience Requirements5. User eXperience Evaluation
    12. 12. max-width:1000px HeaderNav Content Side Footer
    13. 13. max-width:1000px #page { margin: 0 auto; Header } max-width: 1000px; #branding hgroup { margin: 0 7.6%;Nav } #access div { margin: 0 7.6%; } #primary { float: left; margin: 0 -26.4% 0 0; width: 100%; } Content #content { margin: 0 34% 0 7.6%; width: 58.4%; } Side #secondary { float: right; margin-right: 7.6%; width: 18.8%; } #colophon { clear: both; } Footer (Wordpress, 2011)
    14. 14. max-width:1000px #page { margin: 0 auto; Header } max-width: 1000px; #branding hgroup { margin: 0 7.6%;Nav } #access div { margin: 0 7.6%; } #primary { float: left; margin: 0 -26.4% 0 0; width: 100%; } Content #content { margin: 0 34% 0 7.6%; width: 58.4%; } Side #secondary { float: right; margin-right: 7.6%; width: 18.8%; } #colophon { clear: both; } Footer (Wordpress, 2011)
    15. 15. max-width:1000px #page { margin: 0 auto; Header } max-width: 1000px; #branding hgroup { margin: 0 7.6%;Nav } #access div { margin: 0 7.6%; } #primary { float: left; margin: 0 -26.4% 0 0; width: 100%; } Content #content { margin: 0 34% 0 7.6%; width: 58.4%; } Side #secondary { float: right; margin-right: 7.6%; width: 18.8%; } #colophon { clear: both; } Footer (Wordpress, 2011)
    16. 16. max-width:800px HeaderNav @media (max-width: 800px) { #main #content { margin: 0 7.6%; width: auto; } Content #main #secondary { float: none; margin: 0 7.6%; width: auto; } } Side Footer (Wordpress, 2011)
    17. 17. max-width:800px HeaderNav @media (max-width: 800px) { #main #content { margin: 0 7.6%; width: auto; } Content #main #secondary { float: none; margin: 0 7.6%; width: auto; } } Side Footer (Wordpress, 2011)
    18. 18. max-width:650px Header Nav @media (max-width: 800px) + @media (max-width: 650px) { body { font-size: 13px; Content } #access ul { font-size: 12px; } #site-title { padding: 5.30625em 0 0; } } Side Footer (Wordpress, 2011)
    19. 19. max-width:450px Header @media (max-width: 800px) {...} Nav + @media (max-width: 650px) {...} + @media (max-width: 450px) { Content #content .gallery- columns-2 .gallery-item { width: 45%; padding-right: 4%; } #content .gallery- columns-2 .gallery-item img { width: 100%; Side } height: auto; } Footer (Wordpress, 2011)
    20. 20. Is the User Interface responsive? 1. Media Queries 2. Flexible/Fluid grid 3. Responsive Images
    21. 21. Is the User Interface responsive? 1. Media Queries ✓ 2. Flexible/Fluid grid 3. Responsive Images
    22. 22. Is the User Interface responsive? 1. Media Queries ✓ 2. Flexible/Fluid grid ✓ 3. Responsive Images
    23. 23. Is the User Interface responsive? 1. Media Queries ✓ 2. Flexible/Fluid grid ✓ 3. Responsive Images ✓
    24. 24. 1. Is the User Interface responsive?2. Usability Specification3. Persona4. User eXperience Requirements5. User eXperience Evaluation
    25. 25. Usability Specification• Efficiency of use Users find it easy to read an article on various devices (i.e. Smartphone, Tablet or Laptop)• Intuitiveness Users are able to navigate through the website on different devices• Low perceived workload Users don’t find the interface demanding or frustrating but easy to use (Usability First, 2011)
    26. 26. 1. Is the User Interface responsive?2. Usability Specification3. Persona4. User eXperience Requirements5. User eXperience Evaluation
    27. 27. • Jenny• 22 years old• Final year Psychology student• Writing dissertation• Lives far from university• Has to commute every day• Has access to smartphone, laptop and desktop PC• Focused on her career• IT skills involve report writing and web browsing.
    28. 28. • Jenny• 22 years old• Final year Psychology student• Writing dissertation• Lives far from university• Has to commute every day• Has access to smartphone, laptop and desktop PC• Focused on her career• IT skills involve report writing and web browsing.
    29. 29. 1. Is the User Interface responsive?2. Usability Specification3. Persona4. User eXperience Requirements5. User eXperience Evaluation
    30. 30. User eXperience Requirements• website accessible on different devices• easy to follow website’s layout• readable articles - appropriate font size on different devices (GoodPractice, 2010)
    31. 31. 1. Is the User Interface responsive?2. Persona3. User eXperience Requirements4. User eXperience Evaluation
    32. 32. User eXperience Evaluation• website accessible on different devices 1.Laptop - max-width: 1000px 2.Tablet - max-wdith: 850px 3.Smartphone - max-width: 650px/450px
    33. 33. User eXperience Evaluation• easy to follow website’s layout Header Header Nav Nav Content Content Side Side Footer Footer
    34. 34. User eXperience Evaluation• readable articles - appropriate font size on different devices 1000px, 850px - 15px 650px, 450px - 12px
    35. 35. Conclusions• website accessible on different devices• easy to follow website’s layout• readable articles - appropriate font size on different devices
    36. 36. References• Usability First, 2011. Requirements Specification. Usability First, [online]. Available at: <http://www.usabilityfirst.com/about-usability/requirements- specification/> [Accessed December 2011]• Owen Ferguson, 2010. User Experience: Planning and Requirements. GoofPractice, [online]. Available at: <http://goodpractice.com/blog/user- experience-planning-and-requirements/> [Accessed December 2011]• Wordpress, 2011. The Twenty Eleven Theme. WordPress, [online]. Available at: <http://twentyelevendemo.wordpress.com/> [Accessed December 2011]• Knight, K., 2011. Responsive Web Design:What It Is and How To Use It. Smashing Magazine, [online]. Available at: <http://coding.smashingmagazine.com/ 2011/01/12/guidelines-for-responsive-web-design/> [Accessed December 2011]• Marcotte, E., 2010. Responsive Web Design. A list apart, [online]. Available at: <http://www.alistapart.com/articles/responsive-web-design> [Accessed December 2011]
    37. 37. Questions?
    38. 38. Responsive Web DesignThanks.Paweł Skowronekpawelskowronek@me.compawelskowronek.me@pawelskowronek

    ×