SlideShare uma empresa Scribd logo
1 de 42
Baixar para ler offline
Hello                                                     Responsive Web Design




This is a presentation on Responsive
Web Design




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




I am Dan Gavin.
I like design, beer, food, bikes and WordPress.




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




“ We can design for an optimal viewing
     experience, but embed standards-based
     technologies into our designs to make them
     not only more flexible, but more adaptive to
     the media that renders them.
     - Ethan Marcotte




     alistapart.com/articles/responsive-web-design             Buy



@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                              Responsive Web Design




Be responsive.




         Desktop                                          Mobile




Twenty Eleven Theme
twentyelevendemo.wordpress.com


@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                              Responsive Web Design




Be responsive.




         Desktop                                          Mobile




Jason Santa Maria
jasonsantamaria.com


@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                              Responsive Web Design




Be responsive.




         Desktop                                          Mobile




Jason Santa Maria
jasonsantamaria.com


@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                              Responsive Web Design




Be responsive.




         Desktop                                          Mobile




Russ Maschmeyer / Strange Native
strangenative.com


@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




What it takes to be responsive.




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




What it takes to be responsive.




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




What it takes to be responsive.




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




What it takes to be responsive.




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




What it really takes to be responsive.
•   Adaptive Grid System
•   Scalable Images / Video
•   Media Queries
•   Organization
•   Crying




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                                      Responsive Web Design




Adaptive Grid Systems




             960.gs                                       1140 CSS Grid




             Golden Grid System                           12 Column Grid



@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                                                      Responsive Web Design




Flexible Grids




             1140 CSS Grid                                      Less Framework




                                                                                 Content




             Fluid Grids - alistapart.com/articles/fluidgrids



@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




                                                 %
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                                        Responsive Web Design



                                                           940 px




                                                  700 px            220 px




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                                        Responsive Web Design



                                                           940 px


                                                           100%




                                                  700 px            220 px




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                                        Responsive Web Design



                                                           940 px


                                                           100%




                                            74.46808511%


                                               700 / 940




                                                  700 px            220 px




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                                             Responsive Web Design



                                                           940 px


                                                           100%




                                            74.46808511%            23.40425535%

                                               700 / 940              220 / 940




                                                  700 px               220 px




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




What it really takes to be responsive.
•   Adaptive Grid System - ✓
•   Scalable Images / Video
•   Media Queries
•   Organization
•   Crying




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




Flexible Images




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




Flexible Images




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




“ The toughest challenge in implementing
     the responsive bits was fluid media. A lot of
     trial and error went into finding the right
     CSS solution, but what’s cool is we’ve been
     able to apply it to many more themes that
     we maintain on wordpress.com
     - Lance Willett




     simpledream.net/about



@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello




     /* Images */
     .entry-content img,
     .comment-content img,
     .widget img{
            max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
     }
     img[class*=”align”],
     img[class*=”wp-image-”]{
            height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
     }
     img.size-full{
            max-width: 97.5%;
            width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
     }




@iamdangavin | iamdangavin@gmail.com
Hello                                                     Responsive Web Design




Flexible Media (Video)




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




Flexible Media (Video)




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello




     /* Media / Videos */
     object,
     embed,
     iframe{
           max-width: 100%; /* Make sure embeds fit their containers */
     }




@iamdangavin | iamdangavin@gmail.com
Hello




                                                  FitVid.js
                                                  A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

                                                  Supports: YouTube, Vimeo, Blip.tv, Viddler, Kickstarter
                                                  * Add your own video vendors

Fitvid.js




     <script src=”path/to/jquery.min.js”></script>
     <script src=”path/to/jquery.fitvids.js”></script>

     <script>
           jQuery(document).ready(function(){
                 // Target your .container, .wrapper, .post, etc.
     
     
     jQuery(“#thing-with-videos”).fitVids();
           });
     </script>




@iamdangavin | iamdangavin@gmail.com
Hello                                                     Responsive Web Design




What it really takes to be responsive.
•   Adaptive Grid System - ✓
•   Scalable Images / Video - ✓
•   Media Queries
•   Organization
•   Crying




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                      Responsive Web Design




Media Queries
Think of it like conditional comments... But within CSS!




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello




@media
     /* Media = Smallerscreens */
     @media only screen and (max-width: 1023px){
         .your-style-here{ }
     }
     /* Media = iPad / Orientation: Landscape */
     @media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape){
         .your-style-here{ }
     }
     /* Media = iPad / Orientation: Portrait */
     @media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait){
         .your-style-here{ }
     }
     /* Media = Mobile / iPhone Orientation: Landscape */
     @media handheld, only screen and (max-width: 480px) and (orientation: landscape){
         .your-style-here{ }
     }
     /* Media = Mobile / Orientation: Portrait */
     @media handheld, only screen and (max-width: 480px) and (orientation: portrait){
         .your-style-here{ }
     }
     /* Media = Mobile / All others */
     @media handheld, only screen and (max-width: 767px){
         .your-style-here{ }
     }




@iamdangavin | iamdangavin@gmail.com
Hello                                                                          Responsive Web Design




CSS3 Media Queries
css3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2
transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+,

Safari 3+ and Chrome already offer native support.




code.google.com/p/css3-mediaqueries-js/



@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                                                      Responsive Web Design




Resources on Media Queries
•   w3.org/TR/css3-mediaqueries
•   coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-
    version-of-your-website/
•   css-tricks.com/css-media-queries/




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                                              Responsive Web Design




Resources on Media Queries
•   abookapart.com/products/responsive-web-design
•   alistapart.com/articles/responsive-web-design/
•   alistapart.com/articles/fluidgrids/
•   coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




What it really takes to be responsive.
•   Adaptive Grid System - ✓
•   Scalable Images / Video - ✓
•   Media Queries - ✓
•   Organization
•   Crying




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello




Organization
     /* Media = iPhone*/
     <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />

     /* Media = iPad*/
     <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1024px)" href="tablet.css" />

     /* Media = Core*/
     <link rel="stylesheet" type="text/css" media="screen" href="style.css" />




@iamdangavin | iamdangavin@gmail.com
Hello                                                     Responsive Web Design




What it really takes to be responsive.
•   Adaptive Grid System - ✓
•   Scalable Images / Video - ✓
•   Media Queries - ✓
•   Organization - ✓
•   Crying




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




Crying




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




Crying




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




What it really takes to be responsive.
•   Adaptive Grid System - ✓
•   Scalable Images / Video - ✓
•   Media Queries - ✓
•   Organization - ✓
•   Crying - ✓




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                                Responsive Web Design




Responsive WordPress Themes




             Reveal                                       Infinity




             Suco



@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
Hello                                                     Responsive Web Design




Thank you.
Goodbye




@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

Mais conteúdo relacionado

Destaque

Destaque (16)

WCCHS: Responsive Design with WordPress
WCCHS: Responsive Design with WordPressWCCHS: Responsive Design with WordPress
WCCHS: Responsive Design with WordPress
 
Caching 101 - WordCamp OC
Caching 101 - WordCamp OCCaching 101 - WordCamp OC
Caching 101 - WordCamp OC
 
Acessibilidade Web agora é obrigatória. Estamos preparados?
Acessibilidade Web agora é obrigatória. Estamos preparados?Acessibilidade Web agora é obrigatória. Estamos preparados?
Acessibilidade Web agora é obrigatória. Estamos preparados?
 
Less js-&-wp
Less js-&-wpLess js-&-wp
Less js-&-wp
 
BuddyPress @ WordCamp
BuddyPress @ WordCampBuddyPress @ WordCamp
BuddyPress @ WordCamp
 
THE WORDPRESS DASHBOARD DEMYSTIFIED
THE WORDPRESS DASHBOARD DEMYSTIFIEDTHE WORDPRESS DASHBOARD DEMYSTIFIED
THE WORDPRESS DASHBOARD DEMYSTIFIED
 
A Plugin For That presentation
A Plugin For That presentationA Plugin For That presentation
A Plugin For That presentation
 
WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...
WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...
WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...
 
WorryProof WordPress - Backup Strategies for Your Web Site
WorryProof WordPress - Backup Strategies for Your Web SiteWorryProof WordPress - Backup Strategies for Your Web Site
WorryProof WordPress - Backup Strategies for Your Web Site
 
Ecomm wp2014
Ecomm wp2014Ecomm wp2014
Ecomm wp2014
 
Ten Things You Should Know About WordPress
Ten Things You Should Know About WordPressTen Things You Should Know About WordPress
Ten Things You Should Know About WordPress
 
Website Performance, Engagement, and Leads
Website Performance, Engagement, and LeadsWebsite Performance, Engagement, and Leads
Website Performance, Engagement, and Leads
 
WordPress Security & Backups 101
WordPress Security & Backups 101WordPress Security & Backups 101
WordPress Security & Backups 101
 
Adventures in Non-Profit Web Design
Adventures in Non-Profit Web DesignAdventures in Non-Profit Web Design
Adventures in Non-Profit Web Design
 
Zazzy WordPress Navigation WordCamp Milwaukee
Zazzy WordPress Navigation WordCamp MilwaukeeZazzy WordPress Navigation WordCamp Milwaukee
Zazzy WordPress Navigation WordCamp Milwaukee
 
Wcoc preso
Wcoc presoWcoc preso
Wcoc preso
 

Último

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Último (20)

Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
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
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
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...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 

Responsive Web Design & WordPress

  • 1. Hello Responsive Web Design This is a presentation on Responsive Web Design @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 2. Hello Responsive Web Design I am Dan Gavin. I like design, beer, food, bikes and WordPress. @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 3. Hello Responsive Web Design “ We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. - Ethan Marcotte alistapart.com/articles/responsive-web-design Buy @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 4. Hello Responsive Web Design Be responsive. Desktop Mobile Twenty Eleven Theme twentyelevendemo.wordpress.com @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 5. Hello Responsive Web Design Be responsive. Desktop Mobile Jason Santa Maria jasonsantamaria.com @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 6. Hello Responsive Web Design Be responsive. Desktop Mobile Jason Santa Maria jasonsantamaria.com @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 7. Hello Responsive Web Design Be responsive. Desktop Mobile Russ Maschmeyer / Strange Native strangenative.com @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 8. Hello Responsive Web Design What it takes to be responsive. @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 9. Hello Responsive Web Design What it takes to be responsive. @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 10. Hello Responsive Web Design What it takes to be responsive. @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 11. Hello Responsive Web Design What it takes to be responsive. @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 12. Hello Responsive Web Design What it really takes to be responsive. • Adaptive Grid System • Scalable Images / Video • Media Queries • Organization • Crying @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 13. Hello Responsive Web Design Adaptive Grid Systems 960.gs 1140 CSS Grid Golden Grid System 12 Column Grid @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 14. Hello Responsive Web Design Flexible Grids 1140 CSS Grid Less Framework Content Fluid Grids - alistapart.com/articles/fluidgrids @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 15. Hello Responsive Web Design % @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 16. Hello Responsive Web Design 940 px 700 px 220 px @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 17. Hello Responsive Web Design 940 px 100% 700 px 220 px @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 18. Hello Responsive Web Design 940 px 100% 74.46808511% 700 / 940 700 px 220 px @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 19. Hello Responsive Web Design 940 px 100% 74.46808511% 23.40425535% 700 / 940 220 / 940 700 px 220 px @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 20. Hello Responsive Web Design What it really takes to be responsive. • Adaptive Grid System - ✓ • Scalable Images / Video • Media Queries • Organization • Crying @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 21. Hello Responsive Web Design Flexible Images @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 22. Hello Responsive Web Design Flexible Images @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 23. Hello Responsive Web Design “ The toughest challenge in implementing the responsive bits was fluid media. A lot of trial and error went into finding the right CSS solution, but what’s cool is we’ve been able to apply it to many more themes that we maintain on wordpress.com - Lance Willett simpledream.net/about @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 24. Hello /* Images */ .entry-content img, .comment-content img, .widget img{ max-width: 97.5%; /* Fluid images for posts, comments, and widgets */ } img[class*=”align”], img[class*=”wp-image-”]{ height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ } img.size-full{ max-width: 97.5%; width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */ } @iamdangavin | iamdangavin@gmail.com
  • 25. Hello Responsive Web Design Flexible Media (Video) @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 26. Hello Responsive Web Design Flexible Media (Video) @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 27. Hello /* Media / Videos */ object, embed, iframe{ max-width: 100%; /* Make sure embeds fit their containers */ } @iamdangavin | iamdangavin@gmail.com
  • 28. Hello FitVid.js A lightweight, easy-to-use jQuery plugin for fluid width video embeds. Supports: YouTube, Vimeo, Blip.tv, Viddler, Kickstarter * Add your own video vendors Fitvid.js <script src=”path/to/jquery.min.js”></script> <script src=”path/to/jquery.fitvids.js”></script> <script> jQuery(document).ready(function(){ // Target your .container, .wrapper, .post, etc. jQuery(“#thing-with-videos”).fitVids(); }); </script> @iamdangavin | iamdangavin@gmail.com
  • 29. Hello Responsive Web Design What it really takes to be responsive. • Adaptive Grid System - ✓ • Scalable Images / Video - ✓ • Media Queries • Organization • Crying @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 30. Hello Responsive Web Design Media Queries Think of it like conditional comments... But within CSS! @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 31. Hello @media /* Media = Smallerscreens */ @media only screen and (max-width: 1023px){ .your-style-here{ } } /* Media = iPad / Orientation: Landscape */ @media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape){ .your-style-here{ } } /* Media = iPad / Orientation: Portrait */ @media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait){ .your-style-here{ } } /* Media = Mobile / iPhone Orientation: Landscape */ @media handheld, only screen and (max-width: 480px) and (orientation: landscape){ .your-style-here{ } } /* Media = Mobile / Orientation: Portrait */ @media handheld, only screen and (max-width: 480px) and (orientation: portrait){ .your-style-here{ } } /* Media = Mobile / All others */ @media handheld, only screen and (max-width: 767px){ .your-style-here{ } } @iamdangavin | iamdangavin@gmail.com
  • 32. Hello Responsive Web Design CSS3 Media Queries css3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support. code.google.com/p/css3-mediaqueries-js/ @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 33. Hello Responsive Web Design Resources on Media Queries • w3.org/TR/css3-mediaqueries • coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile- version-of-your-website/ • css-tricks.com/css-media-queries/ @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 34. Hello Responsive Web Design Resources on Media Queries • abookapart.com/products/responsive-web-design • alistapart.com/articles/responsive-web-design/ • alistapart.com/articles/fluidgrids/ • coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 35. Hello Responsive Web Design What it really takes to be responsive. • Adaptive Grid System - ✓ • Scalable Images / Video - ✓ • Media Queries - ✓ • Organization • Crying @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 36. Hello Organization /* Media = iPhone*/ <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" /> /* Media = iPad*/ <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1024px)" href="tablet.css" /> /* Media = Core*/ <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> @iamdangavin | iamdangavin@gmail.com
  • 37. Hello Responsive Web Design What it really takes to be responsive. • Adaptive Grid System - ✓ • Scalable Images / Video - ✓ • Media Queries - ✓ • Organization - ✓ • Crying @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 38. Hello Responsive Web Design Crying @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 39. Hello Responsive Web Design Crying @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 40. Hello Responsive Web Design What it really takes to be responsive. • Adaptive Grid System - ✓ • Scalable Images / Video - ✓ • Media Queries - ✓ • Organization - ✓ • Crying - ✓ @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 41. Hello Responsive Web Design Responsive WordPress Themes Reveal Infinity Suco @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
  • 42. Hello Responsive Web Design Thank you. Goodbye @iamdangavin | iamdangavin@gmail.com | www.iamdangav.in

Notas do Editor

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n