• Save
Responsive Design for WordPress
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Responsive Design for WordPress



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

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.



Total Views
Views on SlideShare
Embed Views



7 Embeds 623

http://www.wptlv.org 220
http://illuminea.com 185
http://wptlv.org 86
http://blog.dsero.com 55
http://wptlv.org.il 43
http://illumineacom.illuminea-dev.com 17
http://www.wptlv.org.il 17



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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 Presentation Transcript

  • 1. Follow us! facebook.com/illumineaOne URL to Rule Them All:Responsive DesignApril 17, 2013By: Miriam SchwabFollow us: facebook.com/illuminea
  • 2. Follow us! facebook.com/illumineaWHY?
  • 3. Follow us! facebook.com/illuminea“…the number of smartphones in useworldwide reached 1.038 billion unitsduring the third quarter of 2012.”Source: Strategy Analytics, as quoted here.
  • 4. Follow us! facebook.com/illuminea"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. Follow us! facebook.com/illumineaGoogle Chairman EricSchmidt, Oct. 2012: Android couldsee one billion users within the nextyear.Interview with AllThingsD Kara Swisher
  • 6. Follow us! facebook.com/illuminea
  • 7. Follow us! facebook.com/illumineaMobile browsing now accounts for 11% of all browsing.Source: StatCounter
  • 8. Follow us! facebook.com/illumineaWhen Facebook and Googledevelopers plan new featuresand products, they think ofthe mobile experience beforethe desktop experience.Source: Bruce Clay, June 2012
  • 9. Follow us! facebook.com/illumineaGoogleGoogle 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. Follow us! facebook.com/illumineaWhy 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. Follow us! facebook.com/illumineaWhy 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. Follow us! facebook.com/illumineaWHAT?
  • 13. Follow us! facebook.com/illumineaWhere it all started
  • 14. Follow us! facebook.com/illumineaSo what is it?
  • 15. Follow us! facebook.com/illuminea
  • 16. Follow us! facebook.com/illumineaHOW?
  • 17. Follow us! facebook.com/illumineaGive upcontrol, beflexible, but still setboundaries.
  • 18. Follow us! facebook.com/illumineaFragmentation. Sob.
  • 19. Follow us! facebook.com/illumineaAndroids device diversity cut upinto 3,997 little pieces
  • 20. Follow us! facebook.com/illumineaWireframe
  • 21. Follow us! facebook.com/illumineaMinimum 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. Follow us! facebook.com/illumineaMobile BreakpointsMobile Portrait@media only screen and (max-device-width: 320px) {/* Styles */}Mobile Landscape@media only screen and (min-device-width :321px) {/* Styles */}
  • 23. Follow us! facebook.com/illumineaTablet 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. Follow us! facebook.com/illumineaLandscape@media screen and (min-device-width:480px) and (orientation: landscape) {body {font-size: 100%;}}
  • 25. Follow us! facebook.com/illumineaSpecific 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. Follow us! facebook.com/illumineaUse existing theme
  • 27. Follow us! facebook.com/illumineaUse existing Framework
  • 28. Follow us! facebook.com/illumineaCHALLENGES
  • 29. Follow us! facebook.com/illumineaPage 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. Follow us! facebook.com/illumineaImages
  • 31. Follow us! facebook.com/illuminea
  • 32. Follow us! facebook.com/illumineaOld Browsers
  • 33. Follow us! facebook.com/illumineaTESTING
  • 34. Follow us! facebook.com/illumineahttp://responsive.victorcoulon.fr/
  • 35. http://responsive.is/
  • 36. http://quirktools.com/screenfly/
  • 37. http://responsinator.com/?url=commtouch.com
  • 38. Follow us! facebook.com/illumineaTHANKS!illumineahttp://illuminea.com ▪ http://wpgarage.com@miriamschwab ▪ http://facebook.com/miriamschwabSlides available at http://illum.in/ourpresentations