Responsive web design
0 likes1,194 views
Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and screen sizes. It utilizes a flexible grid, flexible images, and media queries. There are four main approaches: fluid grids that use percentages instead of pixels, flexible images that adapt based on screen size, media queries that allow different styles based on device characteristics, and server-side components where content is rendered differently based on device specifications. Common tools for RWD include wireframing tools, CSS frameworks like Bootstrap and Foundation, and testing sites like Responsinator to test across devices.
Responsive web design
- 2. What is it? This is a design approach aimed at crafting sites to provide an optimal viewing experience across a wide range of devices(Desktop computers to mobile phones) “A flexible grid(with flexible images) that incorporates media queries to create a responsive, adaptive layout”- Ethan Marcotte
- 3. What do I mean ?
- 4. How is it Done? APPROACHES 1. Fluid grids 2. Flexible Images 3. Media Queries 4. Server Side Components(RESS)
- 5. APPROACH 1 : Fluid Grid This is a grid that flexible and based upon percentages rather than pixels. In a couple of the fluid grid columns determine the width of where content is placed whereas the content will determine the height.
- 6. APPROACH 2 : Flexible Images Flexible media includes images and videos, which can adapt depending on the screen size. In most cases it involves using the same image of different sizes which can be loaded on different layouts/resolutions.
- 7. Example
- 8. APPROACH 3 : MEDIA QUERIES This is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution, size, orientation e.t.c. This is accomplished by using specific styles based on device characteristics.
- 9. APPROACH 4 : 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 of view and then renders the view sent from the server side Server side:The logic for the content to be loaded is contained on the server side.
- 10. What do IUse? TOOLS FORTHETRADE Wire-framing CSS and Fluid Grids Testing
- 11. WIREFRAMING This is the process of designing/ prototyping the look and flow of an app. Some tools are bought and others are free Tip: Beginners can use this to test out how responsive websites Work.
- 12. WIREFRAMING
- 13. CSS and Fluid Grids To be used for the actual coding/ implementation. The mostly heard about and used areTwitter’s Bootstrap and Zurb’s Foundation. The best thing about the two you get more than just the CSS and Fluid grid, you also get some components (e.g. buttons, dropdowns etc. )
- 16. Testing After finishing with building the website, you can test them at 1.The Responsinator- Shows how your page loads on a variety of mobile devices 2. Matt Kersley site-Test online or download code in order to test at your local server http://springload.responsinator.com http://mattkersley.com/responsive
- 17. ISSUES SOLVED BY RWD: One code base, one deployment, one URL All content is available everywhere Future friendly
- 18. References ResponsiveWeb Design by Ethan Marcotte Wikipedia http://en.wikipedia.org/wiki/Responsive_web_ design Blog http://blog.crazyegg.com/2013/05/07/responsiv e-web-design-tools/