Without a responsive structure, text gets too small to read on small devices.
If a reader increases the page size on their hand-held device (or makes the browser window smaller on a larger device), text gets cuts off… forcing the reader to scroll back and forth to read.
Text should be readable on various devices and a variety of browser windows. Creating a responsive structure helps. You’ll work on more complex grids later, but for now, take a look at how even a simple, narrow, 1-column page benefits from being responsive.
What is a Responsive Structure?
A responsive structure is a mix of an adaptive structure and a fluid structure.
An adaptive page has multiple grids (often one for each popular browser width) which are accessed based on the size of the browser. Adaptive grids can be problematic, because there are so many browser widths (including widths that don’t exist yet).
A fluid page provides a single grid, created in percentages, so the page expands as the browser expands and contracts as the browser contracts. Fluid grids can be problematic, because columns get too wide on large browsers and too narrow on small browsers.
A responsive page expands as the browser expands and contracts as the browser contracts (like a fluid grid), but has what we call “breakpoints” — alternative layouts (like an adaptive grid) based on when the design “breaks” and needs to be reconfigured. By using breakpoints, a responsive grid works on all browser widths, and avoids columns that are too wide or too narrow.
If you are new to responsive structures, liquidapsive.com is a great visual resource for experiencing the different kinds of grids explained above.
Design and Build Mobile First
When working with responsive structures, design and build mobile first.
Designing mobile first forces you to consider what needs to be clear and available for mobile users. What content is essential? What needs to be at the “top” of the screen? What needs to be most easily accessible? What can be hidden under links? What can be put lower on the pages?
Designing mobile first means understanding the content as well as understanding the reader—what they need, how they will approach and use the site, and so on.
Designing mobile first also gives you and your clients the chance to think about responsive design as an opportunity to add content as pages expand — rather than thinking of it as cutting content as pages get smaller.
For example, let’s say you’re designing a website for the city library. The library is part of the community, and wants its site to communicate all the rich programming available for people of all ages. That’s great.
But someone on their phone is probably more interested in the library hours, the address of a branch they don’t go to often, the time of an event they’re heading to, and maybe the catalog to see if a book is available. Someone using their phone doesn’t want to wait for lots of pictures of the community participating in library activities to load. This additional level of content can be built in as the browser gets bigger.
Building for mobile first doesn’t just mean using smaller images (you’ll use images eventually, I promise) with smaller file sizes… when you build mobile first, you build the “small screen” layout. The one that shows up on the small devices (like an iphone). Then you use media queries to increase size and complexity of the layout as the devices get bigger.
Building mobile first helps readers who use old phones that don’t recognize media queries (an idea since 1994, they weren’t a W3C recommendation until 2012).
Since the design starts with layout for small screens, no media queries are needed for old phones to get the layout for small screens. If you were to start with the larger, more complex screen, the old phones can’t access the designs for mobile devices. Instead, they get the big, complex screens shrunken to a tiny, illegible size.
Unfortunately, Internet Explorer 8 and earlier does not support media queries either. So when you build mobile first, the people who use IE8 (think businesses and other countries other than the US) get the small (mobile) design… which wouldn’t be horrible, but the mobile design (single column) then expands to fill up the desktop browser and the line-length becomes impossibly long to read.
The fix is to design mobile first, and add some code to work with IE8. You’ll do that in this lesson.
Overview of the Assignment
In this lesson, you will build a responsive structure for your Bibliography.
- Make a copy of the bibliography folder from the last exercise. Rename it bibliography_responsive. Rename your CSS file bibliography_responsive.css, and link to it.
- Use max-width, the universal selector (*), and % to make a responsive structure.
- Experiment with creating break-points for your grid.
- View your page on a hand-held device. How does it look? Make changes as needed.
Getting Started
Make a Copy of Your Last Lesson Folder
In this exercise, you modify the most recent bibliography (the one with the Google font), so just make a copy of the bibliography_google folder, and name the new folder bibliography_responsive. Keep the new folder inside the web_typography folder.
Set Up Your Files
Rename the CSS file bibliography_display.css. Link it to the index.html file by going into the HTML file and changing the syntax in the head element to the following:
<link href="bibliography_responsive.css" rel="stylesheet" type="text/css">
Change the title to
<title>Bibliography with Responsive Structure</title>
Make Your Column Responsive
To make your column respond to the width of your browser, you need to change the width of your main_container to a max-width.
#main_container{
max-width:400px; <-- Use YOUR width here
border-width:1px;
border-style:solid;
margin-top:20px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
background-color:#ffffff;
padding:20px;
}
Save and View Your Page
The main container looks like it hasn’t changed. With your browser open to full size, it is whatever width you used for your bibliography (main has a maximum width of 400px, plus the 20px padding on each side).
But the page is now responsive.
Narrow your browser window so it’s similar to the size of a phone or other handheld device. The main container responds to the size of the browser, and the text re-wraps accordingly, remaining readable.
This bibliography is pretty simple, and theoretically, we could just leave it this way. But there are changes you can make to keep the text working optimally on narrower browsers.
Create Responsive Padding
Take a look at the padding of space between the text and the border of the main container. Mine is set at 20px. This amount of space is fine in a wide browser, but is too spacious in a narrow browser.
Use the Universal Selector to Clear Margins and Padding
You’re moving into a more complex use of margins and padding. From now on, whenever you start a project, Clear all margins and padding to 0 so you can add space only where you want it.
Use the CSS universal selector. It applies a value to all properties in all elements in the HTML document. It’s represented by an asterisk (*).
To set all margins and padding to 0 using the universal selector, add it at the top of your CSS document, as follows:
*{
margin: 0px;
padding: 0px;
}
All margins and padding—for all classes, divs, and tags (h1, h2, p, em, strong, and so on)—are now set to 0. This gives you complete control of the spaces between elements. You can add back exactly the amount of space you want—only where you want it.
You’ve been setting margin and padding throughout the bibliography lessons, so clearing the margin and padding to 0 in the universal selector shouldn’t change the overall look of the page. Margin and padding (as well as other styling) set at the element-level in CSS always over-rides the universal selector settings.
Save and View Your Layout.
The bibliography should look exactly the same when the browser is open wide. The bibliography loses the auto space outside the border of the main container when the browser is small. But that’s OK. It was just using up space on the screen!
Put Responsive Space Inside the Border
Now that the default margins and padding are cleared, make the padding on the main container responsive.
Since we are starting from the mobile design and working our way up, pay attention to the space inside the border when the browser is narrow. Change it to 5% all the way around the main container, like so:
#main_container{
max-width:400px;
border-width:1px;
border-style:solid;
margin-top:20px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
background-color:#ffffff;
padding:5%;
}
View Your Page
Save your CSS and view the changes in your browser. Open the browser wide and also make it narrow like a phone. Notice how the padding inside the main container (the space between the border and the text) changes.
Now open the browser just wide enough for the main container to get to its maximum width of 400px. Watch the div padding (space inside the border) and keep opening the browser wider.
The left and right space keeps getting bigger! Even though the main container stopped increasing at its maximum width!
Why?
Because the main container’s padding is a percentage of the main-container’s width… which in turn is based on the browser’s width. Even though the main container stops “growing” at 400px, the padding is still related to the browser, so the left and right space keeps “growing” as the browser gets wider.
Move the Left and Right Padding from the Main Container to the Text
One way to fix this problem is to put the left and right padding on the elements inside the main container, rather than on the main container itself.
Start by changing the padding on the main container. Set the top and bottom padding back to 20px (the original padding before you changed it to 5%):
#main_container{
width:auto;
max-width:400px;
border-width:1px;
border-style:solid;
margin-top:20px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
background-color:#ffffff;
padding-top:20px;
padding-bottom:20px;
}
You don’t need to set the left and right padding to zero. The universal selector does it for you.
Now add the left and right padding back into the layout by putting the padding on the text inside the main container. There are three kinds of text in the main container: the h1, h2, and p. Make sure you add padding to all three of them!
Mine look like this:
p{
font-family:'PT Serif', georgia;
font-size:14px;
line-height:20px;
text-align:left;
margin-top:0px;
margin-right:0px;
margin-bottom:5px;
margin-left:20px;
text-indent:-20px;
padding-left:5%;
padding-right:5%;
}
h1{
font-family:'great_vibesregular', georgia;
font-size:30px;
font-weight:normal;
line-height:48px;
text-align:left;
margin:0px;
padding:0px;
padding-left:5%;
padding-right:5%;
}
h2{
font-family:verdana;
font-size:13px;
font-weight:bold;
line-height:20px;
text-transform:uppercase;
text-align:left;
margin-top:15px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding:0px;
letter-spacing:1px;
padding-left:5%;
padding-right:5%;
}
View Your Page
Save your CSS and view the changes in your browser. Open the browser wide and also make it narrow like a phone. The padding inside the main container (the space between the border and the text) continues to change, but stops “growing” when the main container reaches its maximum width.
There is still one small problem.
Fix the Column Width on Larger Browsers
On a wide browser, my main container used to look 440px wide. It had a max-width of 400px, plus the 20px of padding on each side.
Now that the padding is set on the text instead of the main container, we took the left and right padding off the main container… so the main container looks narrower.
To fix this, increase the main container max-width to 440px. This makes the column width of text close to its original (visual) size:
#main_container{
width:auto;
max-width:440px;
border-width:1px;
border-style:solid;
margin-top:20px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
background-color:#ffffff;
padding-top:20px;
padding-bottom:20px;
}
View Your Page
Save your CSS and view the changes in your browser. Open the browser wide and also make it narrow like a phone. The horizontal space works. The column width works. Now you have to fix the vertical space.
Create A Breakpoint
The bibliography, when viewed in a large browser, has a healthy amount of vertical space. My main container has a 20px top margin (space outside of the border) and a 20px top padding (space inside the border). In addition, my h1 has a 48px line-height, so there is extra space above and below the main title.
In a large browser, the generous vertical space keeps the main title from looking “stuck” to the top of the browser window. But in a smaller browser, the extra vertical space is wasted. And the black border becomes just an odd horizontal line.
Determine Where to Put Your Breakpoint
Every design has a different breakpoint. The breakpoint is the point at which the design “breaks” — the point at which the design doesn’t work.
After spending some time making the browser bigger and smaller, I’ve determined the breakpoint is the point where the top border of the main container turns into an odd black line.
Since the main container has a max-width of 440px, the main container has space around it until the browser reaches a width of 440px. At 440px, the right and left margin disappear, and the top border is left on it’s own, looking like an odd black line.
So my breakpoint is 440px.
Determine What Needs to Change at the Breakpoint
On browsers equal to or narrower than 440px, I want the odd black line to disappear.
On browsers larger than 440px, I want the black border to work as it does now.
I could accomplish this in one of two ways:
- I could remove the black border on the main container on the narrower version, so there is no border anywhere around the bibliography.
- I could remove the space above the main container (the top margin) on the narrower version, so the border almost “merges” with the browser frame (just like the left and right borders do).
I’m partial to keeping the black border. I know it takes up a few extra pixels, but I like how it looks a little stronger and darker — it works with my h1 font. So now I know I want to keep the border and remove the top margin of the main container on the narrower version… but keep the top margin as is on for larger browsers.
Add a Media Query in the CSS
Media queries are new to CSS3. They are modules you can add to your CSS. They basically say to the CSS, “hey, pay attention to the media this page is being used on… and act accordingly.”
You can use a media query to tell the CSS to notice the browser width.
At the bottom of the CSS file, type in the following syntax:
@media (min-width: 442px) {
}
What does this mean?
The syntax says, “pay attention to the media, if the width of the browser is equal to or more than 442px, do this.” (I used 442 instead of 441 because the main container is centered in the browser, so an even number works better).
Except it doesn’t actually do anything yet. Because you haven’t put anything between the curly brackets.
Tell the Media Query What To Do
What do you want to do on browsers equal to or larger than 442px? You want to keep the main container the way it is.
Copy the main container element (from earlier in your CSS file) and paste it between the curly brackets of the media query like this:
@media (min-width: 442px) {
#main_container{
width:auto;
max-width:440px;
border-width:1px;
border-style:solid;
margin-top:20px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
background-color:#ffffff;
padding-top:20px;
padding-bottom:20px;
}
}
Be Specific
Since media queries can over-ride earlier styling, it’s best to be specific about what you want the Media Query to do. In this instance, you want to keep the main_container the same. More specifically, you want to keep the margin-top the same.
Delete all the styling on the 442px media query main_container, except the margin-top.
@media (min-width: 442px) {
#main_container{
margin-top:20px;
}
}
This tells larger browsers: if you are larger than 442px, put a top margin of 20px on the main_container. Now the main container is all set for larger browsers.
Set the Main Container for Mobile Browsers
Remember, you want your mobile browsers to see a version of the layout without the top margin on the main container.
Go to the original main_container element (at the top of your CSS file), the one that loads automatically, and delete the top margin, by setting the measurement to zero, like this:
#main_container{
width:auto;
max-width:440px;
border-width:1px;
border-style:solid;
margin-top:0px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
background-color:#ffffff;
padding-top:20px;
padding-bottom:20px;
}
Now when the page loads on any browser smaller than 442px wide, the main_container will have a 0px top margin.
View Your Page
Save your CSS and view the changes in your browser. Open the browser wide and also make it narrow like a phone. When your browser window is 441px and smaller, the top margin is gone and bibliography is higher on the page. As soon as the browser hits 442px, the main container shifts down to reveal the border around it.
Refine the Top Space
The vertical space is still a hair bigger than it needs to be for mobile browsers. My recommendation? Reduce the top padding. It’s at 20px, but I think it would work fine at 10px. While you’re at it, reduce the bottom padding to 10px as well.
Back in the CSS, change the top and bottom padding of the original main_container like so:
#main_container{
width:auto;
max-width:440px;
border-width:1px;
border-style:solid;
margin-top:0px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
background-color:#ffffff;
padding-top:10px;
padding-bottom:10px;
}
Since you’ve changed the top and bottom padding on smaller browsers, you need to make sure you reset the top and bottom padding on larger browsers.
Scroll down to the 442px media query, and tell larger browsers to use 20px top and bottom padding like so:
@media (min-width: 442px) {
#main_container{
margin-top:20px;
padding-top:20px;
padding-bottom:20px;
}
}
View Your Page
Save your CSS and view the changes in your browser. Open the browser wide and also make it narrow like a phone. Everything works! Congratulations on making your first responsive grid!
Unfortunately, there are a couple unseen problems you need to take care of.
Make it Work Cross Browser
You can’t tell by looking at the responsive screen on your laptop, but this is not going to work on an iPhone. Nor will it work on Internet Explorer 6–8. Not yet anyway.
Tell Devices to Look at their Viewport Size
Some mobile devices will show a webpage at its largest size regardless of media queries. Why?
Since most sites are not yet optimized for mobile, some modern mobile browsers are purposely set to a larger viewport — meaning they act as if their browser is larger than it actually is. This way, readers see the entire page (just really small) and can pinch-to-zoom to see the content they want to read. Theoretically, this is better than only seeing a portion of a web page when it loads.
Since your responsive page is optimized for mobile browsers, you can use the viewport meta tag to tell browsers to use their real device width for the viewport.
In your HTML document, put the viewport meta tag into the head. Make sure your Google web font link remains first in the head element. To keep things clean, I like to put my meta tags near each other. My syntax looks like this:
<head> <link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Bibliography With a Responsive Structure</title> <link href="bibliography_responsive.css" rel="stylesheet" type="text/css"> </head>
Add respond.js for IE 6–8
Respond.js is a simple script that doesn’t take a long time to load, and is written to fix a very specific problem: it translates min-width and max-width media queries and all media types to non-supporting browsers.
The suffix (js) means the script is written in javascript. You don’t need to know how to write javascript, you only need to know how to use specific (respected, bug-free) scripts that have been written by others.
To add respond.js to your page…
- Go to https://github.com/scottjehl/Respond
- Download the zip file (bottom of the right-hand column)
- Unarchive the zip file on your computer
- Put the file “respond.js” in the same folder as your HTML document
- Add the following syntax in the head of your HTML document after your link to your CSS file. (Scripts should go after stylesheets in your head.)
<head> <link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Bibliography With a Responsive Structure</title> <link href="bibliography_responsive.css" rel="stylesheet" type="text/css"> <!--[if lt IE 9]> <script type="text/javascript" src="respond.js"> </script> <![endif]--> </head>
What does this mean?
The first line is a conditional comment. Only Internet Explorer pays attention to conditional comments. This one says: if the browser is less than IE9.
The second line “calls for” or “links to” the script. It says: use the javascript file named respond.js in this file. Since the javascript is in the same folder as your html document, the source (src) for the script is just the name of the script. The browser “looks” in the same folder for a script by that name and uses it.
The last line ends the conditional comment.
That’s it.
Change Other Elements as Necessary
If there are more elements you need to change — perhaps your h1 is too big to fit on the small screen, or the font for the h1 is hard to read if you set it smaller — go ahead and change them in your layout.
If you want your original styling to work on larger browsers, remember to add the specifics in your 442px media query. That way, the element (now for mobile devices) can be changed for smaller browsers, while the original styling will be used in your media query and thus in larger browsers.
Notes on Media Queries
Media queries can be used to change images, color, spacing, fonts, and so on.
They can get pretty complex. You can have multiple queries that fix problems at multiple breakpoints.
Later, when you have multiple media queries, you can put each one in its own CSS file. For now, there’s no need to do that, just keep your media queries in your main CSS file. Keep them at the bottom, so they’ll correctly over-write the elements you want to over-write.
The number one thing to remember about media queries is that they don’t have to be used to query a specific kind of device. Don’t worry about targeting phones, tablets, and certain laptops. The best way to use media queries is to target breakpoints in a design. If the design shifts when it needs to, it will work at all browser sizes.
Notes on Pixels Instead of ems
The trick to creating a responsive grid is using responsive measurements for the horizontal widths in your layout. Percentages are responsive, and will give you the flexibility you need for your column widths. As projects become more complex you’ll use percentages for horizontal widths.
Because readers scroll through content, vertical measurements don’t require the same level of responsiveness. And text can change as needed at the break-points. Thus, wherever you don’t need to use percentages, you’ll use pixels in the lessons for this book.
Some web designers use ems instead of pixels. If you are not familiar with what an em is in web design, an em is a unit of measurement usually equal to the base size of the text(the default base size is 16px).
Working with ems can be a good thing. They allow a design to remain consistent even if a reader chooses a larger base-size for their text. Working with ems is also complex. For creatures with 10 fingers, thinking in base-16 is a mathematical challenge. In addition, due to the “cascading” nature of CSS, the base measurement of an em isn’t always 16px; it changes based on font-sizes used within a layout.
So using ems correctly means understanding child relationships in CSS. And if you’re just learning how to think like a typographer in CSS, you don’t need to be learning the basics… while wrapping your head around an intermediate to advanced understanding of the CSS system… while doing a lot of division.
So in this book, you’ll use pixels and percentages. Later, if you want to learn how to use ems, you’ll have a solid foundation on which to build your knowledge.
Recommended Resources
- To learn more about adaptive, fluid, and responsive grids, visit liquidapsive.com
- To get respond.js and read instructions, visit https://github.com/scottjehl/Respond
This was very useful!