Responsive Design
Designing a site for all screens
The content in a site built with responsive
Responsive design is often confused with adaptive design ,
One way to think about the difference between them is
Responsive on top, adaptive on the bottom.CSS Tricks
Responsive and adaptive are just design ways of thinking,
Chrome Device View
Google Chrome has a built-in “responsive” mode,
Open the Chrome Developer Tools for your website
Mac: Command + Option + i
Once you have the dev tools open, you can toggle
Mac: Command + Shift + M
The mobile view offers a variety of
Select the mobile view called “Responsive”.
Enabling Responsive Design
Regular computers allow responsive by default,
Laptops and desktops will respond to percentage-based layouts automatically.
Smaller devices like tablets and phones know that many people have websites which haven’t been designed for smaller screens. For this reason, smaller devices will scale down (zoom out) your site to fit it on the screen.
This isn’t what we want! We’re taking responsibility for our design being responsive, so we need to tell browsers about our decision.
In Responsive View, scale your site
Your whole site should start scaling down.
Using the Responsive View in Chrome Dev Tools, you can easily demonstrate the zooming effect on smaller devices.
We can prevent this from happening by adding
Using a small piece of code, we can tell devices not to zoom our content.
You should only do this for websites which have been designed to handle smaller screen sizes.
In your page layout, add the viewport
< head> < metaname = " viewport" content = " width= device-width" > < title> </ title> < linkrel = " stylesheet" href = " /theme/css/styles.css" > </ head> Your site should now stay the same scale at any width.
Responsive Layout
Long story short: use percentage
At the moment, our site’s content always
This is fine on small screens, but on larger screens
We can solve this problem by giving
Let’s tidy up our shop page as
In your shop page, add a section with
< h1> </ h1> < divclass = " container" > < ulclass = " shop-items" > < li> < spanclass = " name" > </ span> < spanclass = " price" > </ span> </ li> </ ul> </ div>
We are using this restricted-width container in our page instead of in our layout because we don’t want it to apply to all content on all pages.
It’s common in web design to have portions of the page which are centered, and portions which are full-width.
Only using the container class in specific instances allows for that flexibility.
In your stylesheet, create a new container class.
.container {
width : 100%;
max-width : 800px;
padding : 0 20px;
margin : 0 auto;
border : 1px solid red ;
}
Test your layout in Responsive View.
Your item list area should stop growing at 800px wide.
Hero Images
Modern websites often have a big and bold
Our “Shop” heading is still sticking to the left,
In your shop page, create a hero div around your heading.
< divclass = " hero" > < h1> </ h1> </ div> < divclass = " container" > < ulclass = " shop-items" > < li> < spanclass = " name" > </ span> < spanclass = " price" > </ span> </ li> </ ul> </ div>
Also add a more friendly heading
< divclass = " hero" > < h1> </ h1> < p> < br> </ p> </ div>
In your stylesheet, create a hero style
.hero {
padding : 50px 0;
min-height : 400px;
background : lightgreen ;
}
You should now have a green panel in your shop.
Our welcome text is still sticking to the left,container to center it.
< divclass = " hero" > < divclass = " container" > < h1> </ h1> < p> < br> </ p> </ div> </ div>
Save the image to your theme’s img
Add the image to your credits page.
Create a new class called .hero.shop
.hero.shop {
background-color : lightgreen ;
background-image : url('/theme/img/shop-hero.jpg') ;
background-size : cover;
background-position : center;
}
For your background colour, you should choose a colour similar to the colour scheme of your background image.
This is because if the image doesn’t load for some reason, you still want your site to look okay and for the text to be readable.
We can use the same concept as we did
In your header include, add a container
< header> < divclass = " container" > < h1> </ h1> < nav> < ahref = " /" > </ a> < ahref = " /shop.html" > </ a> < ahref = " /contact.html" > </ a> < ahref = " /credits.html" > </ a> </ nav> </ div> </ header>
You’ll also need to modify the styles,flex display.
header {
background : #222 ;
color : white ;
}
header .container {
display : flex;
align-items : baseline;
}
Fixing Funky Box Sizing
By default, browsers add padding to a box’s width,
This means that if you have a container which is 800px wide,
To stop this from happening, we can use theborder-box sizing on all elements.
html {
font-family : 'Roboto' , sans-serif;
font-size : 14px;
line-height : 150%;
box-sizing : border-box;
}
*, *:before, *:after {
box-sizing : inherit;
}
Add a hero image to your home page.
