Responsive Design with WordPress (WCPHX)
•Descargar como PPT, PDF•
1 recomendación•2,524 vistas
I will go over some of the core content from my book, Responsive Design with WordPress, which teaches you how to leverage WordPress to get the most out of responsive design, implement best practices, automate important processes, and make your life easier overall.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Similar a Responsive Design with WordPress (WCPHX)
Similar a Responsive Design with WordPress (WCPHX) (20)
Más de Joe Casabona
Más de Joe Casabona (9)
Último
Último (20)
Responsive Design with WordPress (WCPHX)
- 1. Responsive Design with WordPress Joe Casabona casabona.org @jcasabona
- 2. Who Am I?* *Besides a handsome devil 2
- 3. 3
- 4. Responsive Web Design: The idea that your website will automatically adapt to the device it's being viewed on. 4
- 5. Why? 5
- 6. ❖ EM-Based Breakpoints ❖ Breakpoints based How? on Content ❖ Consider Connection Speeds 6
- 7. RESS ❖ My Plugin: rwdwp.com/22 ❖ Jesse's: rwdwp.com/35 7
- 8. WURFL Database Database ❖ Device Detection ❖ Feature Detection ❖ Open Source ❖ Scientia Mobile 8
- 11. function jlc_is_mobile_device($apikey){ try{ $config = new WurflCloud_Client_Config(); $config->api_key = $apikey; $client = new WurflCloud_Client_Client($config); $client->detectDevice(); return $client>getDeviceCapability('is_wireless_device'); }catch (Exception $e){ return wp_is_mobile(); } } define( 'ISMOBILE', jlc_is_mobile_device()); 11
- 12. if(ISMOBILE){ //display one way }else{ //not mobile device //display different way } 12
- 13. Always ask what’s best for the users! 13
- 14. ❖ Sketch Responsive ❖ Test Workflow ❖ Repeat ❖ Code 14
- 15. Mobile First! 15
- 16. I use the web completely differently on mobile devices. - No One 16
- 18. The next era in designing for the web is a more advanced, mature and intelligent one. It’s about streamlining, semantics, great markup, responsive or fluid design, great typography, web fonts, content first, rapid prototyping and advanced javascript. My argument is that html, CSS and the browser tools we need have all advanced us past the point of needing Photoshop. - Josh Long (rwdwp.com/94 ) 18
- 21. General Notes for Page Weight 21
- 22. Make it Work with WordPress 22
- 23. Navigation ❖ Do Nothing ❖ Select Box ❖ Hide n' Cry ❖ Responsive Nav ❖ Jump to ❖ Off-Canvas 23
- 24. <nav id=”main”> <?php if(!ISMOBILE){ wp_nav_menu( array('menu' => ‘Main', 'container_id' => 'top-menu')); }else{ echo '<a href=”#footernav”>Jump to Nav</a>'; } ?> </nav> 24
- 25. <?php if(ISMOBILE){ ?> <nav id=“footer-nav”> <?php wp_nav_menu( array('menu' => ‘Main’)); ?> </nav> <?php } ?> 25
- 26. Comments! ❖ Incremental Loading ❖ Pagination ❖ Separate Page 26
- 29. <span data-picture data-alt="A photo of a thing"> <span data-src="small.jpg"></span> <span data-src="medium.jpg" datamedia="(min-width: 400px)"></span> <span data-src="large.jpg" datamedia="(min-width: 800px)"></span> <span data-src="extralarge.jpg" datamedia="(min-width: 1000px)"></span> <noscript> <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </noscript> </span> 29
- 32. @media(-webkit-min-device-pixel-ratio: 2),(minresolution: 192dpi) { /* Retina-specific stuff here */ } <span data-src="retina.jpg" data-media="(-webkitmin-device-pixel-ratio: 2) and (min-resolution: 192dpi)"></span> 32 rwdwp.com/95
- 33. Testing 33
- 34. ❖ iPhone 4, 5 ❖ iPad 2 or new iPad ❖ Android 4.0+ Phones: Galaxy Nexus, Galaxy Note II, S3 or S4, Droid Incredible (one of them), Droid DNA or Razor Maxx Devices ❖ Android pre-4.0 Phones: Moto DroidX, Evo4G ❖ Android Tablets: Nexus 7, 10, Samsung Galaxy Note 10, Galaxy Tab 8.9, Kindle Fire, Moto XOOM ❖ At least one Blackberry (Q10, Z10) ❖ At least one Windows Phone (Lumia or HTC 8x) 34
- 35. ❖ Broadband (wired or wifi connection) Connectivity ❖ 4G (on multiple carriers if possible) ❖ 3G (on multiple carriers if possible) ❖ 4G and 3G while traveling 35
- 36. ❖ The device’s native browser (Safari, Browser, etc) Browsers! ❖ Chrome on Android and iOS ❖ Mobile Opera ❖ Dolphin ❖ Mobile Firefox 36
- 37. Slides will be at casabona.org/events Questions? Discount Code: RWDWP with you order from peachpit.com 37
Notas del editor
- Web Developer, Writer Started Freelancing at 15 HS, College, Grad School 2 years full time, PT Fac tell mt carmel story. Tell them to interrupt me and not to make users feel dumb
- Out Dec. 16. Presentation will be a teaser for the book.
- casabona.org: Visit it on Desktop & Smartphone, and the same site will display 2 different ways. ***Just as much about big screens as small screens***
- * Look at all of those devices (photo from bradfrostweb.com) * Projected by 2015, 50% of American Adults will using mobile as main source for Internet. It already is that in other place, like parts of Africa and India. * Mobile e-commerce traffic was over 50% and mobile was responsible for over 25% of purchases made on Thanksgiving in 2013. * Recently the Galaxy Gear was hacked to include a browser. BUT - RWD is more than Screen Resizing!
- We want GOOD RWD. That means EM breakpoints. these adapt to the user’s settings, not just set pixel widths No arbitrary breakpoints based on device. then all you have is a website that looks good on 3 devices. 75% of users abandon a website after 5 seconds. And not everyone has fast internet! (I know; I was just in the Philly airport)
- * REsponsive Design + Server Side Programming. * Basically, do device detection on the sever end and display template files/section of code based on the results. * One note: You cannot test RESS driven elements by only resizing your browser. You will have to use a real device. * 2 plugins that can help: Mine & Jesse Friedman's
- “Wireless Universal Resource FiLe” This API give you access to a full list of devices and features you can get by using built-in functions ex: screenwidth, wireless, There are open source, free, downloadable- but you need to update manually and they lag 2-3 months behind.
- Monthly Subscription There is a free version with limited capabilities This is automatically updated for you.
- built-in to WordPress Does user agent testing. I built a function that makes them work together.
- Sidebar: Do error checking/catching.
- **NOT different content…different layouts. Perfect example usage: navigation…will look at later In WP, we can even enqueue different scripts based on device. It’s important to remember NOT to change the content though!
- Also, know your users! - From what class/type of devices do my users access the site? - Are my users there to see what’s on the home page, or do they usually go to a different page? - What information do I want to present as most important?- How tech-savvy are my users?
- How do I do RWD? I’m not much of a photoshop guy, so I never really designed in photoshop. My tools: Paper, pencil, Code and the browser.
- The mobile design bible, written by Luke Wroblewski Start with the smallest screen! This will allow you to determine what the most important content. Helps you avoid things like too many nav items, hiding content, and overloading the user Lots of stats and UX info (one thumb, one eyeball)
- Don’t hide or change content for mobile devices.
- You can’t capture the essence of a responsive site with photoshop. How do you choose what resolutions to mock up? Designing in the browser let’s you rapidly prototype, and see what you need to do in real time.
- This is how you determine breakpoints Move your browser out until the content looks bad. When it does, that’s a breakpoint. Start with lowest common denominator. What about determining the site’s style?
- talk about when to include JS (do I really need this?) Tools like image-optim for shrinking images tools like picturefill.js (we will look at)
- Whole point of my book! Too much to cover all of the points, but I will mention some of the more fun stuff, and even include some never release code from the book!
- * HnC is bad. Don't use that one. * With Jump to & Select Box I make use of RESS as to not load 2 different navs. *
- * Jump to technique with RESS * Why? Now we don’t have to show/hide elements with CSS, meaning that users will see all of the markup added. * Could do the same thing for Select box, but select will require custom walker (covered in my book!).
- *Note about adding smooth scrolling with jQuery
- Remember to style things nicely- especially the form! Make it easy for users to input date. As far as rendering… I propose 3 possible methods: -Incremental Loading (load only a few- requires JS) -Pagination (may require extra loading; must load page each time) -Separate page (I like this one)
- Really tricky * WordPress creates multiple versions of image when uploaded. * You can even create more using add_image_size() * There are libraries that will display images based on width- like picturefill.js
- One proposed method for responsive images is a <picture> element where you can select images to display based on screen width. This is a long way away, so Filament Group made this!
- * We can use this technique with the multiple WordPress uploads. * There is a lot that goes into this portion so I won’t go over it here, but it’s explained thoroughly in the book * One Note- during research, I found that doing this for every image on the site on the fly…not very efficient (crazy, right)? At the moment, there is not a great way to do this- hopefully in the future. * To combat this, you could use a short code, however, this would render the media uploader/inserter useless.
- * At the very least, using jQuery, we can remove the width and height that the WordPress editor adds in.
- This is a problem still being solved. Aside from sizes there is retina issues, loading issues, and much more. It will likely continue until there is some sort of browser support.
- * Multiple Devices * Multiple Connections * Browsers on devices
- You MUST test on devices!! Don’t just rely on your computer’s browser That’s a lot of devices! Use discretion of course; what are your users using? Look for open devices labs, buy cheap devices, ask friends There are tools like browserstack to help as well (also, Edge Inspect)
- Not everyone will have super fast Internet connections. Some people might even have…edge. (net neutrality joke)
- Not to mention desktop browsers…FF, Chrome, Safari, Opera, and (dun dun dun) IE. IE: at least 9, 8 if your users need it. Remember: 9 doesn’t support media queries.