Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 24 views

    Lecture24 ResponsiveDesign

    Uploaded by

    Shubhankar Deysarkar
    This document discusses responsive web design. It defines a responsive web site as one that adapts its layout to different devices using fluid grids, flexible images, and CSS3 media queries. It recommends using a 12-column grid layout with column widths defined in percentages to achieve a fluid design. The layout automatically resizes as the browser window changes width. It also notes the use of viewport meta tags to control zooming on mobile.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Lecture24 ResponsiveDesign

    Uploaded by

    Shubhankar Deysarkar
    24 views13 pages
    This document discusses responsive web design. It defines a responsive web site as one that adapts its layout to different devices using fluid grids, flexible images, and CSS3 media queries. It recommends using a 12-column grid layout with column widths defined in percentages to achieve a fluid design. The layout automatically resizes as the browser window changes width. It also notes the use of viewport meta tags to control zooming on mobile.

    Original Description:

    Responsive Design

    Original Title

    Lecture24-ResponsiveDesign

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document discusses responsive web design. It defines a responsive web site as one that adapts its layout to different devices using fluid grids, flexible images, and CSS3 media queries. It recommends using a 12-column grid layout with column widths defined in percentages to achieve a fluid design. The layout automatically resizes as the browser window changes width. It also notes the use of viewport meta tags to control zooming on mobile.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    24 views13 pages

    Lecture24 ResponsiveDesign

    Uploaded by

    Shubhankar Deysarkar
    This document discusses responsive web design. It defines a responsive web site as one that adapts its layout to different devices using fluid grids, flexible images, and CSS3 media queries. It recommends using a 12-column grid layout with column widths defined in percentages to achieve a fluid design. The layout automatically resizes as the browser window changes width. It also notes the use of viewport meta tags to control zooming on mobile.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 13

    In this lecture, we will discuss

    Responsive
    Design

    What device do we need to support?

    ALL#OF#THEM#

    What is a Responsive Web Site?

    Site#designed#to#adapt#its#layout#to#the##
    viewing#environment#by#using#uid,##
    propor@onAbased#grids,#exible#images,##
    and#CSS3#media#queries#
    Paraphrased)from)Wikipedia)

    What is a Responsive Web Site?

    Site#designed#to#adapt#its#layout#to#the##
    viewing#environment#by#using#uid,##
    propor@onAbased#grids,#exible#images,##
    and#CSS3#media#queries#
    Paraphrased)from)Wikipedia)

    ! Sites layout adapts to the size of the device


    ! Content verbosity or its visual delivery may change

    Alternative to Responsive Design:


    1.2#

    Server#
    m.mysite.co

    1.3#

    m)

    Detect))
    User6Agent,)
    i.e.,)browser)

    12-Column Grid Responsive Layout


    factors#of#12:###1,#2,#3,#4,#6,#12##

    12-Column Grid Responsive Layout


    padding)

    3#

    3)

    3#

    6#
    4#

    3#
    6#

    4#

    4#

    12-Column Grid Responsive Layout


    100%#

    3#

    3)

    3#

    6#
    4#

    1#column#=#100%#/#12#=#8.33%##

    3#
    6#

    4#

    4#

    12-Column Grid Responsive Layout


    100%#

    25%#

    25%#

    25%#

    50%#
    33.33%#

    1#column#=#100%#/#12#=#8.33%##

    25%#
    50%#

    33.33%#

    33.33%#

    12-Column Grid Responsive Layout


    Nested#grids#

    4#
    6#

    4#
    6#

    3# 3# 3# 3#

    4#
    4#

    4#

    4#

    Summary
    ! Need and idea of responsive design
    ! 12-column grid layout
    Use % to achieve fluid width (wrt browser width)

    ! Viewport meta tag to turn off default mobile zooming

    NEXT:
    Introduction to Twitter Bootstrap Framework

    You might also like