Responsive web design


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Ethan Marcotte is a web designer & developer, a speaker and author of a couple of books on Responsive web designHe has created websites choosen for being responsivePeople Magazine, New York Magazine, the Sundance Film Festival, The Boston Globe,
  • More to be shown on the browser
  • Responsive web design

    2. 2. Whatis it? This is a design approach aimed at crafting sites toprovide an optimal viewing experience across a widerange of devices(Desktop computers to mobile phones) “A flexible grid(with flexible images) that incorporatesmedia queries to create a responsive, adaptive layout”-Ethan Marcotte
    3. 3. Whatdo I mean ?
    4. 4. Howis it Done?APPROACHES1. Fluid grids2. Flexible Images3. Media Queries4. Server Side Components(RESS)
    5. 5. APPROACH1: Fluid GridThis is a grid that flexible and based upon percentagesrather than pixels.In a couple of the fluid grid columns determine the width ofwhere content is placed whereas the content will determinethe height.
    6. 6. APPROACH2: Flexible Images Flexible media includes images and videos, which can adaptdepending on the screen size. In most cases it involves using the same image of different sizeswhich can be loaded on different layouts/resolutions.
    7. 7. Example
    8. 8. APPROACH3: MEDIA QUERIES This is a CSS3 module allowing content rendering to adapt toconditions such as screen resolution, size, orientation e.t.c. This is accomplished by using specific styles based on devicecharacteristics.
    9. 9. APPROACH4: Server Side Components In this approach the client side and server side work hand in hand. Client Side: The client side sends the specifications of the type ofview and then renders the view sent from the server side Server side:The logic for the content to be loaded is contained onthe server side.
    10. 10. Whatdo IUse?TOOLS FORTHETRADE Wire-framing CSS and Fluid Grids Testing
    11. 11. WIREFRAMINGThis is the process of designing/ prototyping the look and flow of anapp.Some tools are bought and others are freeTip: Beginners can use this to test out how responsive websitesWork.
    12. 12. WIREFRAMING
    13. 13. CSS and FluidGridsTo be used for the actual coding/ implementation.The mostly heard about and used areTwitter’sBootstrap and Zurb’s Foundation.The best thing about the two you get more than just theCSS and Fluid grid, you also get some components (e.g.buttons, dropdowns etc. )
    14. 14. Twitter’sBootstrap
    15. 15. Zurb’sFoundation
    16. 16. TestingAfter finishing with building the website, you can testthem at 1.The Responsinator- Shows how your page loads on avariety of mobile devices 2. Matt Kersley site-Test online or download code inorder to test at your local serverhttp://springload.responsinator.com
    17. 17. ISSUESSOLVED BYRWD: One code base, one deployment, one URL All content is available everywhere Future friendly
    18. 18. References ResponsiveWeb Design by Ethan Marcotte Wikipedia Blog