Scribd Logo
Upload

Welcome to Scribd!

  • 359 views

    Responsive Web Design

    Uploaded by

    David Osborne
    This document discusses responsive web design and the changing nature of websites over time. It covers the evolution from fixed-width designs to responsive designs that adapt to different screen sizes. Key aspects of responsive design discussed include flexible grids, media queries, and challenges like navigation and images. The document concludes with tips for a responsive design workflow, emphasizing communication, mobile-first design, prototyping, and designing across all screen sizes from the start.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd

    Responsive Web Design

    Uploaded by

    David Osborne
    359 views62 pages
    This document discusses responsive web design and the changing nature of websites over time. It covers the evolution from fixed-width designs to responsive designs that adapt to different screen sizes. Key aspects of responsive design discussed include flexible grids, media queries, and challenges like navigation and images. The document concludes with tips for a responsive design workflow, emphasizing communication, mobile-first design, prototyping, and designing across all screen sizes from the start.

    Original Description:

    Learning to navigate the Web

    Copyright

    © Attribution Non-Commercial (BY-NC)

    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 and the changing nature of websites over time. It covers the evolution from fixed-width designs to responsive designs that adapt to different screen sizes. Key aspects of responsive design discussed include flexible grids, media queries, and challenges like navigation and images. The document concludes with tips for a responsive design workflow, emphasizing communication, mobile-first design, prototyping, and designing across all screen sizes from the start.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    359 views62 pages

    Responsive Web Design

    Uploaded by

    David Osborne
    This document discusses responsive web design and the changing nature of websites over time. It covers the evolution from fixed-width designs to responsive designs that adapt to different screen sizes. Key aspects of responsive design discussed include flexible grids, media queries, and challenges like navigation and images. The document concludes with tips for a responsive design workflow, emphasizing communication, mobile-first design, prototyping, and designing across all screen sizes from the start.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 62
    At a glance
    Powered by AI
    The key takeaways are that responsive web design is about building websites that can adapt to different screen sizes and devices. It involves using flexible grids, flexible media, and media queries.

    Responsive web design is a web development approach that creates dynamic changes to the layout of a website, depending on the screen size and orientation of the device being used to view it.

    Some challenges of responsive web design include navigation, images, layouts and workflows that don't adapt well across different screen sizes.

    RESPoNSIVE WEB DESIGN

    everything has changed


    Javier Usobiaga #DrupalDevDays

    @htmlboy

    I work at Swwweet.com

    WHAT IS respoNsive responsive web design?

    WHAT IS THE web?

    a tale of

    CONTROL
    obsession

    1990s

    the web is 800px wide

    2000s

    the web is 1024px wide

    2007 +
    the web is 1024px & 320px wide

    2010 + +

    the web is 1200px & 320px & 768px wide

    2012 + + +

    the web is 1200px & 320px & 768px & 1800px wide

    2012 + +
    320px?

    2012 + + + +
    the web is 256px & 320px & 426px & 480px & 560px & 640px & 768px & 800px & 960px & 1024px & 1280px & 1440px & 1600px & 1800px

    ENOUGH!

    ENOUGH!
    its time to accept the webs nature

    THE WEB IS
    uid universal

    multidevice

    rst act

    RESPoNSIVE WEB DESIGN

    2012.dconstruct.org

    mediaqueri.es

    BUT HOW?
    exible grids exible media @media queries

    GRIDS
    16% 16% 16% 16% 16% 16% 16% 16%

    GRIDS
    target context result

    GRIDS
    .grid_3{width:300px} 300 / 960 = 0,2340 .grid_3{width:23.40%}

    MEDIA
    img, video{ max-width:100% }

    MEDIA QUERIES
    @media screen and (max-width:320px){ .side_column{ width: 100%; float: none; } }

    MEDIA QUERIES
    change the layout change the styles increase the font size

    second act

    Responsive RESPoNSIVE challenges

    Navigation

    Navigation
    menu
    about work contact about work contact

    bit.ly/rwd-nav

    layout LAYOUT
    1 3 6 2 5 4

    layout LAYOUT
    1 2 3 4 5 6 1 2

    layout LAYOUT

    images IMAGES
    wide screens high-res screens small screens

    images IMAGES
    bigger images javascript loading sever-side solutions

    bit.ly/rwd-images

    images IMAGES
    CSS3 SVG icon fonts

    third act

    workflow

    WATERFALL
    UX / IA DESIGN VISUAL DESIGN

    DEV

    BOSS

    WATERFALL
    Hi, I want a website

    WATERFALL
    Sure thing!

    WATERFALL
    First things rst. Well need some wireframes to set the structure.

    WATERFALL
    Some color and shiny things

    WATERFALL
    A bit of CSS, a dash of JS... And voil, our job here is done!

    WATERFALL
    Er... guys...

    Fail fail FAIL

    Responsive responsive

    fourth act

    ten tips

    1. Communication

    Between the whole team, during the whole project.

    2. Design & dev, together

    A lot of decissions have to be taken along the way.

    3. Micro-deliveries

    Client takes part actively and makes decisions.

    4. Content rst

    Make an inventory of the content and nd its limitations.

    5. Find the critical points

    Navigation, images, ads, information hierarchy

    6. Mobile rst

    The small screen is the rst limit.

    7. Reference sketches

    Make basic sketches to help with the hierarchy of the content.

    8. Prototype fast

    The sooner you start coding your HTML, the better.

    9. Design in the browser

    Make design decisions as you see the result on the browser.

    10. All screens at once

    When developing, always think about all screen sizes.

    TO RECAP

    TO RECAP
    you cant control the web

    TO RECAP
    you cant control the web RWD is a viable solution

    TO RECAP
    you cant control the web RWD is a viable solution if we change our mentality

    thanks!
    Javier Usobiaga http://Swwweet.com @htmlboy

    You might also like