1. Responsive Web Design
Paweł Skowronek
0807883/2

2. Last Time
1. What is Responsive Web Design?
2. Mobile vs. Desktop
3. What makes a website responsive?
4. Why websites should be responsive?

3. Today
1. Is the User Interface responsive?
2. Usability Specification
3. Persona
4. User eXperience Requirements
5. User eXperience Evaluation

5. (Wordpress, 2011)

6. (Wordpress, 2011)

7. (Wordpress, 2011)

8. (Wordpress, 2011)

9. (Wordpress, 2011)

10. (Wordpress, 2011)

11. Header
Nav
Content Side
Footer

12. 1. Is the User Interface responsive?
2. Usability Specification
3. Persona
4. User eXperience Requirements
5. User eXperience Evaluation

13. max-width:1000px
Header
Nav
Content
Side
Footer

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. 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. 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)

17. max-width:800px
Header
Nav
@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. max-width:800px
Header
Nav
@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)

19. 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)

20. 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)

21. Is the User Interface responsive?
1. Media Queries
2. Flexible/Fluid grid
3. Responsive Images

22. Is the User Interface responsive?
1. Media Queries ✓
2. Flexible/Fluid grid
3. Responsive Images

23. Is the User Interface responsive?
1. Media Queries ✓
2. Flexible/Fluid grid ✓
3. Responsive Images

24. Is the User Interface responsive?
1. Media Queries ✓
2. Flexible/Fluid grid ✓
3. Responsive Images ✓

25. 1. Is the User Interface responsive?
2. Usability Specification
3. Persona
4. User eXperience Requirements
5. User eXperience Evaluation

26. 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)

27. 1. Is the User Interface responsive?
2. Usability Specification
3. Persona
4. User eXperience Requirements
5. User eXperience Evaluation

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. • 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.

30. 1. Is the User Interface responsive?
2. Usability Specification
3. Persona
4. User eXperience Requirements
5. User eXperience Evaluation

31. User eXperience Requirements
• website accessible on different devices
• easy to follow website’s layout
• readable articles - appropriate font size on
different devices
(GoodPractice, 2010)

32. 1. Is the User Interface responsive?
2. Persona
3. User eXperience Requirements
4. User eXperience Evaluation

33. User eXperience Evaluation
• website accessible on different devices
1.Laptop - max-width: 1000px
2.Tablet - max-wdith: 850px
3.Smartphone - max-width: 650px/450px

34. User eXperience Evaluation
• easy to follow website’s layout
Header Header
Nav Nav
Content
Content Side
Side
Footer
Footer

35. User eXperience Evaluation
• readable articles - appropriate font size on
different devices
1000px, 850px - 15px
650px, 450px - 12px

36. Conclusions
• website accessible on different devices
• easy to follow website’s layout
• readable articles - appropriate font size on
different devices

37. 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]

38. Questions?

39. Responsive Web Design
Thanks.
Paweł Skowronek
pawelskowronek@me.com
pawelskowronek.me
@pawelskowronek