What is responsive design? Why does it exist? How do we implement it? What challenges lie ahead in the world of responsive design? This presentation was given at WordPress Tel Aviv meetup to discuss these issues.

1. Follow us! facebook.com/illuminea
One URL to Rule Them All:
Responsive Design
April 17, 2013
By: Miriam Schwab
Follow us: facebook.com/illuminea

2. Follow us! facebook.com/illuminea
WHY?

3. Follow us! facebook.com/illuminea
“…the number of smartphones in use
worldwide reached 1.038 billion units
during the third quarter of 2012.”
Source: Strategy Analytics, as quoted here.

4. Follow us! facebook.com/illuminea
"The first billion smartphones in use
worldwide took 16 years to
reach, but we forecast the next
billion to be achieved in less than
three years, by 2015.”

5. Follow us! facebook.com/illuminea
Google Chairman Eric
Schmidt, Oct. 2012: Android could
see one billion users within the next
year.
Interview with AllThingsD Kara Swisher

6. Follow us! facebook.com/illuminea

7. Follow us! facebook.com/illuminea
Mobile browsing now accounts for 11% of all browsing.
Source: StatCounter

8. Follow us! facebook.com/illuminea
When Facebook and Google
developers plan new features
and products, they think of
the mobile experience before
the desktop experience.
Source: Bruce Clay, June 2012

9. Follow us! facebook.com/illuminea
Google
Google supports smartphone-optimized sites in three
configurations:
• Sites that use responsive web design, i.e. sites that
serve all devices on the same set of URLs, with
each URL serving the same HTML to all devices
and using just CSS to change how the page is
rendered on the device. This is Google's
recommended configuration.
• Sites that dynamically serve all devices on the
same set of URLs, but each URL serves different
HTML (and CSS) depending on whether the user
agent is a desktop or a mobile device.
• Sites that have separate mobile and desktop URLs.

10. Follow us! facebook.com/illuminea
Why according to Google
• Easier for your users to interact
with, share, and link to your content
• helps Google's algorithms assign the indexing
• No redirection needed to get to device-
optimized view, reduces loading time
properties for the content
• User agent-based redirection is error-prone
• It saves resources for both your site and
Google's crawlers: Googlebot user agents
needs to crawl your pages once, as opposed
to crawling multiple times with different user
agents, to retrieve your content

11. Follow us! facebook.com/illuminea
Why according to me
• Branding
• Easier to manage and maintain
• More links to one URL - vast majority of
mobile URLs do not have inbound links
(Bing blog)

12. Follow us! facebook.com/illuminea
WHAT?

13. Follow us! facebook.com/illuminea
Where it all started

14. Follow us! facebook.com/illuminea
So what is it?

15. Follow us! facebook.com/illuminea

21. Follow us! facebook.com/illuminea
HOW?

22. Follow us! facebook.com/illuminea
Give up
control, be
flexible, but still set
boundaries.

23. Follow us! facebook.com/illuminea
Fragmentation. Sob.

24. Follow us! facebook.com/illuminea
Android's device diversity cut up
into 3,997 little pieces

25. Follow us! facebook.com/illuminea
Wireframe

26. Follow us! facebook.com/illuminea
Minimum 2 Breakpoints
Mobile
@media only screen and (min-device-width :
320px) and (max-device-width : 480px) {
/* Styles */
}
Tablets
@media only screen and (min-device-width :
768px) and (max-device-width : 1024px) {
/* Styles */
}

27. Follow us! facebook.com/illuminea
Mobile Breakpoints
Mobile Portrait
@media only screen and (max-device-width
: 320px) {
/* Styles */
}
Mobile Landscape
@media only screen and (min-device-width :
321px) {
/* Styles */
}

28. Follow us! facebook.com/illuminea
Tablet Breakpoints
Tablet Portrait
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
Tablet Landscape
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation :
landscape) {
/* Styles */
}

29. Follow us! facebook.com/illuminea
Landscape
@media screen and (min-device-width:
480px) and (orientation: landscape) {
body {
font-size: 100%;
}
}

30. Follow us! facebook.com/illuminea
Specific device
@media
only screen and (-webkit-min-device-pixel-
ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{
body {
font-size: 90%;
}
}

31. Follow us! facebook.com/illuminea
Use existing theme

32. Follow us! facebook.com/illuminea
Use existing Framework

33. Follow us! facebook.com/illuminea
CHALLENGES

34. Follow us! facebook.com/illuminea
Page Load
Just 1 second of load time can drop
conversion by 7%. (Source)
• Conditional loading – if certain
conditions met, content
(images, media) is loaded
• Lazy loading - load media after the
initial page load

35. Follow us! facebook.com/illuminea
Images

36. Follow us! facebook.com/illuminea

37. Follow us! facebook.com/illuminea
Old Browsers

38. Follow us! facebook.com/illuminea
TESTING

39. Follow us! facebook.com/illuminea
http://responsive.victorcoulon.fr/

40. http://responsive.is/

41. http://quirktools.com/screenfly/

42. http://responsinator.com/?url=commtouch.com

43. Follow us! facebook.com/illuminea
THANKS!
illuminea
http://illuminea.com ▪ http://wpgarage.com
@miriamschwab ▪ http://facebook.com/miriamschwab
Slides available at http://illum.in/ourpresentations