Mobirise Web Page Builder

RESPONSIVE DESIGN

Lesson 4.
A definition
    The ingredients:
  • Flexible grid-based layout
  • Flexible images and media
  • Media queries

                "Responsive Web Design"


  • FLEXIBLE GRID-BASED LAYOUT

A layout based on proportions rather than absolute. Think in percentage rather than pixels.

               

                result = target / content


Width: 900px;    /* of a 960 wide frame */

Width: 93.75%    /* 900px / 960 */


  • FLEXIBLE IMAGES AND MEDIA

Images should scale with the flexible grid.


            img {

                    max-width: 100%;

            }


Not just images but other media too.


        img, embed, object, video { ... }


  • MEDIA QUERIES

Despite the fluid grid, the design will eventually fail but ...


        @media screen and (min-width: 841px) {

        ... } /* 841 or larger */


        @media screen and (max-width: 480px) {

        ... } /* 480 or smaller */


Content-based break-points.


ANOTHER DEFINITION

"Our understanding of 'responsive design' should be broadened to cover any approach that delivers elegant visual experiences regardless of the size of the user's display and the limitations or capabilities of the devices" - Jeffrey Zeidman.


DESIGNING WITH GRID

Why use a grid?

  • Harmony, consistency, clarity.
  • Order adds to the credibility of the design.
  • Promotes Collaboration.
  • Not quite a blank canvas.




THE 3 GRIDS

Normal sizes

  • 960px
  • 640px
  • 320px


THE CSS

Container classes


        .full {

        ...

        } /*centres content and sets fluid width*/


Grid classes


        .mobile-1    .mobile-2    ...    .mobile-4

        .tablet-1    .tablet-2    ...    .tablet-8

        .desktop-1    .desktop-2    ...    .desktop-12


        .tablet-1    { width: 9:375%; }


SUPPORTING CLASSES

Push and pull

        .tablet-push-4 { left: 50%; }

        .desktop-pull-1 { left: -8.33333%; }


Prefix and suffix

        .tablet-prefix-1 { padding-left: 12.5%; }

        .desktop-suffix-6 { padding-right: 50%; }


Hidding

        .tablet-hidden { display: none !important; }

        .mobile-hidden { display: none !important; }


NESTED GRID CLASSES

        .mobile-2-of-4

        .tablet-3-of-6

        .desktop-5-of-8


        .tablet-2-of-8 {

            margin-left: 1.6129%;

            margin-right: 1.6129%;

            width: 22.5806452%;

        }


        /* Removes margins as 960 */

        .desktop-alpha

        .tablet-omega


THE HTML

Your page.tpl.php might have...


        ...

        <div id="sidebar-left"

            class="desktop-3 tablet-4 mobile-4">

            <?php print render($page ['sidebar_first']);?>

        </div>

        ...


Only one grid is active at ant time.



Visit the library for ebooks



Ask your questions and comments below

Your questions and comments should be based on the lesson.