Introduction to responsive web design

A beginner's guide to responsive web design.

Transcript

1. Responsive Web Design
2. What is responsive web design (RWD) ?
3. “ Responsive design is not about ‘designing for mobile’. But it’s not about ‘designing for the desktop’, either. Rather, it’s about adopting a more flexible, device-agnostic approach “ -Ethan Marcotte Author of Responsive Web Design
4. SO HOW DOES IT WORK?
5. CSS MEDIA QUERIES These are CSS techniques that uses @media rule to include block of CSS properties only if a certain condition is true.
6. With the help of CSS media query, we can test the following: • Device screen width/height • Screen resolution • Device orientation Note that Media queries do not automatically make sites work on various devices.
7. WAYS TO USE MEDIA QUERIES 1. Within a css file 2. Within a <style> tag 3. When linking a css file <link media=“(max-width: 500px)” href=“mobile.css” >
8. THE VIEWPORT By default, small devices assume sites are designed for desktops. The viewport is a meta tag that gives the browser instructions on how to control the page’s dimensions and scaling.
9. <meta name=“viewport” content=“width=device-width, initial- scale=1> <head> </head>
10. <!DOCTYPE html> <html> <head> <title>Hack and Design</title> <style> @media (max-width: 500px) { body { background : red; } } </style> </head> <body> </body> </html> <meta name=“viewport” content=“width=device-width, initial-scale=1”>
11. The whole idea of RWD is that sites should be built with a mobile first approach.
12. • It forces you to focus and prioritize by embracing the constraints inherent in mobile design. • It allows you to deliver innovative experiences. BENEFITS OF THINKING MOBILE FIRST
13. MOBILE FIRST DESIGN TIP Only hide presentational content. (People will get frustrated if they can’t find information on mobile if they know it’s on the desktop)
14. h1 { display:none; color:white; text-align: center; margin-top: 50%; } @media (max-width: 500px) { body { background : red; } h1 { display: block; } } <body> <h1>Welcome to Ingressive 1.0</h1> </body> CSS HTML
16. GRID SYSTEMS Grid systems are a collection of prebuilt CSS rules that allow you to apply grid-like layouts to HTML
17. Examples of prebuilt Grid Systems are: 1. Bootstrap 2. Foundation 3. Skeleton
18. Grid systems are already responsive. Many have prebuilt CSS buttons and components.
19. “ The design process is about designing and prototyping and making. When you separate those, I think the final results will suffer. ” - Jonathan Ive
20. THANK YOU Samuel Blessed Woniowei GIthub Twitter github.com/samuelwoniowei @shmuelky