SlideShare a Scribd company logo
1 of 36
Download to read offline
AN OVERVIEW OF



RESPONSIVE WEB DESIGN

       Ivan Frantar - 2012
MEDIA QUERIES

• What is Responsive Design?
• Mobile Influence
• Fluid Design
• Adapting to Context
• Adapting to Typography
• Adaptive Images
• Media Queries
• Tools for browser compatibility
WHAT IS RESPONSIVE WEB DESIGN?



“
Rather than tailoring disconnected designs to each of an ever-increasing
number of web devices, we can treat them as facets of the same
experience. 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.
In short, we need to practice responsive web design.

- Ethan Marcotte



Source: http://www.alistapart.com/articles/responsive-web-design/
WHAT IS RESPONSIVE WEB DESIGN?
• Flexible grid layout
• Flexible Images & Typography
• Media queries
• Adaptive User Experience

BENEFITS

• Can't afford mobile developers
• Optimize User Experience using same content
MOBILE INFLUENCE




Source: http://www.flickr.com/photos/jodyodea/3910686634/
MOBILE INFLUENCE
STATISTICS AS OF END OF 2011

Connect                                                           69%                                 31%   App

Navigate                                                       65%                                    35%   Browser

Inform                                                      61%                                       39%

Manage                                            54%                                                 46%

Entertain                           40%                                                               60%

Search                            37%                                                                 63%

Shop                    27%                                                                           73%
       Source: http://www.mediafly.com/2012/02/mobile-app-usage-vs-browser-usage-on-mobile-devices/
FLUID DESIGN
      #header 100%                         #header 100%




#content 70%         #sidebar    20%   #main-content      20%
                        30%                  60%




      #footer 100%                         #footer 100%




                #wrapper max-width:960px
FLUID DESIGN

• Good for different screen sizes
• Good for accessibility
• Good for keeping the content flexible
BUT WHAT ABOUT ALL THOSE GADGETS PEOPLE ARE CARRING WITH THEM?
ADAPTING TO CONTEXT
Target % Context = Result


                            960px




                698px               218px
ADAPTING TO CONTEXT
Target % Context = Result


                               960px
                                96%




                698px                        218px
              698 % 960                    218 % 960
          Width:72.7083333%;           Width:22.7083333%;
ADAPTING TYPOGRAPHY
USING EM'S
• Size of an em related to the size of its context
• Most browsers use as default 16px font size
• Therefore if we use ems by changing the size of the body tag
  We can change the size of all the types accordingly

body {
  font-size:100%; /* will condition the size across font */   218px
}
ADAPTING TYPOGRAPHY
USING EM'S – example
• Apply same formula: target % context = result

#header {                        #header {
    display: block;                  display: block;
    padding-top: 75px;               padding-top: 75px;
    color: #333;                     color: #333;
    text-transform: uppercase;       text-transform: uppercase;
    font: Arial;                     font: Arial;
    font-size: 48px;                 font-size: 3em; /* 48 % 16 = 3 */
}                                }


                                                    218px
ADAPTING IMAGES

img {
    max-width:100%;
}




• Automatically images will scale 100% of container
• Remove 'height' and 'width' attributes on <img> tag
• Applicable to <embed>, <object>, <video>
                                             218px
ADAPTING IMAGES
PROBLEMS
• File size not suitable from one viewport to another
• Connectivity hungry if large images for wrong device
• No solid solution to retrieve images appropriatly to device

SOLUTIONS (NOT ENTIRELY RELIABLE AT PRESENT TIME)

• Responsive Images:                        218px


  Experimenting with Context-Aware Image Sizing (link)
• Adaptive Images (link)
MEDIA QUERIES
@media screen and (max-width: 1200px) {   @media screen and (max-width: 980px) {
body{                                     body{
    width:1000px;                             width:850px;
    margin:0 auto;                            margin:0 auto;
    }                                         }
#content {                                #content {
    width: 700px;                             width: 550px;
    }                                         }
.sidebar{                                 .sidebar{
    width:280px;                              width:280px;
    }                                         }
}                                         }

@media screen and (max-width: 750px) {    @media screen and (max-width: 380px) {
body{                                         body{
    width:600px;                              width:360px;
                                                            218px
    margin:0 auto;                            margin:0 auto;
    }                                         }
#content {                                #content {
    width: 400px;                             width: 360px;
    }                                         }
.sidebar{                                 .sidebar{
    width:190px;                              width:360px;
    margin: 0 0 20px 10px;                    margin: 0 0 10px 0;
    }                                         }
}                                         }
MEDIA QUERIES
TOOLS & SOURCES
• Modernizr (link)
• Mediaqueri.es (link)
• Respond.js (link)
• Semantic.gs (link)
• Columnal.com (link)
AN OVERVIEW OF



RESPONSIVE WEB DESIGN

       Ivan Frantar - 2012
MEDIA QUERIES

• What is Responsive Design?
• Mobile Influence
• Fluid Design
• Adapting to Context
• Adapting to Typography
• Adaptive Images
• Media Queries
• Tools for browser compatibility
WHAT IS RESPONSIVE WEB DESIGN?



“
Rather than tailoring disconnected designs to each of an ever-increasing
number of web devices, we can treat them as facets of the same
experience. 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.
In short, we need to practice responsive web design.

- Ethan Marcotte



Source: http://www.alistapart.com/articles/responsive-web-design/
WHAT IS RESPONSIVE WEB DESIGN?
• Flexible grid layout
• Flexible Images & Typography
• Media queries
• Adaptive User Experience

BENEFITS

• Can't afford mobile developers
• Optimize User Experience using same content
MOBILE INFLUENCE




Source: http://www.flickr.com/photos/jodyodea/3910686634/
MOBILE INFLUENCE
STATISTICS AS OF END OF 2011

Connect                                                           69%                                 31%   App

Navigate                                                       65%                                    35%   Browser

Inform                                                      61%                                       39%

Manage                                            54%                                                 46%

Entertain                           40%                                                               60%

Search                            37%                                                                 63%

Shop                   27%                                                                            73%
       Source: http://www.mediafly.com/2012/02/mobile-app-usage-vs-browser-usage-on-mobile-devices/
FLUID DESIGN
      #header 100%                         #header 100%




#content 70%         #sidebar    20%   #main-content      20%
                       30%                   60%




      #footer 100%                         #footer 100%




                #wrapper max-width:960px
FLUID DESIGN

• Good for different screen sizes
• Good for accessibility
• Good for keeping the content flexible
BUT WHAT ABOUT ALL THOSE GADGETS PEOPLE ARE CARRING WITH THEM?
ADAPTING TO CONTEXT
Target % Context = Result


                            960px




                698px               218px
ADAPTING TO CONTEXT
Target % Context = Result


                               960px
                                96%




                698px                        218px
              698 % 960                    218 % 960
          Width:72.7083333%;           Width:22.7083333%;
ADAPTING TYPOGRAPHY
USING EM'S
• Size of an em related to the size of its context
• Most browsers use as default 16px font size
• Therefore if we use ems by changing the size of the body tag
  We can change the size of all the types accordingly

body {
  font-size:100%; /* will condition the size across font */   218px
}
ADAPTING TYPOGRAPHY
USING EM'S – example
• Apply same formula: target % context = result

#header {                        #header {
    display: block;                  display: block;
    padding-top: 75px;               padding-top: 75px;
    color: #333;                     color: #333;
    text-transform: uppercase;       text-transform: uppercase;
    font: Arial;                     font: Arial;
    font-size: 48px;                 font-size: 3em; /* 48 % 16 = 3 */
}                                }


                                                    218px
ADAPTING IMAGES

img {
    max-width:100%;
}




• Automatically images will scale 100% of container
• Remove 'height' and 'width' attributes on <img> tag
• Applicable to <embed>, <object>, <video>
                                             218px
ADAPTING IMAGES
PROBLEMS
• File size not suitable from one viewport to another
• Connectivity hungry if large images for wrong device
• No solid solution to retrieve images appropriatly to device

SOLUTIONS (NOT ENTIRELY RELIABLE AT PRESENT TIME)

• Responsive Images:                        218px


  Experimenting with Context-Aware Image Sizing (link)
• Adaptive Images (link)
MEDIA QUERIES
@media screen and (max-width: 1200px) {   @media screen and (max-width: 980px) {
body{                                     body{
    width:1000px;                             width:850px;
    margin:0 auto;                            margin:0 auto;
    }                                         }
#content {                                #content {
    width: 700px;                             width: 550px;
    }                                         }
.sidebar{                                 .sidebar{
    width:280px;                              width:280px;
    }                                         }
}                                         }

@media screen and (max-width: 750px) {    @media screen and (max-width: 380px) {
body{                                         body{
    width:600px;                              width:360px;
                                                            218px
    margin:0 auto;                            margin:0 auto;
    }                                         }
#content {                                #content {
    width: 400px;                             width: 360px;
    }                                         }
.sidebar{                                 .sidebar{
    width:190px;                              width:360px;
    margin: 0 0 20px 10px;                    margin: 0 0 10px 0;
    }                                         }
}                                         }
MEDIA QUERIES
TOOLS & SOURCES
• Modernizr (link)
• Mediaqueri.es (link)
• Respond.js (link)
• Semantic.gs (link)
• Columnal.com (link)

More Related Content

Viewers also liked

East Jordan Iron Works
East Jordan Iron WorksEast Jordan Iron Works
East Jordan Iron Worksguest7c4ecf
 
Html5 & CSS overview
Html5 & CSS overviewHtml5 & CSS overview
Html5 & CSS overviewIvan Frantar
 
Onyx data processing the clojure way
Onyx   data processing  the clojure wayOnyx   data processing  the clojure way
Onyx data processing the clojure wayBahadir Cambel
 
Finishing Charters
Finishing ChartersFinishing Charters
Finishing Chartersnushpe
 
STL SICILIA LEGGE TURISMO
STL SICILIA LEGGE TURISMOSTL SICILIA LEGGE TURISMO
STL SICILIA LEGGE TURISMOAntonio Carlisi
 
Quilts Powerpoint
Quilts  PowerpointQuilts  Powerpoint
Quilts Powerpointguest081d77
 
Knowledge & Revenue management in hotel o altre strutture ricettive di piccol...
Knowledge & Revenue management in hotel o altre strutture ricettive di piccol...Knowledge & Revenue management in hotel o altre strutture ricettive di piccol...
Knowledge & Revenue management in hotel o altre strutture ricettive di piccol...Antonio Carlisi
 
The Branding Lounge: Creating a Visual GuidelineThe branding-lounge-session-2
The Branding Lounge: Creating a Visual GuidelineThe branding-lounge-session-2The Branding Lounge: Creating a Visual GuidelineThe branding-lounge-session-2
The Branding Lounge: Creating a Visual GuidelineThe branding-lounge-session-2Jennifer Dopazo
 

Viewers also liked (10)

East Jordan Iron Works
East Jordan Iron WorksEast Jordan Iron Works
East Jordan Iron Works
 
Html5 & CSS overview
Html5 & CSS overviewHtml5 & CSS overview
Html5 & CSS overview
 
Onyx data processing the clojure way
Onyx   data processing  the clojure wayOnyx   data processing  the clojure way
Onyx data processing the clojure way
 
Finishing Charters
Finishing ChartersFinishing Charters
Finishing Charters
 
STL SICILIA LEGGE TURISMO
STL SICILIA LEGGE TURISMOSTL SICILIA LEGGE TURISMO
STL SICILIA LEGGE TURISMO
 
Quilts Powerpoint
Quilts  PowerpointQuilts  Powerpoint
Quilts Powerpoint
 
Knowledge & Revenue management in hotel o altre strutture ricettive di piccol...
Knowledge & Revenue management in hotel o altre strutture ricettive di piccol...Knowledge & Revenue management in hotel o altre strutture ricettive di piccol...
Knowledge & Revenue management in hotel o altre strutture ricettive di piccol...
 
The Branding Lounge: Creating a Visual GuidelineThe branding-lounge-session-2
The Branding Lounge: Creating a Visual GuidelineThe branding-lounge-session-2The Branding Lounge: Creating a Visual GuidelineThe branding-lounge-session-2
The Branding Lounge: Creating a Visual GuidelineThe branding-lounge-session-2
 
Wifi Security
Wifi SecurityWifi Security
Wifi Security
 
Slackbot_by_OpenWhisk
Slackbot_by_OpenWhiskSlackbot_by_OpenWhisk
Slackbot_by_OpenWhisk
 

Similar to Responsive design

Content strategy for mobile
Content strategy for mobileContent strategy for mobile
Content strategy for mobileKarolina Szczur
 
Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Andreas Bovens
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bendRaj Lal
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web DesignMike Wilcox
 
The Mobile Development Landscape
The Mobile Development LandscapeThe Mobile Development Landscape
The Mobile Development LandscapeAmbert Ho
 
Responsive Web Design in iMIS (NiUG Austin 2015)
Responsive Web Design in iMIS (NiUG Austin 2015)Responsive Web Design in iMIS (NiUG Austin 2015)
Responsive Web Design in iMIS (NiUG Austin 2015)Andrea Robertson
 
High Performance Distribution for Harvard Video, Mobile and the Gazette
High Performance Distribution for Harvard Video, Mobile and the GazetteHigh Performance Distribution for Harvard Video, Mobile and the Gazette
High Performance Distribution for Harvard Video, Mobile and the GazetteChris Traganos
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignZoe Gillenwater
 
Responsive web design
Responsive web designResponsive web design
Responsive web designerikkross
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens
 
Module 08: Responsive Web Design
Module 08: Responsive Web DesignModule 08: Responsive Web Design
Module 08: Responsive Web DesignDaniel Drew Turner
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignSayanee Basu
 
Responsive web design
Responsive web designResponsive web design
Responsive web designBen MacNeill
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignShawn Calvert
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty grittyMario Noble
 
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebResponsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebEduardo Shiota Yasuda
 

Similar to Responsive design (20)

Content strategy for mobile
Content strategy for mobileContent strategy for mobile
Content strategy for mobile
 
RWD myth busting @ Topconf
RWD myth busting @ TopconfRWD myth busting @ Topconf
RWD myth busting @ Topconf
 
Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
The Mobile Development Landscape
The Mobile Development LandscapeThe Mobile Development Landscape
The Mobile Development Landscape
 
Responsive Web Design in iMIS (NiUG Austin 2015)
Responsive Web Design in iMIS (NiUG Austin 2015)Responsive Web Design in iMIS (NiUG Austin 2015)
Responsive Web Design in iMIS (NiUG Austin 2015)
 
High Performance Distribution for Harvard Video, Mobile and the Gazette
High Performance Distribution for Harvard Video, Mobile and the GazetteHigh Performance Distribution for Harvard Video, Mobile and the Gazette
High Performance Distribution for Harvard Video, Mobile and the Gazette
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web Design
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...
 
Module 08: Responsive Web Design
Module 08: Responsive Web DesignModule 08: Responsive Web Design
Module 08: Responsive Web Design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Online Marketing Trends Guide
Online Marketing Trends GuideOnline Marketing Trends Guide
Online Marketing Trends Guide
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
 
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebResponsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
 

Recently uploaded

Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 

Recently uploaded (19)

Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 

Responsive design

  • 1. AN OVERVIEW OF RESPONSIVE WEB DESIGN Ivan Frantar - 2012
  • 2. MEDIA QUERIES • What is Responsive Design? • Mobile Influence • Fluid Design • Adapting to Context • Adapting to Typography • Adaptive Images • Media Queries • Tools for browser compatibility
  • 3. WHAT IS RESPONSIVE WEB DESIGN? “ Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. 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. In short, we need to practice responsive web design. - Ethan Marcotte Source: http://www.alistapart.com/articles/responsive-web-design/
  • 4. WHAT IS RESPONSIVE WEB DESIGN? • Flexible grid layout • Flexible Images & Typography • Media queries • Adaptive User Experience BENEFITS • Can't afford mobile developers • Optimize User Experience using same content
  • 6. MOBILE INFLUENCE STATISTICS AS OF END OF 2011 Connect 69% 31% App Navigate 65% 35% Browser Inform 61% 39% Manage 54% 46% Entertain 40% 60% Search 37% 63% Shop 27% 73% Source: http://www.mediafly.com/2012/02/mobile-app-usage-vs-browser-usage-on-mobile-devices/
  • 7. FLUID DESIGN #header 100% #header 100% #content 70% #sidebar 20% #main-content 20% 30% 60% #footer 100% #footer 100% #wrapper max-width:960px
  • 8. FLUID DESIGN • Good for different screen sizes • Good for accessibility • Good for keeping the content flexible
  • 9. BUT WHAT ABOUT ALL THOSE GADGETS PEOPLE ARE CARRING WITH THEM?
  • 10. ADAPTING TO CONTEXT Target % Context = Result 960px 698px 218px
  • 11. ADAPTING TO CONTEXT Target % Context = Result 960px 96% 698px 218px 698 % 960 218 % 960 Width:72.7083333%; Width:22.7083333%;
  • 12. ADAPTING TYPOGRAPHY USING EM'S • Size of an em related to the size of its context • Most browsers use as default 16px font size • Therefore if we use ems by changing the size of the body tag We can change the size of all the types accordingly body { font-size:100%; /* will condition the size across font */ 218px }
  • 13. ADAPTING TYPOGRAPHY USING EM'S – example • Apply same formula: target % context = result #header { #header { display: block; display: block; padding-top: 75px; padding-top: 75px; color: #333; color: #333; text-transform: uppercase; text-transform: uppercase; font: Arial; font: Arial; font-size: 48px; font-size: 3em; /* 48 % 16 = 3 */ } } 218px
  • 14. ADAPTING IMAGES img { max-width:100%; } • Automatically images will scale 100% of container • Remove 'height' and 'width' attributes on <img> tag • Applicable to <embed>, <object>, <video> 218px
  • 15. ADAPTING IMAGES PROBLEMS • File size not suitable from one viewport to another • Connectivity hungry if large images for wrong device • No solid solution to retrieve images appropriatly to device SOLUTIONS (NOT ENTIRELY RELIABLE AT PRESENT TIME) • Responsive Images: 218px Experimenting with Context-Aware Image Sizing (link) • Adaptive Images (link)
  • 16. MEDIA QUERIES @media screen and (max-width: 1200px) { @media screen and (max-width: 980px) { body{ body{ width:1000px; width:850px; margin:0 auto; margin:0 auto; } } #content { #content { width: 700px; width: 550px; } } .sidebar{ .sidebar{ width:280px; width:280px; } } } } @media screen and (max-width: 750px) { @media screen and (max-width: 380px) { body{ body{ width:600px; width:360px; 218px margin:0 auto; margin:0 auto; } } #content { #content { width: 400px; width: 360px; } } .sidebar{ .sidebar{ width:190px; width:360px; margin: 0 0 20px 10px; margin: 0 0 10px 0; } } } }
  • 18. TOOLS & SOURCES • Modernizr (link) • Mediaqueri.es (link) • Respond.js (link) • Semantic.gs (link) • Columnal.com (link)
  • 19. AN OVERVIEW OF RESPONSIVE WEB DESIGN Ivan Frantar - 2012
  • 20. MEDIA QUERIES • What is Responsive Design? • Mobile Influence • Fluid Design • Adapting to Context • Adapting to Typography • Adaptive Images • Media Queries • Tools for browser compatibility
  • 21. WHAT IS RESPONSIVE WEB DESIGN? “ Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. 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. In short, we need to practice responsive web design. - Ethan Marcotte Source: http://www.alistapart.com/articles/responsive-web-design/
  • 22. WHAT IS RESPONSIVE WEB DESIGN? • Flexible grid layout • Flexible Images & Typography • Media queries • Adaptive User Experience BENEFITS • Can't afford mobile developers • Optimize User Experience using same content
  • 24. MOBILE INFLUENCE STATISTICS AS OF END OF 2011 Connect 69% 31% App Navigate 65% 35% Browser Inform 61% 39% Manage 54% 46% Entertain 40% 60% Search 37% 63% Shop 27% 73% Source: http://www.mediafly.com/2012/02/mobile-app-usage-vs-browser-usage-on-mobile-devices/
  • 25. FLUID DESIGN #header 100% #header 100% #content 70% #sidebar 20% #main-content 20% 30% 60% #footer 100% #footer 100% #wrapper max-width:960px
  • 26. FLUID DESIGN • Good for different screen sizes • Good for accessibility • Good for keeping the content flexible
  • 27. BUT WHAT ABOUT ALL THOSE GADGETS PEOPLE ARE CARRING WITH THEM?
  • 28. ADAPTING TO CONTEXT Target % Context = Result 960px 698px 218px
  • 29. ADAPTING TO CONTEXT Target % Context = Result 960px 96% 698px 218px 698 % 960 218 % 960 Width:72.7083333%; Width:22.7083333%;
  • 30. ADAPTING TYPOGRAPHY USING EM'S • Size of an em related to the size of its context • Most browsers use as default 16px font size • Therefore if we use ems by changing the size of the body tag We can change the size of all the types accordingly body { font-size:100%; /* will condition the size across font */ 218px }
  • 31. ADAPTING TYPOGRAPHY USING EM'S – example • Apply same formula: target % context = result #header { #header { display: block; display: block; padding-top: 75px; padding-top: 75px; color: #333; color: #333; text-transform: uppercase; text-transform: uppercase; font: Arial; font: Arial; font-size: 48px; font-size: 3em; /* 48 % 16 = 3 */ } } 218px
  • 32. ADAPTING IMAGES img { max-width:100%; } • Automatically images will scale 100% of container • Remove 'height' and 'width' attributes on <img> tag • Applicable to <embed>, <object>, <video> 218px
  • 33. ADAPTING IMAGES PROBLEMS • File size not suitable from one viewport to another • Connectivity hungry if large images for wrong device • No solid solution to retrieve images appropriatly to device SOLUTIONS (NOT ENTIRELY RELIABLE AT PRESENT TIME) • Responsive Images: 218px Experimenting with Context-Aware Image Sizing (link) • Adaptive Images (link)
  • 34. MEDIA QUERIES @media screen and (max-width: 1200px) { @media screen and (max-width: 980px) { body{ body{ width:1000px; width:850px; margin:0 auto; margin:0 auto; } } #content { #content { width: 700px; width: 550px; } } .sidebar{ .sidebar{ width:280px; width:280px; } } } } @media screen and (max-width: 750px) { @media screen and (max-width: 380px) { body{ body{ width:600px; width:360px; 218px margin:0 auto; margin:0 auto; } } #content { #content { width: 400px; width: 360px; } } .sidebar{ .sidebar{ width:190px; width:360px; margin: 0 0 20px 10px; margin: 0 0 10px 0; } } } }
  • 36. TOOLS & SOURCES • Modernizr (link) • Mediaqueri.es (link) • Respond.js (link) • Semantic.gs (link) • Columnal.com (link)