Responsive and Mobile Sites

Transcript

1. #AppletonWP RESPONSIVE & MOBILE ...AND HOW TO APPLY EACH TO WORDPRESS By: David Kryzaniak (@dave_kz)
2. HAI! I'M DAVID... Programming Ninja at Blue Door Consulting I haz a inter-blag (http://dave.kz/) Twitters: @dave_kz Graduated from UWGB (2012)
3. ONE PART
4. ONE PART
5. TIME CIRCUITS: ON!
6. THE YEAR WAS 1992... The internets were just starting to emerge. We used "Flyer-Based Design" 'cuz the internet is just like print. Gotta' watch out for that fold... in the screen.
7. WOO GEOC <table>'s, <marquee>'s, and <blink> were all the rage.
8. LIFE WAS GOOD Design for 800x600 monitors. That's like everyone... Most website could induce seizures thanks to <blink>
9. BUT THEN... Monitors are getting bigger. Let's start designing for 1024x768 monitors!
10. BUT THEN... Monitors are getting bigger. Let's start designing for 960px width. That'll cover just about everyone!
11. JUNE 29, 2007 ...A DATE WHICH WILL LIVE IN INFAMY.
12. FFFFFFFFUUUUUUUUUUUUUUUUUUUU...
13. 320X356 IS ALL I GET?! My Favicon is bigger than that!
14. HOUSTON, WE HAVE A PROBLEM... 61% leave a site if it isn't mobile-ready 79% search for another site 50% look outside an established relationship source: Google Blog
15. MOBILE SITES
16. EXAMPLE OF A MOBILE MarcusTheatres.com m.MarcusTheatres.com
17. USER AGENT DETECTION MOZILLA/5.0 (WINDOWS NT 6.1; WOW64) APPLEWEBKIT/537.22 (KHTML, LIKE GECKO) CHROME/25.0.1364.152 SAFARI/537.22 OR $ _ S E R V E R [ ' H T T P _ U S E R _ A G E N T ' ] n a v i g a t o r . u s e r A g e n t
18. IF A USER AGENT STRING CONTAINS "IOS" IT MUST BE AN IPHONE SO REDIRECT THEM TO M.CONTOSO.COM
19. OCTOBER 23, 2012 ...A DATE WHICH WILL LIVE IN INFAMY.
20. AWW, HE'S A CUTE LITTLE GUY!
21. WAIT? WHAT'S THE PROBLEM WITH THAT?
22. OCTOBER 25, 2012 ...A DATE WHICH WILL LIVE IN INFAMY.
23. http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent “It is confirmed that the iPad Mini User Agent is the same as the iPad 2”
24. HMM? WHAT NOW?
25. ENTER: RESPONSIVE DESIGN
26. MEDIA QUERIES WHAT IF WE SET BREAK POINTS IN OUR CODE SO THAT OUR CONTENT FITS ON THE SCREEN BETTER?
27. EXAMPLE OF A MEDIA QUERY Microsoft.com
28. WHAT'S A MEDIA QUERY? SIMPLE "IF/THEN" LOGIC BASED ON CSS ATTRIBUTES
29. PSEUDO CODE: "If the screen size is anything smaller than or equal to 480 pixels wide, apply these styles"
30. MOST IMPORTANT STEP . . . < h e a d > < m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h " / >
31. STYLE.CSS: @ m e d i a o n l y s c r e e n a n d ( m a x - d e v i c e - w i d t h : 4 8 0 p x ) { / * N o r m a l C S S H e r e * / # c o n t e n t { f l o a t : r i g h t ; } }
32. HEADER.PHP: < l i n k h r e f = " c s s / m o b i l e . c s s " r e l = " s t y l e s h e e t " t y p e = " t e x t / c s s " m e d i a = " o n l y s c r e e n a n d ( m a x - w i d t h : 4 8 0 p x ) " / >
33. MEH, MID-SUMMER 2013 ...A DATE WHICH WILL LIVE IN INFAMY.
34. IPHONE 5S
35. WAIT? WHAT'S THE PROBLEM WITH THAT?
36. *NOW WITH RETINA2 AND A NEW GOOFY SCREEN SCREEN SIZE!
37. RESPONSIVE SUB-CATEGORY ADAPTIVE DESIGN
38. FLUID GRIDS
39. GREAT, DAVE... THANKS FOR THE HISTORY LESSON... WHERE'S THE WORDPRESS?!
40. WP MOBILE SITES:
41. WP-TOUCH Most Common Easiest to Install (it's just a plugin)
42. SAD PANDA! YOU ONLY HAVE ONE MOBILE SITE EXAMPLE!
43. IT'S ALL ABOUT THE BENJAMINS UX, BABY. Don't confuse your users User Agents are always changing
44. RESPONSIVE/ADAPTIVE THEMES:
45. BUT FIRST... CHILD THEMES
46. HTTP://CODEX.WORDPRESS.ORG/CHILD_THEMES READ IT!
47. WHAT ARE CHILD THEMES? (SELECTIVELY) OVERLOADING CERTAIN PIECES OF A PARENT THEME.
48. REALLY?! I'M JUST CHANGING A FEW THINGS IN THE HEADER.PHP Anyone remember timthumb.php?
49. I ALREADY HAVE A THEME THAT I LOVE... 1. Child Theme 2. JetPack: CSS Editor
51. STARTER THEMES
52. TWENTY ELEVEN
53. TWENTY TWELVE
54. RESPONSIVE
55. Psh! Pre-made themes. STARTING FROM SCRATCH
56. TWITTER BOOTSTRAP
57. HTML5 BOILERPLATE
58. PROBLEMS & BEST PRACTICES I've got 99 problems, most are caused by IE...
59. PROBLEMS & BEST PRACTICES MEDIA QUERIES DON'T ALWAYS WORK IN IE8 (AND BELOW)
60. PROBLEMS & BEST PRACTICES THERE IS NO :HOVER IF THERE'S NO MOUSE
61. PROBLEMS & BEST PRACTICES WHAT'S THE BEST WAY TO HANDLE NAVIGATION?
62. IF I'M STARTING FROM SCRATCH... Design for Desktop First? ("Graceful Degradation") Design for Mobile First? ("Progressive Enhancement")
63. MOAR INFORMATION! Responsive Web, Ethan Marcotte Mobile First, Luke Wroblewski MediaQueri.es
64. QUESTIONS?