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
Howis it Done?APPROACHES1. Fluid grids2. Flexible Images3. Media Queries4. Server Side Components(RESS)
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.
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.
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.
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.
Whatdo IUse?TOOLS FORTHETRADE Wire-framing CSS and Fluid Grids Testing
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.
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. )
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
ISSUESSOLVED BYRWD: One code base, one deployment, one URL All content is available everywhere Future friendly
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/