The content in a site built with responsive
design principles will flow to fit any screen.
Responsive design is often confused with adaptive design,
where a site will have multiple sizes it can snap to.
One way to think about the difference between them is
smooth resizing (responsive) vs snap resizing (adaptive).
Responsive on top, adaptive on the bottom.
Credit: CSS Tricks
Responsive and adaptive are just design ways of thinking,
and any site can use principles from both philosophies.
Chrome Device View
Google Chrome has a built-in “responsive” mode,
for web developers to easily test a site’s layout.
Open the Chrome Developer Tools for your website
using the keyboard shortcut for your system.
Mac: Command + Option + i
Windows: Ctrl + Shift + i
Once you have the dev tools open, you can toggle
mobile view using a keyboard shortcut:
Mac: Command + Shift + M
Windows: Ctrl + Shift + M
The mobile view offers a variety of
specific screen sizes to test against.
Select the mobile view called “Responsive”.
Enabling Responsive Design
Regular computers allow responsive by default,
but mobile devices need websites to enable it.
In Responsive View, scale your site
down to less than 970px wide.
Your whole site should start scaling down.
We can prevent this from happening by adding
a responsive viewport meta tag to our HTML.
In your page layout, add the viewport
meta tag to the HTML head section.
<head>
<meta name="viewport" content="width=device-width">
<title>{{ site.name }}</title>
<link rel="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
sizing wherever you can!
At the moment, our site’s content always
takes up the full width of the screen.
This is fine on small screens, but on larger screens
our content looks really weird and stretched out.
We can solve this problem by giving
our content a maximum possible width.
Let’s tidy up our shop page as
an example of responsive design.
In your shop page, add a section with
the class “container” around the shop items.
<h1>Shop</h1>
<div class="container">
<ul class="shop-items">
{% for item in site.data.shop %}
<li>
<span class="name">{{ item.name }}</span>
<span class="price">${{ item. price }}</span>
</li>
{% endfor %}
</ul>
</div>
In your stylesheet, create a new
style for the 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
“hero” image at the top of their pages.
Our “Shop” heading is still sticking to the left,
we can give it some character using a hero image.
In your shop page, create a
hero div around your heading.
<div class="hero">
<h1>Shop</h1>
</div>
<div class="container">
<ul class="shop-items">
{% for item in site.data.shop %}
<li>
<span class="name">{{ item.name }}</span>
<span class="price">${{ item. price }}</span>
</li>
{% endfor %}
</ul>
</div>
Also add a more friendly heading
and welcome message for guests.
<div class="hero">
<h1>Welcome to the Store</h1>
<p>
We've got a great selection of scrummy treats,<br>
we hope you'll visit us soon for a taste!
</p>
</div>
In your stylesheet, create a hero style
with some vertical padding and a background.
.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,
but we can use our container to center it.
<div class="hero">
<div class="container">
<h1>Welcome to the Store</h1>
<p>
We've got a great selection of scrummy treats,<br>
we hope you'll visit us soon for a taste!
</p>
</div>
</div>
Find a Creative Commons image on Flickr
to use as the hero image on your shop page.
Save the image to your theme’s img
folder with a short and clear name.
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;
}
Fixed-Width Header
We can use the same concept as we did
for the hero image, to center our header content.
In your header include, add a container
around the title and links.
<header>
<div class="container">
<h1>{{ site.name }}</h1>
<nav>
<a href="/">Home</a>
<a href="/shop.html">Shop</a>
<a href="/contact.html">Contact</a>
<a href="/credits.html">Credits</a>
</nav>
</div>
</header>
You’ll also need to modify the styles,
as the container should now have the 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,
rather than just pushing the content in by the padding value.
This means that if you have a container which is 800px wide,
and it has 30px padding either side, its full width is 860px.
To stop this from happening, we can use the
border-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.
Loading...