Responsive Design for WordPress

Slide 1

Slide 1 text

August 19, 2012 Responsive Design for WordPress WordCamp Montréal 2012

Slide 2

Slide 2 text

Shannon Smith Web Developer Café Noir Design www.cafenoirdesign.com @cafenoirdesign

Slide 3

Slide 3 text

Why Design for Mobile?

Slide 4

Slide 4 text

Cell Phone Use

Slide 5

Slide 5 text

Mobile Browsing ✤ 8.5% of all Web browsing from mobile devices (Net Application/ Statcounter) ✤ 4.2% of U.S. Web browsing comes on the iPhone, 4.0% on Android devices, and 4.2% on the iPad with BlackBerry next at 0.46%. (As of Jan 2012, Netmarketshare) ✤ 50% smart phone penetration by 2014 (eMarketer) ✤ Mobile retail dollars doubled between April and December 2011 (RichRelevance)

Slide 6

Slide 6 text

iPod Touch 15% Android Phone 8% iPhone 35% iPad 34% iPad Android Tablet Other tablet iPhone Android Phone Other Smart Phone Feature Phone iPod Touch Other Share of Canadian Non-Computer Device Traffic - May 2011 Source: comScore Device Essentials http://bit.ly/mJVyy5

Slide 7

Slide 7 text

Easy Solutions

Slide 8

Slide 8 text

Online Services for Any Site ✤ Via RSS feed: MoFuse and Mippin Mobilizer, WireNode, Mobify, dotMobi ✤ Google Mobile Optimizer

Slide 9

Slide 9 text

Mobile Landing Page ✤ http://buildinternet.com/2011/01/add-a- mobile-landing-page-to-your-site/

Slide 10

Slide 10 text

WordPress Solutions ✤ Mobile-Ready Themes (Mobius, iPhonista) ✤ Mobile Frameworks (Obox, JQTouch) ✤ Free Plugins (MobilePress, WPTouch, WordPress Mobile Edition, WPTap, WordPress Mobile Pack, BuddyPress Mobile) ✤ Premium Plugins (WPTouch Pro) ✤ Plugins for online services ✤ Tools for Admins (WordPress for iPhone, Blackberry, and Android, and WPhone)

Slide 11

Slide 11 text

WPTouch

Slide 12

Slide 12 text

Custom Mobile Site

Slide 13

Slide 13 text

Planning & Testing

Slide 14

Slide 14 text

What are we designing for? ✤ OS ✤ Browser ✤ Screen resolution ✤ Screen aspect ratio ✤ Special capabilities

Slide 15

Slide 15 text

Design for iOS First ✤ iPhone (landscape and portrait) ✤ iPad (portrait)

Slide 16

Slide 16 text

Other OSs? ✤ Android: which one? ✤ Blackberry: market share? ✤ Windows: market share? ✤ OS, resolution, screen dimensions

Slide 17

Slide 17 text

How are we serving this? ✤ Server-side methods & the UA (User Agent) string ✤ Client-side methods & media queries ✤ Measuring screen size with javascript http://css-tricks.com/snippets/javascript/redirect-mobile-devices/ ✤ PHP function to detect mobile user agents & browsers http://detectmobilebrowsers.mobi/

Slide 18

Slide 18 text

Serving with WordPress ✤ Theme Switch plugin http://digwp.com/2009/12/redirect- mobile-users-to-mobile-theme/ ✤ Built in conditional tags // entire contents of your regular single.php template

Slide 19

Slide 19 text

What needs to change ✤ Dimensions ✤ Bandwidth ✤ Font-size ✤ Features ✤ Floated elements ✤ Mouseover states ✤ Flash

Slide 20

Slide 20 text

Tools ✤ Browser testing tools ✤ Emulators iOS SDK, Android SDK, Online Opera Mini Emulator ✤ Screen Capture Tools (iPhone-Simulator Cropper) ✤ Validators (W3C mobileOK Checker) ✤ Screen width bookmarklets (RWD Bookmarklet) ✤ Adobe Shadow

Slide 21

Slide 21 text

Responsive Wireframing ✤ Style Tiles (http://styletil.es)

Slide 22

Slide 22 text

Images for Mobile

Slide 23

Slide 23 text

Icons ✤ iPhone icon (rel="apple-touch-icon") 114x114 pixels ✤ Opera browser icon (rel="icon") 195x195px ✤ Precomposed icons ✤ Retina display icons (Append @2x) 144x144px

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Images ✤ Double image dimensions, then resize ✤ Individual component caching: iOS 3.x will only cache HTML pages under 25k , iOS 4 102.4 kb per item, iOS5 4MB ✤ Total component caching: Older Android and iOS 4 set limit at 2MB, iOS 5 at 100 MB and Android Chrome at 250 MB ✤ gzip has no effect on cache-ability on any device ✤ http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

Slide 26

Slide 26 text

Variable Resolution ✤ Use fewer images ✤ Use CSS for images ✤ Use icon fonts ✤ High-resolution iOS: For every image at a normal resolution (or @1x), have a high-resolution version (@2x) ✤ @media(-webkit-min-device-pixel-ratio: 2) { #element { background-image('image-2x.png'); } } ✤ Use sprites ✤ Use fluid images (width in em)

Slide 27

Slide 27 text

HTML for Mobile

Slide 28

Slide 28 text

Semantic Web ✤ Always start with semantic code

Slide 29

Slide 29 text

Targeting Viewport Dimensions & Orientation ✤ Hardboiled CSS3 Media Queries (Andy Clarke) http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

Slide 30

Slide 30 text

Targeting by Device ✤ iOS retina display @media only screen and (-webkit-min-device-pixel-ratio: 2) ✤ Android high-resolution @media only screen and (-webkit-device-pixel-ratio:1.5) ✤ Windows 7

Slide 31

Slide 31 text

HTML Head ✤ Icon links ✤ Viewport meta tag or 980 pixels?

Slide 32

Slide 32 text

Accessibility ✤ Pinch to zoom: body {-webkit- text-size-adjust:100%;} ✤ Disable user zoom: Accessibility and maximum- scale=1.0 ✤ “auto-zoom when changing orientation” feature ✤ http://mattgemmell.com/2010/12/19/accessibility- for-iphone-and-ipad-apps ✤ http://www.456bereastreet.com/archive/201012/ controlling_text_size_in_safari_for_ios_without_disabli ng_user_zoom/

Slide 33

Slide 33 text

CSS for Mobile

Slide 34

Slide 34 text

CSS Reset

Slide 35

Slide 35 text

Fancy fonts ✤ SVG and fancy fonts http://www.fontsquirrel.com/ ✤ Other font-face generator tools ✤ Licensing ✤ Google font API ✤ MIME type for SVG to "image/ svg+xml" in the server settings

Slide 36

Slide 36 text

Bulletproof font-face syntax http://www.fontspring.com/blog/further-hardening-of-the- bulletproof-syntax by Ethan Dunham

Slide 37

Slide 37 text

CSS3 Kerning Pairs & Ligatures ✤ On desktops: body { text-rendering: optimizeLegibility; } ✤ On mobile: @media and (max-device-width : 480px) { body { text- rendering: optimizeSpeed; } } ✤ Beware of overusing processor cycles

Slide 38

Slide 38 text

Fluid Grids ✤ A Fluid Grid Calculator by CSS Wizardry ✤ Fluid grid frameworks (Golden Grid System, Foldy960, etc.)

Slide 39

Slide 39 text

Fluid Layout ✤ Width 100% ✤ Float none ✤ Stack elements ✤ Remove elements

Slide 40

Slide 40 text

Interactive Mobile

Slide 41

Slide 41 text

Fluid YouTube Videos ✤ http://css-tricks.com/7066-fluid-width- youtube-videos/

Slide 42

Slide 42 text

Trouble with Javascripts ✤ Fluid width and missing tags

Slide 43

Slide 43 text

Shims, Fallbacks, and Polyfills ✤ What is a polyfill? ✤ Overthrow, FitText, Respond, ✤ Stop solving problems you don’t yet have by Rachel Andrew

Slide 44

Slide 44 text

Content for Mobile

Slide 45

Slide 45 text

Hide Content ✤ Why hide content? ✤ What to hide? ✤ “no-mobile” and “mobile- only” tags ✤ “display: none;” is bad for SEO ✤ Another way to hide content ✤ Skip to content links

Slide 46

Slide 46 text

Add Content ✤ Clickable Phone Numbers with class="phone-link" ✤ Special Input Types with HTML5 ✤ type="tel" type="email" type="url" type="number" type="range" type="search" type="date"

Slide 47

Slide 47 text

Alternative Strategies ✤ Mobile first ✤ Mobile boilerplate (Mobile Boilerplate, 320 and Up, Twitter Bootstrap, etc.) ✤ Roots Theme ✤ Completely fluid design

Slide 48

Slide 48 text

Additional Reading ✤ Responsive Web Design by Ethan Marcotte ✤ @RWD ✤ WordPress Mobile Tutorials http://speckyboy.com/2011/03/17/mobile-toollbox-for-wordpress-tutorials-plugins-and-themes/

Slide 49

Slide 49 text

Slides and Download ✤ Slides: https://speakerdeck.com/u/cafenoirdesign ✤ Theme download: http://cafenoirthemes.com ✤ More details: http://chroni.ca/42/the-future-is-mobile-part-i/

Slide 50

Slide 50 text

Shannon Smith Web Developer Café Noir Design www.cafenoirdesign.com www.chroni.ca @cafenoirdesign