Overview of the Assignment
In this exercise you design a web page with a resume on it. Start by setting text to promote reading a resume: establishing the most important information (for the mobile version) and setting the font, font size, line height, and measure (line length).
- Read the text you are setting (Jamie Peterson’s resume), so you are familiar with what information people will be skimming and/or reading.
- Identify what is the most important information — what needs to show up first on a small hand-held device?
- Choose a font (web safe or web font), font size, line height, and alignment to promote horizontal and vertical scanning.
- Set measure (column-width) based on the text, not the browser width.
- Build a responsive structure using multiple divs and media queries.
- Use auto:height and overflow:hidden on the main container.
- Follow the walk-through provided. Read what a typographer looks for in the process.
Getting Started
Read the Text
Until now, you’ve started each assignment by creating a lesson folder. But as content gets more complex, you need to start by familiarizing yourself with the content. Download and read Jamie Peterson’s resume.
Think About How Someone Else Will Read the Text
Setting type on the web is a UX (user experience) issue. How would a potential employer or client read the text? They might scan over it, looking for key words and information. After reading various resumes, they might come back to the resume to look for Jamie’s contact information.
Reading the text and thinking about how someone else would read the text helps you identify how to order the information, what to emphasize, what to group together, and so on.
Sketch a Basic Structure
Web Designers Need to Sketch! Now is the perfect time to start. Get the ideas out of your head, and visualize possible solutions quickly and easily before building a layout. Writing syntax is easier when you know what your layout looks like.
Start with the mobile version first. Then do a laptop or desktop version. Designing from the two extremes will help you see problems (and find solutions) from the start.
Make a Mockup
Use the software you prefer to make your mock-up. You don’t have to learn a new application to do this exercise. Many of my colleagues prefer using PhotoShop. I prefer InDesign because I work quickly in it, can control the text more easily, and can export images when the mock-up is finished.
Below are my mock-ups for both the mobile and laptop versions. I’m working with Merriweather available from Google Fonts. You should use the font you want to use.
Notice I’m focusing on three things: a good font-size, line-height, and measure (line-length). This is enough to show me what my structure needs, and to tell me the three-column idea might not work. I really want a three-column layout, but am prepared to change it if I can’t make it work.
Some Helpful Mockup Resources
- My (empty) mock-up_templates — eps and inDesign files
- how to download Google fonts to use in a mockup
Start Building the Page
Create the Lesson Folder
In your web_typography folder, create a folder for this lesson. Call it resume.
Put a copy of the respond.js file in this folder (any time you design a responsive web page, you need this file).
Set Up Your HTML File
Since you are starting a whole new project, open your text editor, create a new document and save it as index.html in your resume folder.
You could type in the basic HTML syntax, as well as the respond.js, the conditional comment, and the viewport syntax. Or, you can copy and paste the syntax you need from your last exercise (bibliography_responsive) into your new HTML file. I personally use the copy/paste method. I make less typing mistakes that way.
Set up your basic HTML on your own, then compare your syntax to mine (below) to see if you have everything you need.
This is what my HTML syntax looks like:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>TITLE GOES HERE</title> <link href="CSS-FILE-GOES-HERE.css" rel="stylesheet" type="text/css"> <!--[if lt IE 9]> <script type="text/javascript" src="respond.js"> </script> <![endif]--> </head> <body> </body> </html>
Change the title in your HTML to:
<title>Resume</title>
Set Up and Link Your CSS File
Create a CSS file called resume.css. Zero out the margins and padding using the universal selector (*).
*{
margin:0;
padding:0;
}
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="resume.css" rel="stylesheet" type="text/css">
Start the Structure
As usual, add your main_container div between the body tags:
<body> <div id="main_container"></div> </body>
Describe the div ID for the main container
The main_container div is a white rectangle. A safe, standard maximum width for a laptop is 990px. In addition, the main_container should open up as tall as needed to hold all of the information inside of it (it needs auto height). It is centered in the browser, and does not have a border. Try to write the syntax for the main container div on your own.
Do your best. When you’re done, double-check your syntax against this syntax:
#main_container{
max-width:990px;
height:auto;
margin-right:auto;
margin-left:auto;
background-color:#ffffff;
}
Give the Web Page a Gray Background
Try to do this on your own. If it doesn’t work, double-check your syntax against the cheat sheet.
View Your Web Page
Save your HTML document, and view it in your browser. You should see a gray page.
Type in Text So You Can See the Main Container
In your HTML document type some text in the main container div, like so:
<div id="main_container"> Resume layout will go here. </div>
Now that the main container has something in it, it should show up in the browser.
View Your Web Page
Add a Header and Columns
You already know how to make and describe a main_container div. For this lesson you need to make and describe multiple divs so they work together to build your composition. The laptop version of my design for this page needs a header, and two or three columns of text.
Put the Header and Columns Inside Your Main Container
In your HTML document, add the new elements inside your main container like so:
<div id="main_container"> Resume layout will go here <header></header> <div id="contact_column"></div> <div id="experience_column"></div> <div id="skills_column"></div> </div>
What does this all mean? You just added four new elements inside your main container. The header is an HTML5 element. It acts like any other recognized element: it can be styled in the CSS. For all intents and purposes, think of it as a div but with a recognized name (you don’t have to use an ID to identify it). Earlier browsers like Internet Explorer 7&8 do not recognize HTML5. I’ll discuss how to fix this later in the lesson.
Contact Column, Experience Column, and Skills Column are three divs you’ve added and identified with IDs. You’ve told browsers that the three new IDs are called “contact_column” “experience_column” and “skills_column”.
Note: I’m building my design for the page throughout this lesson. Make changes as needed to build your own design.
View Your Web Page
Save your HTML document, and view it in your browser. Nothing has changed. Why don’t you see the new elements?
You haven’t described them yet, so by default they are set to auto height… and there isn’t anything in them yet… so their heights are 0!
Type in Text So You Can See the New Elements
In your HTML document, delete the “Resume layout will go here” line of text… and type some new text in the new elements. Your HTML should look like so (crossed-out text is deleted, new text is in bold):
<div id="main_container">Resume layout will go here.<header>Name goes here</header> <div id="contact_column">Contact info goes here</div> <div id="experience_column">Experience goes here</div> <div id="skills_column">skills go here</div> </div>
View Your Web Page
Save your HTML document, and view the changes. The text shows up, but there aren’t three columns. You need to tell the divs to act like columns.
Describe the Header and Columns
You put the elements into the HTML, but didn’t describe how they should look. In the CSS document, give the columns a width. Use percentages so the widths will change as the browser size changes. In addition, give all of the new elements a background color so you can see them in the browser.
To do this, add the following syntax in the CSS:
header{
background-color:#CCEEFF;
}
#contact_column{
width:30%;
background-color:#EECCFF;
}
#experience_column{
width:40%;
background-color:#99FFCC;
}
#skills_column{
width:30%;
background-color:#FFEE99;
}
View Your Web Page
Yikes! The divs still fall in a single column along the left edge.
Place Elements with the Float Property
By default, the divs you’ve added to the page are block elements—they create a break (a new line) when you add them in. They show up in a single column of elements.
But you don’t always want a single column of elements. For example, on larger screens, you want the resume content to live side-by-side in three columns.
To fix the placement of the three columns, use the float property. You can tell an element to float left or right. For now, use a float:left.
In the CSS document, add the line float:left; to your three columns, like so (new syntax in bold):
header{
background-color:#CCEEFF;
}
#contact_column{
width:30%;
background-color:#EECCFF;
float:left;
}
#experience_column{
width:40%;
background-color:#99FFCC;
float:left;
}
#skills_column{
width:30%;
background-color:#FFEE99;
float:left;
}
View Your Web Page
Now the three columns sit side-by-side. Why? By adding the float:left, you told each div to float as far left as possible within it’s boundary (in this case, within the main container). Contact_column floats left to the edge of the main container, experience_column floats left until it hits contact_column, and skills_column floats left until it hits experience_column.
Everything works! If you want to learn more about floats, Chris Coyner provides a simple, yet thorough explanation at All About Floats.
Consider the Mobile View
So far, we’ve been looking at the page in a large browser. The three columns won’t work on a small device. We need to figure out the break point and add a media query. That’s easier to do once the content is in the layout.
Add and Define the Content
Start with the Header Content
In my layout the header only includes “Jamie Peterson Web Designer”
Put your header content in the header element, replacing the filler text like so (crossed-out text is deleted, new text is in bold):
<header>Name goes hereJamie Peterson Web Designer</header>
Since that’s the main headline, define it as your h1 like so:
<header><h1>Jamie Peterson Web Designer</h1></header>
Add the Contact Column Content
In my layout this column includes the contact information and Jamie Peterson’s professional statement. Select and copy all of the content.
In the HTML document, paste the content into the Contact Column div (new syntax in bold):
<div id="contact_column"> 34 Walnut Street Springfield, RI 02900 401-555-5982 jpeterson@twdexercise.com www.twdexercise.com A creative, self-motivated web designer with strong . . . </div>
Make Your HTML Easier to Work With
Ack! The text in the HTML document gets really long. If you are using TextWrangler, like I am, you can go to View > Text Display > Soft Wrap Text. This gives you a narrower column of text to work with, so you don’t have to keep scrolling back and forth in your HTML document.
Define the Information in the Contact Column
The content in this column is pretty straight forward. There are two paragraphs. The contact information and the professional statement.
Add the <p></p> tags like so:
<div id="contact_column"> <p>34 Walnut Street Springfield, RI 02900 401-555-5982 jpeterson@twdexercise.com www.twdexercise.com</p> <p>A creative, self-motivated web designer with strong . . .</p> </div>
Next, the contact information needs to be divided up into specific lines. Do this with <br> (line break) tags. While you don’t use line breaks to make text fit a column better, here the <br> tag makes sense. Line breaks in an address are a meaningful part of the content.
<div id="contact_column"> <p>34 Walnut Street<br> Springfield, RI 02900<br> 401-555-5982<br> jpeterson@twdexercise.com<br> www.twdexercise.com</p> <p>A creative, self-motivated web designer with strong . . .</p> </div>
View Your Web Page
The contact column has content. And it looks horrible! But let’s keep going.
Add and Define the Experience Column Content
In my layout this column includes all of Jamie Peterson’s professional experience. Select and copy all of the Professional Experience content.
In the HTML document, paste the content into the Experience Column div (new syntax in bold):
<div id="experience_column"> Professional Experience Website Design Company Springfield, RI An award-winning web design company, specializing in branding and building new initiatives for non-profit organizations. Web Designer May 2012-Present Working in a fast-paced environment, . . . </div>
This content is more complex. It has multiple levels of hierarchy. For example, “Professional Experience” is a main section of the resume. It should be set as an <h2>.
The names of the companies Jamie worked for should also be treated as headings. Set them as <h3>. Finally, Jamie’s various position titles could be emphasized. Set them as <h4>.
<div id="experience_column"> <h2>Professional Experience</h2><h3>Website Design Company</h3> <p>Springfield, RI</p> <p>An award-winning web design company, specializing in branding and building new initiatives for non-profit organizations.</p> <h4>Web Designer</h4> <p>May 2012-Present</p> <p>Working in a fast-paced environment, . . .</p> </div>
The remaining information can be set as paragraphs… except for the headings within the freelance work.
The section “Freelance Clients” belongs under the heading “Professional Experience” so it should not be set as an <h2>. I set mine as an <h3>. This gives it the same level of importance as Jamie’s employers. Then I set each freelance client as an <h4> like so:
<h3>Freelance Clients</h3> <h4>Jean-François Recruiting (2013-ongoing)</h4> <p>Branding, UX, and web design for a recruitment company.</p> <p>www.jfrecruiting.com</p> <h4>Studio Ten-Nine-Eight (2012)</h4> <p>Identity, business card design, web design, and a content management system for a film company.</p> <p>www.ten-nine-eight.com</p> <h4>yearnforyarn.org (2011)</h4> <p>Identity and web design for an organization that connects people who knit and crochet to groups in need of items.</p>
View Your Web Page
Two of the three columns have content. And the p, h2, h3, and h4 are set.
Add and Define the Skills Column Content
In my layout this column includes Jamie Peterson’s skills and education information. Select and copy all of the skills and education content.
In the HTML document, paste the content into the Skills Column div (new syntax in bold):
<div id="skills_column"> Skills Proficient in PC and Mac OS, Adobe Creative Suite, Search Engine Optimization Fluent in HTML, CSS, JavaScript, Flash and ActionScript, Visual Basic, PHP, MySQL Experience creating E-commerce sites Adept in Graphic Design and Typography Education BFA in Visual Design University of Massachusetts Dartmouth Dartmouth, MA 2007-2011 </div>
The content has two headings and a list. “Skills” and “Education” are main sections of the resume. They should be set as an <h2>. The education information is text and can be set as a paragraph. Since the line breaks are meaningful, you can use <br> tags.
<div id="skills_column"> <h2>Skills</h2> Proficient in PC and Mac OS, Adobe Creative Suite, Search Engine Optimization Fluent in HTML, CSS, JavaScript, Flash and ActionScript, Visual Basic, PHP, MySQL Experience creating E-commerce sites Adept in Graphic Design and Typography <h2>Education</h2><p>BFA in Visual Design<br> University of Massachusetts Dartmouth<br> Dartmouth, MA<br> 2007-2011</p> </div>
Under the “Skills” section is a list of skills. Lists are handled differently than paragraphs.
Define the List of Skills
The syntax for a list is <ol></ol> for an ordered list (a list with numbers) or <ul></ul> for an unordered list (a list without numbers).
The syntax for a list item in either list is <li></li>.
Since the list of skills is not ordered, use the <ul></ul> tags around the text. Define each list item with the <li></li> tags, like so:
<div id="skills_column"> <h2>Skills</h2> <ul> <li>Proficient in PC and Mac OS, Adobe Creative Suite, Search Engine Optimization</li><li>Fluent in HTML, CSS, JavaScript, Flash and ActionScript, Visual Basic, PHP, MySQL</li><li>Experience creating E-commerce sites</li><li>Adept in Graphic Design and Typography</li> </ul> <h2>Education</h2> <p>BFA in Visual Design<br> University of Massachusetts Dartmouth<br> Dartmouth, MA<br> 2007-2011<p> </div>
View Your Web Page
All three columns have content. Notice the list items have bullets by default.
Style the Text
Start With the Bulk of the Content
You might be tempted to start with the heading, because it comes first on the page. But since the bulk of the content on this page is text, start by styling the text. You need to make sure that works first. Then you can attend to styling headings that work with the text!
Generally, text should be set to 14–16px. I’ll set mine to 15px Merriweather. Merriweather has a large x-height, and a resume is not an article. If the text required sustained reading, I might make it a bit bigger.
Set your text (p) to the font and size that works for your design. Mine looks like this:
p{
font-family:'Merriweather', georgia;
font-size:15px;
}
Line-height should be approximately 150% of the type size. I prefer to work with even numbers, so will try a line-height of 20px to start—set yours the way you want to (new syntax in bold):
p{
font-family:'Merriweather', georgia;
font-size:15px;
line-height:20px;
}
View your Web Page
Look carefully at your p text. Mine is set at 15px / 20px (font-size:15px; / line-height:20px;) in Merriweather. It looks much bigger than the default 16px Times New Roman my list of skills is set in. This tells me that I can afford to make the type a little smaller.
What does your text look like? Does it need to be bigger or smaller? Do you like the font you’ve chosen now that you see so much of it on the screen?
The larger x-height and loose letterspacing in Merriweather undermines the horizontal flow. So even though I’m going to make the text smaller, I’m not going to make the line-height smaller. It needs to feel more generous than it does here.
What does your line-height look like? Too tight? Too loose? Just right?
Make changes as needed.
View your Web Page
My type looks much better at 14px / 20px. And the ragged edge in the third column is looking better too. This three-column layout might work out!
The list is still set in Times New Roman though.
Style the List Items
At this time I want the list items exactly the same as the text. To set the list items, describe the li element, like so:
li{
font-family:'Merriweather', georgia;
font-size:14px;
line-height:20px;
}
With the bulk of the text set to a good font, size, and line-height, it’s time to attend to line-length. Everything is crammed together though. It’s hard to see separate parts of the text because the margins and padding are set to 0.
Add Vertical Spacing Between the Paragraphs
Putting space between paragraphs helps readers scan text. I recommend using a space of at least 60% of the line-height. Since my line-height is 20px, I will use 12px for my paragraph space.
In the Bibliographies, you added space after paragraphs by setting the margin-bottom. You can also use a padding-bottom to create space. Practice using padding-bottom with the paragraphs, like so (new syntax in bold):
p{
font-family:'Merriweather', georgia;
font-size:14px;
line-height:20px;
padding-bottom:12px;
}
View your Web Page
The text has some vertical spacing. You’ll work on this later, but for now, it helps show where bits of text start and end. Which in turn, will help you look more closely at the measure.
Finding a Good Measure
A good measure (line length) is 45-75 characters per line. That’s a pretty wide range of characters. Robust paragraphs of text are often set with more characters per line, while “snippets” of text (similar to the kinds of text found in a resume) are often set with a narrower measure.
Why? Because resumes often have short lines (city, state / date / title) interspersed with the paragraphs. And the contrast between short lines of information and long lines of text can make a page look “bandy” (my highly-official word for “bands of space and text”).
Finding a good measure in this project will rely on creating acceptable ragged edges in the text. To start determining your measure, you need to put some space between your columns.
Add Space Between Your Columns
The columns of information would be easier to read if they weren’t crammed next to each other.
I often use padding-left on the columns—rather than margin-left. This is an old habit from the good old days when IE 5&6 had what was called a double-margin bug. These days, you can use margin-left to separate the columns if you prefer.
In the CSS, I add the padding-left like so (new syntax in bold):
#contact_column{
width:27%;padding-left:3%;
background-color:#EECCFF;
float:left;
}
#experience_column{
width:37%;padding-left:3%;
background-color:#99FFCC;
float:left;
}
#skills_column{
width:27%;padding-left:3%;
background-color:#FFEE99;
float:left;
}
Notice that when I added padding left, I needed to remove the same amount of space from the width of the column. Remember the diagram of a div in the very first HTML exercise? The true width of a div includes the left and right margins, left and right padding, and the width.
The total of all these horizontal measurements can never equal more than 100%. Why? If this happens, the floated divs will no longer fit inside of the main container. One of the divs will pop down to a new line.
(In fact, if you’re ever banging your head trying to figure out why a floated div is “all the way down there” instead of in a horizontal row with the rest of the divs, double-check your math! Your horizontal measurements may total up to more than 100%.)
View Your Page
Here’s what my page looks like.
Now that the columns of text have some space between them, I can see the Experience column is looking a bit bandy. That second line of text (ending with the word “initiatives”) looks really long compared to the job title and year. The text will feel more substantial if I make the column a bit narrower. As a bonus, that will give me a bit more room for the Skills column to get wider (so “Dartmouth” doesn’t pop down to the next line).
Adjust Column Widths as Needed
After a little experimenting, my final measurements are:
#contact_column{
width:25%;
padding-left:3%;
background-color:#EECCFF;
float:left;
}
#experience_column{
width:35%;
padding-left:3%;
background-color:#99FFCC;
float:left;
}
#skills_column{
width:31%;
padding-left:3%;
background-color:#FFEE99;
float:left;
}
This works well for me. My columns look like this:
Start the Media Queries
My current structure works for big devices. But the three-column layout is not going to work for any device much smaller than a laptop.
Determine Your First Breakpoint
Narrow your browser window, watching your text. Keep an eye on ragged edges. A key word to watch in my layout is “Dartmouth” in the Education section. Once that word drops down, there is no reason to continue the three-column layout.
That will be my first break point.
This breakpoint is at 898 pixels. I figured this out by taking a screenshot of the browser window at the point just before “Dartmouth” dropped down. The width of the screenshot is 898 pixels.
Add the Media Query for Large Browsers
At the bottom of the CSS file, type in your @media query. Try and do it on your own first! When you’re done, take a look at mine below:
@media (min-width: 898px) {
}
Next, copy and paste the column divs into the media query, then remove everything that is not specific to the large browser size. Remember: a media query should only target the specific values that are changing from one browser size to another.
From experience I know that column padding often changes from small to large browsers, so I’ll keep the 3% padding-left in my media query.
Here’s how mine turned out:
@media (min-width: 898px) {
#contact_column{
width:25%;
padding-left:3%;
}
#experience_column{
width:35%;
padding-left:3%;
}
#skills_column{
width:31%;
padding-left:3%;
}
}
This means: “if the width of the browser is equal to or more than 898px, set the widths and left paddings on the divs like this.”
View Your Web Page
Save and reload your web page. Notice that as you re-size the browser window, nothing changes. That’s because you haven’t told the CSS what the columns should do when the browser is a smaller width.
Set the Structure for Mobile Browsers
Mobile browsers are narrow, so your text should only be one column wide. And it should take up most of the window.
Set Column Widths for a Small Browser
When you made the Bibliography responsive, the text looked good with 5% padding left and 5% extra space on the right. Use that as a starting point and style your originalcolumns like so:
#contact_column{
width:90%;
padding-left:5%;
background-color:#EECCFF;
float:left;
}
#experience_column{
width:90%;
padding-left:5%;
background-color:#99FFCC;
float:left;
}
#skills_column{
width:90%;
padding-left:5%;
background-color:#FFEE99;
float:left;
}
View Your Page
Adjust the width of your browser window. The three columns fall in a single column when the browser is less than 898px — even though they all float left.
Why? Because the total width of any two columns is greater than 100%. The Experience column cannot fit next to the Contact column. It breaks to the next line. The same with the Skills column. And by making sure the three columns all have the same width and the same padding-left, they line up perfectly!
Notice that when your browser window is narrow, the measure works well.
Unfortunately, the measure gets way too wide before the page turns into a three-column structure. At some point, the text needs a two-column structure.
I need another breakpoint.
Determine the Second Breakpoint
What change do you want at your second breakpoint? For me, I want the structure to change to a two-column layout. It’s not easy to find that sweet spot. But I can start by identifying at what width I think the layout will look good if it had two-columns.
That width is 766 pixels.
Add a Media Query for Medium Browsers
When setting media queries, order is important! Always write media queries from smallest to largest. Otherwise, they load incorrectly.
Toward the bottom of the CSS file — but before your largest media query — type in your new @media query. Try and do it on your own first! When you’re done, take a look at mine below:
@media (min-width: 766px) {
}
Again, copy and paste the column divs into the media query, then remove everything that is not specific to the large browser size.
Then, set the widths for this medium-size media query. I’m estimating a 40% / 60% split for the two columns.
Here’s how mine turned out:
@media (min-width: 766px) {
#contact_column{
width:37%;
padding-left:3%;
}
#experience_column{
width:57%;
padding-left:3%;
}
#skills_column{
width:57%;
padding-left:3%;
}
}
This means: “if the width of the browser is equal to or more than 766px, set the widths and left paddings on the divs like this.”
View Your Page
When my browser width hits 766px, the structure turns into a two-column layout. There are a couple of problems that need to be taken care of. One, the second column of text is a bit too close to the right edge. Two, the Skills column is up against the left edge (instead of falling directly below the Experience column).
Refine Your the Media Query for Medium Browsers
The second column of text is too close to the right edge. You can fix that by making the column slightly narrower. The overall horizontal measurement will equal less than 100% and leave a bit of space between the ragged edge and the edge of the browser.
Mine ended up like this:
@media (min-width: 766px) {
#contact_column{
width:37%;
padding-left:3%;
}
#experience_column{
width:52%;
padding-left:3%;
}
#skills_column{
width:52%;
padding-left:3%;
}
}
The Skills column isn’t lining up under the Experience column. There are multiple ways to fix that problem, but since this may be your first complex responsive structure, you’ll fix it the easiest way. Make the Experience column’s left padding 43% (the total width on the Contact column plus the original 3% left padding on the Experience column.)
Mine ended up like this:
@media (min-width: 766px) {
#contact_column{
width:37%;
padding-left:3%;
}
#experience_column{
width:52%;
padding-left:3%;
}
#skills_column{
width:52%;
padding-left:43%;
}
}
View Your Page
The 766px breakpoint looks much better.
Change the width of your browser — making it wider and narrower. Does the layout work for all widths? Or do you need to establish another break point?
Determine Your (Potential) Third Breakpoint
My layout has an awkward spot in the flow from one- to two-columns. I call this awkward spot the “in between” browser size.
The browser is too wide for a single column, but not wide enough for two columns. In the image below, the text has a measure of 97 characters! A good measure is 45-75 characters.
The solution is to create a narrower single column.
For example, the line-length would be better if the text ended at the dotted line. That’s at about 75% the width of the main container. I can make a media query that says: when the browser reaches a width of 650px, make the columns 75% wide.
(How did I come up with a browser width of 650px? Honestly, I guessed. It’s approximately 150px narrower than the “medium” browser media query.)
I tried those numbers, and they didn’t quite work. After some experimenting, the best results were 70% column widths at a 550px browser width.
Add the “In-Between” Media Query
Again, order is important when setting media queries. Write them from smallest to largest. Just above the media query for medium browsers, type in your in-between @media query. Try and do it on your own first! When you’re done, take a look at mine below:
@media (min-width: 550px) {
}
Next, target the specific values that are changing from one browser size to another.
Here’s how mine turned out:
@media (min-width: 550px) {
#contact_column{
width:70%;
padding-left:5%;
}
#experience_column{
width:70%;
padding-left:5%;
}
#skills_column{
width:70%;
padding-left:5%;
}
}
This means: “if the width of the browser is equal to or more than 550px, set the divs like this.”
View Your Web Page
Every responsive structure is different. Your breakpoints (and your column widths) will be different from mine if you’ve used a different font, or a slightly different font size.
Mine work at these measurements for now. (Though they might need to change as the project progresses.)
Make adjustments to your breakpoints and column widths as needed.
Make it Work Cross Browser
You probably can’t tell in your browser, but your structure won’t work in Internet Explorer 6–8. Not yet anyway.
Add html5shiv.js for IE 6–8
While modern browsers recognize HTML5 elements like header, Internet Explorer 6-8 don’t. Html5shiv.js fixes this problem.
Add html5shiv.js to your page the same way you added respond.js to your page:
- Go to https://github.com/aFarkas/html5shiv
- Download the zip file (bottom of the right-hand column)
- Unarchive the zip file on your computer
- Put the file “html5shiv.js” in the same folder as your HTML document
- Add the the javascript syntax in the conditional comment you already have in the head of your HTML document.
<!--[if lt IE 9]> <script type="text/javascript" src="respond.js"></script> <script type="text/javascript" src="html5shiv.js"></script> <![endif]-->
Display:block HTML5 Elements for IE 6–8
Since IE 6-8 don’t recognize HTML5 elements like header, they also don’t know to treat these elements as block elements (elements with a break before and after them, like divs and headings).
To fix this, always add a line of syntax to your html5 elements, like so (new syntax in bold):
header{
background-color:#CCEEFF;
display:block;
}
Take Care of the Details
Remove Extra Colors
Now that your structure is set and your measure is correct, you don’t need all the extra background colors. Remove them from your header and your columns.
Practice your CSS skills by removing these colors on your own. Where are the colors? How might you get rid of them?
View Your Web Page
Once the colors are removed, you have a noticeable problem. The white main container doesn’t extend beyond the header.
Force the Main Container Open
Your main container has an auto height (height:auto:). So it should open up to be as tall as all the content inside it. But the main container doesn’t recognize floated divs within it (floated divs are out of sequience and will be ignored). The columns all float left. So it snaps shut after the header.
A quirky way to fix this problem is to add overflow:hidden; to your main container, like so:
#main_container{
max-width:990px;
height:auto;
margin-right:auto;
margin-left:auto;
background-color:#ffffff;
overflow:hidden;
}
What does this mean? By telling the browser to look for possible overflow inside the main container, you’ve forced the browser to pay attention to the floated divs inside the main container. The main container opens up to the full, appropriate auto height.
Validate Your Files
Once everything else is done, don’t forget to validate your files!
Don’t worry if your layout is not beautiful, exciting, or unique. You will modify elements, paying attention to emphasis and spacing in the next couple of exercises.
You have only begun the process.
Recommended Resources
- To learn more about breakpoints, read “Logical Breakpoints For Your Responsive Design” by Vasilis van Gemert
- To get html5shiv.js and read instructions, visit https://github.com/aFarkas/html5shiv
Resources for This Project
- My (empty) mock-up_templates — eps and inDesign files
- how to download Google fonts to use in a mockup