SlideShare ist ein Scribd-Unternehmen logo
1 von 50
Responsive Design
    for WordPress
    WordCamp Montréal 2012

    August 19, 2012


Sunday, 19 August, 12
Shannon Smith
    Web Developer
    Café Noir Design



    www.cafenoirdesign.com
    @cafenoirdesign




Sunday, 19 August, 12
Why Design for Mobile?




Sunday, 19 August, 12
Cell Phone Use




Sunday, 19 August, 12
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)


Sunday, 19 August, 12
Share of Canadian Non-Computer
    Device Traffic - May 2011

                                                               iPad
                                       iPod Touch              Android Tablet
                                          15%                  Other tablet
                                                        iPad
                                                        34%    iPhone
                                                               Android Phone
                            Android Phone
                                 8%                            Other Smart Phone
                                                               Feature Phone
                                                               iPod Touch
                                               iPhone          Other
                                                 35%




  Source: comScore Device Essentials
  http://bit.ly/mJVyy5

Sunday, 19 August, 12
Easy Solutions




Sunday, 19 August, 12
Online Services for Any Site


    ✤    Via RSS feed: MoFuse
         and Mippin Mobilizer,
         WireNode, Mobify,
         dotMobi

    ✤    Google Mobile
         Optimizer




Sunday, 19 August, 12
Mobile Landing Page




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



Sunday, 19 August, 12
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)

Sunday, 19 August, 12
WPTouch




Sunday, 19 August, 12
Custom Mobile Site




Sunday, 19 August, 12
Planning & Testing




Sunday, 19 August, 12
What are we designing for?


    ✤    OS

    ✤    Browser

    ✤    Screen resolution

    ✤    Screen aspect ratio

    ✤    Special capabilities



Sunday, 19 August, 12
Design for iOS First



    ✤    iPhone (landscape and portrait)

    ✤    iPad (portrait)




Sunday, 19 August, 12
Other OSs?


    ✤    Android: which one?

    ✤    Blackberry: market share?

    ✤    Windows: market share?

    ✤    OS, resolution, screen dimensions




Sunday, 19 August, 12
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/




Sunday, 19 August, 12
Serving with WordPress


    ✤    Theme Switch plugin
         http://digwp.com/2009/12/redirect-
         mobile-users-to-mobile-theme/


    ✤    Built in conditional tags
    <?php if ( $is_iphone ) {?>
         <?php include( TEMPLATEPATH . '/mobile/single.php' ); ?>
    <?php } else { ?>
         // entire contents of your regular single.php template
    <?php } ?>




Sunday, 19 August, 12
What needs to change

    ✤    Dimensions

    ✤    Bandwidth

    ✤    Font-size

    ✤    Features

    ✤    Floated elements

    ✤    Mouseover states

    ✤    Flash

Sunday, 19 August, 12
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


Sunday, 19 August, 12
Responsive Wireframing




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




Sunday, 19 August, 12
Images for Mobile




Sunday, 19 August, 12
Icons

    ✤    iPhone icon (rel="apple-touch-icon")

         114x114 pixels

    ✤    Opera browser icon (rel="icon")

         195x195px

    ✤    Precomposed icons

    ✤    Retina display icons (Append @2x) 144x144px


Sunday, 19 August, 12
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
                        <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />




Sunday, 19 August, 12
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/




Sunday, 19 August, 12
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)

Sunday, 19 August, 12
HTML for Mobile




Sunday, 19 August, 12
Semantic Web




    ✤    Always start with semantic code




Sunday, 19 August, 12
Targeting Viewport Dimensions
    & Orientation



    ✤    Hardboiled CSS3
         Media Queries
         (Andy Clarke)




        http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

Sunday, 19 August, 12
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
           <!--[if IEMobile 7]>

      ✤        <link rel="stylesheet" type="text/css" href="mobile.css" 
           href="mobile.css" media="screen"  />

      ✤    <![endif]-->

Sunday, 19 August, 12
HTML Head



    ✤    Icon links

    ✤    Viewport meta tag or 980
         pixels?




Sunday, 19 August, 12
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/


Sunday, 19 August, 12
CSS for Mobile




Sunday, 19 August, 12
CSS Reset




Sunday, 19 August, 12
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


Sunday, 19 August, 12
Bulletproof font-face syntax




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




Sunday, 19 August, 12
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




Sunday, 19 August, 12
Fluid Grids




    ✤    A Fluid Grid Calculator by CSS Wizardry

    ✤    Fluid grid frameworks (Golden Grid System, Foldy960, etc.)




Sunday, 19 August, 12
Fluid Layout


    ✤    Width 100%

    ✤    Float none

    ✤    Stack elements

    ✤    Remove elements




Sunday, 19 August, 12
Interactive Mobile




Sunday, 19 August, 12
Fluid YouTube Videos




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




Sunday, 19 August, 12
Trouble with Javascripts




    ✤    Fluid width and
         missing tags




Sunday, 19 August, 12
Shims, Fallbacks, and Polyfills



    ✤    What is a polyfill?

    ✤    Overthrow, FitText, Respond,

    ✤    Stop solving problems you don’t yet have
         by Rachel Andrew




Sunday, 19 August, 12
Content for Mobile




Sunday, 19 August, 12
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

Sunday, 19 August, 12
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"


Sunday, 19 August, 12
Alternative Strategies


    ✤    Mobile first

    ✤    Mobile boilerplate (Mobile Boilerplate, 320 and Up, Twitter
         Bootstrap, etc.)

    ✤    Roots Theme

    ✤    Completely fluid design




Sunday, 19 August, 12
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/




Sunday, 19 August, 12
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/


Sunday, 19 August, 12
Shannon Smith
    Web Developer
    Café Noir Design



    www.cafenoirdesign.com
    www.chroni.ca
    @cafenoirdesign


Sunday, 19 August, 12

Weitere ähnliche Inhalte

Andere mochten auch

From Social Networks to Social Medicine: Exploring the role of online interve...
From Social Networks to Social Medicine: Exploring the role of online interve...From Social Networks to Social Medicine: Exploring the role of online interve...
From Social Networks to Social Medicine: Exploring the role of online interve...Gunther Eysenbach
 
Anolis apletophallus und cryptolimifrons köhler&sunyer 2008
Anolis apletophallus und cryptolimifrons köhler&sunyer 2008Anolis apletophallus und cryptolimifrons köhler&sunyer 2008
Anolis apletophallus und cryptolimifrons köhler&sunyer 2008Michael Castillo
 
Aulas informatizadas
Aulas informatizadasAulas informatizadas
Aulas informatizadas@ula-Center
 
Introducing Selise: Developers Paradise.
Introducing Selise: Developers Paradise.Introducing Selise: Developers Paradise.
Introducing Selise: Developers Paradise.Topu Newaj
 
Adult learning (andragogy) at ciip
Adult learning (andragogy) at ciipAdult learning (andragogy) at ciip
Adult learning (andragogy) at ciipShivani Rana
 
Desenvolvendo aplicações web com o framework cakephp
Desenvolvendo aplicações web com o framework cakephpDesenvolvendo aplicações web com o framework cakephp
Desenvolvendo aplicações web com o framework cakephpRodrigo Aramburu
 
Electricidad termosolar
Electricidad termosolarElectricidad termosolar
Electricidad termosolarAgencia IDEA
 
The Lean Startup Approach ... reviewed!
The Lean Startup Approach ... reviewed!The Lean Startup Approach ... reviewed!
The Lean Startup Approach ... reviewed!Christian Kählig
 
Ficha técnica Transfer Factor avanzado de 4Life
Ficha técnica Transfer Factor avanzado de 4LifeFicha técnica Transfer Factor avanzado de 4Life
Ficha técnica Transfer Factor avanzado de 4LifeAndrés Ricardo Ruiz R.
 
Woolvs in the Sitee: Language
Woolvs in the Sitee: LanguageWoolvs in the Sitee: Language
Woolvs in the Sitee: Languagelaurenalyce
 
Paradigmas Tecno economicos y Oleadas de desarrollo
Paradigmas Tecno economicos y Oleadas de desarrolloParadigmas Tecno economicos y Oleadas de desarrollo
Paradigmas Tecno economicos y Oleadas de desarrollosergiomendez25
 

Andere mochten auch (18)

Hotel lopez
Hotel lopezHotel lopez
Hotel lopez
 
From Social Networks to Social Medicine: Exploring the role of online interve...
From Social Networks to Social Medicine: Exploring the role of online interve...From Social Networks to Social Medicine: Exploring the role of online interve...
From Social Networks to Social Medicine: Exploring the role of online interve...
 
Anolis apletophallus und cryptolimifrons köhler&sunyer 2008
Anolis apletophallus und cryptolimifrons köhler&sunyer 2008Anolis apletophallus und cryptolimifrons köhler&sunyer 2008
Anolis apletophallus und cryptolimifrons köhler&sunyer 2008
 
Revista 2014 2015
Revista 2014 2015Revista 2014 2015
Revista 2014 2015
 
Aulas informatizadas
Aulas informatizadasAulas informatizadas
Aulas informatizadas
 
Introducing Selise: Developers Paradise.
Introducing Selise: Developers Paradise.Introducing Selise: Developers Paradise.
Introducing Selise: Developers Paradise.
 
La femme 12
La femme 12La femme 12
La femme 12
 
Analogi
Analogi Analogi
Analogi
 
Adult learning (andragogy) at ciip
Adult learning (andragogy) at ciipAdult learning (andragogy) at ciip
Adult learning (andragogy) at ciip
 
Le mag n°112
Le mag n°112Le mag n°112
Le mag n°112
 
Desenvolvendo aplicações web com o framework cakephp
Desenvolvendo aplicações web com o framework cakephpDesenvolvendo aplicações web com o framework cakephp
Desenvolvendo aplicações web com o framework cakephp
 
Electricidad termosolar
Electricidad termosolarElectricidad termosolar
Electricidad termosolar
 
The Lean Startup Approach ... reviewed!
The Lean Startup Approach ... reviewed!The Lean Startup Approach ... reviewed!
The Lean Startup Approach ... reviewed!
 
El piano
El pianoEl piano
El piano
 
Ficha técnica Transfer Factor avanzado de 4Life
Ficha técnica Transfer Factor avanzado de 4LifeFicha técnica Transfer Factor avanzado de 4Life
Ficha técnica Transfer Factor avanzado de 4Life
 
Woolvs in the Sitee: Language
Woolvs in the Sitee: LanguageWoolvs in the Sitee: Language
Woolvs in the Sitee: Language
 
Africa
AfricaAfrica
Africa
 
Paradigmas Tecno economicos y Oleadas de desarrollo
Paradigmas Tecno economicos y Oleadas de desarrolloParadigmas Tecno economicos y Oleadas de desarrollo
Paradigmas Tecno economicos y Oleadas de desarrollo
 

Kürzlich hochgeladen

08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 

Kürzlich hochgeladen (20)

08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 

Responsive design for WordPress

  • 1. Responsive Design for WordPress WordCamp Montréal 2012 August 19, 2012 Sunday, 19 August, 12
  • 2. Shannon Smith Web Developer Café Noir Design www.cafenoirdesign.com @cafenoirdesign Sunday, 19 August, 12
  • 3. Why Design for Mobile? Sunday, 19 August, 12
  • 4. Cell Phone Use Sunday, 19 August, 12
  • 5. 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) Sunday, 19 August, 12
  • 6. Share of Canadian Non-Computer Device Traffic - May 2011 iPad iPod Touch Android Tablet 15% Other tablet iPad 34% iPhone Android Phone Android Phone 8% Other Smart Phone Feature Phone iPod Touch iPhone Other 35% Source: comScore Device Essentials http://bit.ly/mJVyy5 Sunday, 19 August, 12
  • 8. Online Services for Any Site ✤ Via RSS feed: MoFuse and Mippin Mobilizer, WireNode, Mobify, dotMobi ✤ Google Mobile Optimizer Sunday, 19 August, 12
  • 9. Mobile Landing Page ✤ http://buildinternet.com/2011/01/add-a- mobile-landing-page-to-your-site/ Sunday, 19 August, 12
  • 10. 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) Sunday, 19 August, 12
  • 12. Custom Mobile Site Sunday, 19 August, 12
  • 13. Planning & Testing Sunday, 19 August, 12
  • 14. What are we designing for? ✤ OS ✤ Browser ✤ Screen resolution ✤ Screen aspect ratio ✤ Special capabilities Sunday, 19 August, 12
  • 15. Design for iOS First ✤ iPhone (landscape and portrait) ✤ iPad (portrait) Sunday, 19 August, 12
  • 16. Other OSs? ✤ Android: which one? ✤ Blackberry: market share? ✤ Windows: market share? ✤ OS, resolution, screen dimensions Sunday, 19 August, 12
  • 17. 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/ Sunday, 19 August, 12
  • 18. Serving with WordPress ✤ Theme Switch plugin http://digwp.com/2009/12/redirect- mobile-users-to-mobile-theme/ ✤ Built in conditional tags <?php if ( $is_iphone ) {?>      <?php include( TEMPLATEPATH . '/mobile/single.php' ); ?> <?php } else { ?>      // entire contents of your regular single.php template <?php } ?> Sunday, 19 August, 12
  • 19. What needs to change ✤ Dimensions ✤ Bandwidth ✤ Font-size ✤ Features ✤ Floated elements ✤ Mouseover states ✤ Flash Sunday, 19 August, 12
  • 20. 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 Sunday, 19 August, 12
  • 21. Responsive Wireframing ✤ Style Tiles (http://styletil.es) Sunday, 19 August, 12
  • 22. Images for Mobile Sunday, 19 August, 12
  • 23. Icons ✤ iPhone icon (rel="apple-touch-icon") 114x114 pixels ✤ Opera browser icon (rel="icon") 195x195px ✤ Precomposed icons ✤ Retina display icons (Append @2x) 144x144px Sunday, 19 August, 12
  • 24. <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" /> Sunday, 19 August, 12
  • 25. 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/ Sunday, 19 August, 12
  • 26. 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) Sunday, 19 August, 12
  • 27. HTML for Mobile Sunday, 19 August, 12
  • 28. Semantic Web ✤ Always start with semantic code Sunday, 19 August, 12
  • 29. Targeting Viewport Dimensions & Orientation ✤ Hardboiled CSS3 Media Queries (Andy Clarke) http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries Sunday, 19 August, 12
  • 30. 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 <!--[if IEMobile 7]> ✤     <link rel="stylesheet" type="text/css" href="mobile.css"  href="mobile.css" media="screen"  /> ✤ <![endif]--> Sunday, 19 August, 12
  • 31. HTML Head ✤ Icon links ✤ Viewport meta tag or 980 pixels? Sunday, 19 August, 12
  • 32. 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/ Sunday, 19 August, 12
  • 33. CSS for Mobile Sunday, 19 August, 12
  • 34. CSS Reset Sunday, 19 August, 12
  • 35. 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 Sunday, 19 August, 12
  • 36. Bulletproof font-face syntax http://www.fontspring.com/blog/further-hardening-of-the- bulletproof-syntax by Ethan Dunham Sunday, 19 August, 12
  • 37. 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 Sunday, 19 August, 12
  • 38. Fluid Grids ✤ A Fluid Grid Calculator by CSS Wizardry ✤ Fluid grid frameworks (Golden Grid System, Foldy960, etc.) Sunday, 19 August, 12
  • 39. Fluid Layout ✤ Width 100% ✤ Float none ✤ Stack elements ✤ Remove elements Sunday, 19 August, 12
  • 41. Fluid YouTube Videos ✤ http://css-tricks.com/7066-fluid-width- youtube-videos/ Sunday, 19 August, 12
  • 42. Trouble with Javascripts ✤ Fluid width and missing tags Sunday, 19 August, 12
  • 43. Shims, Fallbacks, and Polyfills ✤ What is a polyfill? ✤ Overthrow, FitText, Respond, ✤ Stop solving problems you don’t yet have by Rachel Andrew Sunday, 19 August, 12
  • 44. Content for Mobile Sunday, 19 August, 12
  • 45. 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 Sunday, 19 August, 12
  • 46. 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" Sunday, 19 August, 12
  • 47. Alternative Strategies ✤ Mobile first ✤ Mobile boilerplate (Mobile Boilerplate, 320 and Up, Twitter Bootstrap, etc.) ✤ Roots Theme ✤ Completely fluid design Sunday, 19 August, 12
  • 48. 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/ Sunday, 19 August, 12
  • 49. 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/ Sunday, 19 August, 12
  • 50. Shannon Smith Web Developer Café Noir Design www.cafenoirdesign.com www.chroni.ca @cafenoirdesign Sunday, 19 August, 12