• Save
Responsive web design
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
702
On Slideshare
354
From Embeds
348
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 348

http://scosit.wordpress.com 348

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 1. RESPONSIVEWEBDESIGN(RWD)
  • 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. Whatdo I mean ?
  • 4. Howis it Done?APPROACHES1. Fluid grids2. Flexible Images3. Media Queries4. Server Side Components(RESS)
  • 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. 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. Example
  • 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. 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. Whatdo IUse?TOOLS FORTHETRADE Wire-framing CSS and Fluid Grids Testing
  • 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. WIREFRAMING
  • 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. Twitter’sBootstraphttp://twitter.github.io/bootstrap/
  • 15. Zurb’sFoundationhttp://foundation.zurb.com/
  • 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.comhttp://mattkersley.com/responsive
  • 17. ISSUESSOLVED BYRWD: One code base, one deployment, one URL All content is available everywhere Future friendly
  • 18. References ResponsiveWeb Design by Ethan Marcotte Wikipediahttp://en.wikipedia.org/wiki/Responsive_web_design Bloghttp://blog.crazyegg.com/2013/05/07/responsive-web-design-tools/