Responsive Design for WordPress


Published on

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.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Design of site should respond to the user’s behavior and environment, based on screen size, platform and orientation.One URL, same HTML
  • Responsive Design for WordPress

    1. 1. Follow us! URL to Rule Them All:Responsive DesignApril 17, 2013By: Miriam SchwabFollow us:
    2. 2. Follow us!
    3. 3. Follow us!“…the number of smartphones in useworldwide reached 1.038 billion unitsduring the third quarter of 2012.”Source: Strategy Analytics, as quoted here.
    4. 4. Follow us!"The first billion smartphones in useworldwide took 16 years toreach, but we forecast the nextbillion to be achieved in less thanthree years, by 2015.”
    5. 5. Follow us! Chairman EricSchmidt, Oct. 2012: Android couldsee one billion users within the nextyear.Interview with AllThingsD Kara Swisher
    6. 6. Follow us!
    7. 7. Follow us! browsing now accounts for 11% of all browsing.Source: StatCounter
    8. 8. Follow us! Facebook and Googledevelopers plan new featuresand products, they think ofthe mobile experience beforethe desktop experience.Source: Bruce Clay, June 2012
    9. 9. Follow us! supports smartphone-optimized sites in threeconfigurations:• Sites that use responsive web design, i.e. sites thatserve all devices on the same set of URLs, witheach URL serving the same HTML to all devicesand using just CSS to change how the page isrendered on the device. This is Googlesrecommended configuration.• Sites that dynamically serve all devices on thesame set of URLs, but each URL serves differentHTML (and CSS) depending on whether the useragent is a desktop or a mobile device.• Sites that have separate mobile and desktop URLs.
    10. 10. Follow us! according to Google• Easier for your users to interactwith, share, and link to your content• helps Googles algorithms assign the indexing• No redirection needed to get to device-optimized view, reduces loading timeproperties for the content• User agent-based redirection is error-prone• It saves resources for both your site andGoogles crawlers: Googlebot user agentsneeds to crawl your pages once, as opposedto crawling multiple times with different useragents, to retrieve your content
    11. 11. Follow us! according to me• Branding• Easier to manage and maintain• More links to one URL - vast majority ofmobile URLs do not have inbound links(Bing blog)
    12. 12. Follow us!
    13. 13. Follow us! it all started
    14. 14. Follow us! what is it?
    15. 15. Follow us!
    16. 16. Follow us!
    17. 17. Follow us! upcontrol, beflexible, but still setboundaries.
    18. 18. Follow us! Sob.
    19. 19. Follow us! device diversity cut upinto 3,997 little pieces
    20. 20. Follow us!
    21. 21. Follow us! 2 BreakpointsMobile@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 */}
    22. 22. Follow us! BreakpointsMobile Portrait@media only screen and (max-device-width: 320px) {/* Styles */}Mobile Landscape@media only screen and (min-device-width :321px) {/* Styles */}
    23. 23. Follow us! BreakpointsTablet 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 */}
    24. 24. Follow us! screen and (min-device-width:480px) and (orientation: landscape) {body {font-size: 100%;}}
    25. 25. Follow us! device@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5){body {font-size: 90%;}}
    26. 26. Follow us! existing theme
    27. 27. Follow us! existing Framework
    28. 28. Follow us!
    29. 29. Follow us! LoadJust 1 second of load time can dropconversion by 7%. (Source)• Conditional loading – if certainconditions met, content(images, media) is loaded• Lazy loading - load media after theinitial page load
    30. 30. Follow us!
    31. 31. Follow us!
    32. 32. Follow us! Browsers
    33. 33. Follow us!
    34. 34. Follow us!
    35. 35.
    36. 36.
    37. 37.
    38. 38. Follow us!!illuminea ▪ ▪ available at