Head First Web Design

Chapter 4. Layout and Design: Follow the Golden Rule

It pays to be a good listener... and to carry a pocket calculator. We’ve been talking about user-centered design for a few chapters, but here’s where you really put your listening skills to the test. In this chapter, you’ll take your users’ feedback and build a site that meets their needs. From browsers to screen real estate, it’s all about giving your users what they really want. Not only that, you’ll learn the secrets of the rule of thirds. Find out how a few easy presses of the calculator, a ruler, and some gridlines can turn your blase web page into a thing of beauty.

Design is about audience

The design and layout of your site is the lens though which your users view and experience your content. If you have a confusing layout, your users are going to have a bad experience. However, if you develop a design and layout that is both functional and aesthetically pleasing, your users are not only going to hang around your site longer, but they’ll want to come back.

The first step on the road to putting together a design which appeals to your users is to actually know your users. It’s a lot harder to come up with a design that meets their needs if you don’t know who they are (and what makes them tick).

Sharpen Your Pencil

Who’s your site’s audience? Take a look at these two sites, and write down who you think the specific audience of each site is.

Sharpen Your Pencil Solution

Let’s take a look at the possible audiences for these sites.

Your newest gig: RPM Records

A local record store—RPM Records—decides they want to redo their horrendous site that was created for them way back in 1998. They not only want to bring their site up to date, but they want something that really meets the needs of their customers. The kicker is that they are also one of the sponsors of an upcoming progressive music festival, and they would look really silly if they were still using their old site by the time the festival starts.

You’ve got to redo RPM, make it look great, and ensure current users can get around easily.

Brain Power

How would you design a site that looks great and meets the needs of existing RPM customers?

Pinpoint RPM’s audience with personas

When you’re designing for, a specific audience, you’ve got to know what they like, and how they’d use a site. But you can hardly deal with hundreds—maybe thousands, even millions—of users all at once!

This is where a persona comes into the picture. A persona is a single user that stands in for all of your audience—a fictional user that has the most prominent characteristics of all your intended users. Those characteristics should relate to things that impact their web experience and browsing habits, like the browser your audience favors, or how long your audience spends online each week.

Your personas should be based on real data.

So where exactly does all of the data used to build personas come from? Well, it can come from a lot of different places. Technical stuff (like operating system and browser) can come from server statistics. Information about how your users behave online can come straight from the users themselves—using tools like surveys and focus groups. The point is that when you build a persona, you are not pulling characteristics out of thin air.

Let’s look at some data about the RPM users that we can use to build accurate personas for the new RPM site. The RPM owner had some old surveys he’s given us to work with:

Data about RPM Music’s users

Exercise

Based on the RPM user data, create two different personas for the RPM Music Store redesign. For the first persona, take the top value for each of the categories. For the second persona, use the secondary value.

Building two personas widens the audience you can build your site for.

When you are building a persona, you’re creating a representation of the primary characteristics of your audience. But most of the time, your audience isn’t composed of just one type of person. You’ll have lots of users who do not fall in line with the characteristics that you identified for your first (primary) persona. This is where the secondary persona enters the picture.

A secondary persona represents the characteristics that are next in line behind the majority characteristics that you used to build your primary persona. So you design first for your primary persona, but then you can also work on meeting the needs of your secondary persona, too. The result? A site that meets more of your audience’s needs and makes more of them happy.

There are no Dumb Questions

Q:	Q: So do I always have to build 2 personas?
A:	A: You don’t have to, but it’s a good idea. Audiences are diverse. You aren’t always designing for one specific type of person. The second persona represents those audience members who are in the minority... but sometimes by only a percent or two.
Q:	Q: Can I build more than 2 personas?
A:	A: Absolutely. If your audience is diverse enough (as shown by your audience research), it might be a good idea to have personas that represent other audience characteristics. Be aware, however, that you really don’t need more than three. Too many personas just add confusion and detract from the project at hand.

Exercise Solution

Based on RPM user data, here are two personas (a primary one and a seconday one) we can use for the design and implementation of the RPM Music site.

Let the personas be your guide...

So now you’ve got your two personas, and it’s time to ask: “What would Jon do?” “How would Susan react?” Instead of designing for hundreds or thousands of faceless users, you’re now designing for your personas... and only your personas.

So let’s look at the old RPM site once more, in light of Jon and Susan. What do they think about the site?

Smaller displays limit screen real estate.

Jon uses an 800x600 screen resolution, which isn’t very big... and, of course, if Jon uses that resolution, then most of the RPM users do, too.

With a lower resolution like 800x600, parts of the RPM site aren’t showing up, and Jon’s having to scroll all over the place just to see everything. Not so usable... and sure to cause problems.

It sounds like RPM’s old site was designed without much regard for screen real estate... and that’s the first thing we can try and fix.

Brain Power

Is it better to design a site that looks perfect on one specific resolution—the most common one used by your audience—or a resolution that looks pretty good on lots of resolutions, but not quite perfect on any?

Resolution impacts design and layout

Screen resolution affects the screen real estate your site has to work with. Higher resolution means more available space... but also tends to make things look smaller to users.

Let’s look at the old RPM site in several different resolutions:

Screen real estate determines how MUCH of your site will display in your user’s browser

Think about screen real estate as the size of the canvas upon which you will build your website. But the thing is, that canvas size isn’t fixed. Some users have large 30” displays, some have nothing but a tiny iPhone. Even worse, a lot of users actually access your site on multiple screens: a phone on the go, a 21” monitor at work, and a 14” AirBook at home.

Screen RESOLUTION also affects screen real estate

Then there’s screen resolution. Even on a 21” monitor, users can choose their resolution: from 640x480 to 1600x1200, with a ton of different (and often unusual) choices in between. A higher resolution means that things appear smaller—and you’ll have more virtual space for your site to work with. A lower resolution means that things on our site appear bigger, so you’ve got less virtual space to work with.

Your users don’t care about screen real estate... they just want sites to “work.”

Have you ever seen a site that has an opening message like, “Site best viewed in 1024x768?” Have you ever actually gone in and messed with your screen resolution based on one of those messages?

Yeah, not so much.

It’s up to you, the web designer, to make sure a site looks right for your audience. You can’t count on users changing their resolution or the device they use your site on... at least not if you (and your client) want to stay in business. So we’ve got to figure out a way to make RPM a lot easier to use for Jon, who’s sporting an 800x600 screen resolution, and Susan, who’s using 1024x768.

Sharpen Your Pencil

Below are methods for dealing with different screen resolutions. Take a look at each one and write down a pro and a con of each.

Methods

Use JavaScript in your page to automatically detect a user’s current screen resolution, and direct them to a version of the RPM site that works best with that resolution.	_Pros:__________________________________ _______________________________________ _Cons:__________________________________ _______________________________________
Use JavaScript to load a CSS stylesheet appropriate for each user’s screen resolution.	_Pros:__________________________________ _______________________________________ _Cons:__________________________________ _______________________________________
Design a single version of RPM that works fairly well with a wide variety of devices and screen resolutions.	_Pros:__________________________________ _______________________________________ _Cons:__________________________________ _______________________________________

Sharpen Your Pencil Solution

Your goal was to write one pro and one con for each of the different methods for managing screen resolutions. What did you come up with?

There are no Dumb Questions

Q:	Q: I understand screen real estate, but I’m having some trouble with screen resolution. How exactly is the resolution of a screen measured?
A:	A: Screen resolution is measured in horizontal and vertical pixels. So a small display may have a screen resolution of 640x480. This means that the monitor displays an area of 640 pixels wide and 480 pixels high. A resolution of 800x600 means 800 pixels wide and 600 pixels high, and so on. It’s also important to note that it isn’t just computer displays that measure their resolution in pixels. Televisions (LCDs, DLPs, etc.) all use the same method of representing screen resolution. For example, a 720px HD television has a screen resolution of 1280x720.
Q:	Q: Are there really that many screen sizes and screen resolutions that I need to think about when I’m designing my site?
A:	A: Absolutely! Even when it comes to traditional desktop computers, you’ve got to be concerned with a wide variety of screen resolutions. Computer screens can range in resolution from the very small, 640x480, to the very large, 2560x1600. And that doesn’t even count mobile devices (iPhones, cell phones, PSPs, etc.) and those other consumer devices that allow you to browse the Web (like the Nintendo Wii, for example). Ultimately, it all comes down to doing your research and knowing your target audience—and developing a persona that takes the important user characteristics into account. If you know that your primary persona generally views websites at a lower resolution, you don’t have to worry too much about designing for higher screen resolutions and larger displays.
Q:	Q: Ok, I get the fact that I’ve got to worry about lots of different screen resolutions and display sizes. But is there one screen resolution that is most widely used?
A:	A: It’s all about your audience. If you’ve done your research and you know your audience, you can probably decide upon a target screen resolution that you can design for. However, if you don’t know anything about your audience (or if your audience is very general), most web statistics agree that about 54% of users have a screen resolution of 1024x768. For more cool statistics, check out http://www.w3schools.com/browsers.
Q:	Q: How will I know if my site works on a certain screen resolution?
A:	A: Test, test, test. Build your site, and then change the screen resolution on your display to test out your design. If you are designing for a specific resolution, build the site from the ground up in that resolution. If you are designing for another kind of device (mobile device, etc.), be absolutely sure you’ve got one of those devices around in order to test your site on it.

Build an XHTML and CSS foundation optimized for 1024x768

Test Drive

Create a very simple test page.

We don’t have much to RPM yet, but go ahead and create index.html and stylesheets/rpm.css, and load them up in your web browser.

Knowing your audience lets you make informed decisions.

Jon uses 800x600, but if you check the RPM user survey back in Data about RPM Music’s users, 800x600 just barely nudges out 1024x768. Since we know that, we can build a site that actually looks ideal on 1024x768... but that also looks pretty good on 800x600, too. That’s the power of personas: you’ll have a good idea of how the decisions you make may affect your audience.

RPM Music 2.0

	Reach all my current customers.
	Update the look and feel of the site.
	Provide a blog, but as secondary focus.
	Feature records on the home page.

Exercise

Which of the RPM site features have we addressed? Any of them? None of them? Check off any boxes you think we’ve handled (or at least worked on). Then write down your ideas about how to take on the remaining features for RPM Music 2.0.

________________________________________________________________________

________________________________________________________________________

________________________________________________________________________

________________________________________________________________________

________________________________________________________________________

Frank: I’m not so sure. I actually think we’ve got a good handle on his first requirement: “Reach all my current users.”

Joe: You mean because we can get text to look right on 1024x768 and 800x600?

Frank: Well, that’s part of it. But our personas—

Jim: Jon and Susan? Enough with the fictional characters already!

Frank: No, I’m serious. I really think if we can please them, we’ll have reached RPM’s core audience.

Joe: How do you please a persona? I mean, how do you know if you’ve designed for them?

Jim: Maybe you can send a fictional survey to their fictional address. Offer them a fictional gift for responding...

Frank: Okay, okay... yeah, we can’t exactly ask Jon or Susan what they think. But we know they’re young, that they’ve got modern computers...

Joe: ...so you’re saying that if we design something that’s pretty modern, then they’ll like it?

Frank: Exactly.

Jim: Okay, just for a moment, let’s say I buy into all this persona stuff. What is modern? I mean, how do you make a site look clean and hip and all that stuff? Isn’t it just aesthetics? Like it’s all in the mind of the designer?

Frank: Not at all. In fact, I was just reading about something pretty cool: the Golden Ratio.

Joe: Is that like the Golden Rule? Do unto others...

Frank: No, the Golden Ratio is a cool way to make sure a site looks pleasing to the eye. Let me show you...

Humans like things lined up and well-organized

What makes a beautiful site appealing to us? What makes an ugly site so unattractive? Well, most of the time, it’s all about how our eyes perceive the elements on the site. There is nothing worse than a print document or a web page in which graphics and text have been thrown in haphazardly. Our eye needs predictability and a certain amount of visual logic when absorbing information.

Imagine if you laid out a grid on top of your favorite sites. Do things line up along a grid? Are there strong horizontal and vertical spaces that allow you to group the page into sections? Take a look at a grid-based site... and the old version of RPM:

How wide should my grid be? Use the Golden Ratio

The grid is one of the oldest graphic design tools out there. It’s so old that it predates “modern” graphic design. Way back during the Renaissance, painters started using a grid based on the Golden Ratio in order to compose their paintings. Golden Ratio? What the heck is that? Well, if you take a length of a line and multiply by .62, you get a ratio that can be used to create a pleasing, natural-looking grid—that’s the Golden Ratio!

The whole idea behind the Golden Ratio is to use a balance that we’ve all seen around us our whole lives, and put that balance into use on a website. The result? Sites just “feel” and “look” right to our eyes. Just take a look at a few examples of the Golden Ratio in action:

The rule of thirds: A shortcut to the Golden Ratio

The Golden Ratio says that if you take the entire width of something, and multiply it by 0.62, you’ll get a nice wide area that you can put content into. The remaining 0.38 is great for sidebars, extra content, things that the eye should look at second.

But multiplying by 0.62 isn’t that handy unless you’re carrying around a pocket calculator (Head First Algebra, anyone?). Fortunately, 0.62 is awfully close to 2/3... and the remaining 0.38 is pretty close to 1/3. So if you divide something into thirds, two of those thirds are perfect for your main content, and the remaining 1/3 is great for sidebars, navigation, blogs...

Here’s what you should do:

Step 1: Take a piece of paper, and draw a rectangle to represent your site. Then divide your rectangle vertically by thirds (use a ruler, or just estimate carefully).

Step 2: Divide the rectangle horizontally by thirds. Now you’ve got a very loose grid.

Step 3: Divide each of your vertical columns into thirds. Now you’ve got a sort of grid-within-your-grid so that you can actually use the 2/3-to-1/3 ratio in smaller chunks of your site, too.

Step 4: Lay out your site, aligning things with your gridlines.

RPM and the Golden Ratio: An (anti) case study

So if the eye really likes to see things in a 2/3-to-1/3 ratio, how does RPM’s site stack up? We already know it doesn’t really follow any particular grid alignment. But what if we overlay the 2/3-to-1/3 ratio graphically... what does it tell us about RPM?

Exercise

Based on the grid below, sketch out a storyboard for the RPM Music site. Try and keep up with how your elements are laying out, not only against the grid, but in relation to each other. Is an element part of the main content? Try and make it the 2/3 part of a 2/3-to-1/3 ratio. Just do your best... there’s no perfect answer if you keep things in proportion.

Important content should “weigh” more.

You should already be putting your most important content into the 2/3 part of your 2/3-to-1/3 page ratios. But is that the only way to draw attention to something? Not at all!

When you’re laying out your page, you’re creating a balance between larger elements and smaller ones. The larger elements have more weight, and the smaller ones have less weight. Plus, there’s how the elements relate to each other:

When you are laying out your web page, you need to consider two kinds of balance: symmetrical and asymmetrical.

Symmetrical balance occurs when elements on either side of a line (either horizontal or vertical) have the same weight.

Asymmetrical balance occurs when the weight of a site’s elements is not evenly distributed around a central line. So you’ve got one really large element only partially offset by other, smaller elements.

Exercise

Revisit your solution to the exercise in Exercise. Is your layout symmetrical or asymmetrical? Do you think balancing (or unbalancing) your layout is an improvement? Make any changes you want to, and then turn the page to see what we came up with.

Exercise Solution

In this exercise, you had to draw a storyboard for the RPM Music site based on the browser grid. There’s no right answer, as long as you came up with a balanced layout that follows the Golden Ratio.

Remember your personas?

Take a second and look back at your answer in Exercise Solution. Is it balanced? Symmetrical or asymmetrical is okay. Did you follow the Golden Ratio?

But that’s not all you have to worry about. Remember, you should be designing for your personas, who have some pretty specific concerns.

Remember your client?

The RPM owner also had a lot of requirements. Did your vision of RPM 2.0 meet what he’s looking for?

There are CSS frameworks that provide grids for our content to “sit” against.

When you’re actually building your page in XHTML, it’s not always easy to line things up as well as you can with paper, pencil, and a ruler. Fortunately, there are a lot of cool CSS frameworks that will provide a grid for you. One of the best of these is Blueprint: http://www.blueprintcss.org/

Note

You can Google for “CSS framework” or “CSS grid framework” to find several other options.

One of the best things about Blueprint is that it provides an enormous amount of flexibility in terms of the types of layouts you can create. It also provides support for styling form elements and status messages—something you don’t see in a lot of other frameworks.

Set up RPM 2.0 with the Blueprint Framework

Make sure you’ve got the simple version of index.html and rpm.css from Build an XHTML and CSS foundation optimized for 1024x768. Then visit blueprintcss.org and download Blueprint. In the unzipped directory, you’ll find a /blueprint folder that has all the files you need. You can drop the stylesheets in this folder right into the stylesheets folder of the RPM 2.0 site you’re building:

Exercise

Go ahead and create any parts of this directory structure you don’t have. Download Blueprint and add in its CSS files to your site structure. Then, link in ie.css and screen.css in your version of index.html. Use the examples that come with Blueprint as a model, especially for how ie.css is referenced.

Exercise Solution

Go ahead and create any parts of this directory structure you don’t have. Download Blueprint and add in its CSS files to your site structure. Then, link in ie.css and screen.css in your version of index.html. Here’s what you should have come up with:

There are no Dumb Questions

Q:	Q: What exactly is a framework?
A:	A: These days “framework” is really just a buzzword in web design and development. A framework is just a set of tools, libraries, conventions, and best practices that are designed to abstract day-to-day, routine web design tasks into generic modules that can be reused. The goal of a good framework is to allow you to focus on tasks that are unique to your specific project, rather than more repetitive, mundane tasks (like laying out a grid in CSS!).
Q:	Q: I get that Blueprint is good, but are there other grid-based CSS frameworks?
A:	A: Yup–there are lots and lots out there. Some of the most prominent are 960 and Yahoo UI (YUI) Grid CSS.
Q:	Q: 960? How does that measure up against Blueprint?
A:	A: Like Blueprint, 960 (http://960.gs/) provides a great deal of flexibility in the types of layouts you can create. Unfortunately, it doesn’t provide as much built in support for typographic styling as Blueprint. The cool thing about 960 is that the files package not only includes the necessary CSS files, but also includes some handy dandy extras, such as a paper template grid (based on the 960 framework) that you can use to sketch out your designs.
Q:	Q: What about YUI Grid CSS?
A:	A: YUI Grids CSS (http://developer.yahoo.com/yui/grids/) is part of the Yahoo User Interface Library. Like Blueprint and 960, it provides a fair amount of flexibility in terms of the types of layouts you can create. Unfortunately, YUI Grids CSS is somewhat complicated, making its learning curve a little steep. On the plus side, the YUI Grids CSS site has the YUI Grids Builder tool, a visual, menu-based editor which allows you to rapidly create (and customize) layouts based on the YUI Grids CSS framework.
Q:	Q: I’m still a little confused about which framework to choose. Can you give me some more advice?
A:	A: As with a lot of things, the framework you choose is entirely dependent on your needs. A good rule of thumb is to choose a framework that balances simplicity (especially if this is your first time using a framework) with flexibility, in terms of the number of different layouts you can build. Blueprint is the most popular and flexible out there. But, honestly, give them all a try. You might find one that better suits your needs. Remember, frameworks are all about alleviating your CSS workload. So whichever one you choose, make sure it works for you, and you don’t work for it!

Use Blueprint CSS rules to style RPM 2.0

With Blueprint CSS rules available, now you can go to work on RPM 2.0’s XHTML. Just use the class attribute on your divs, like this:

So the “header” div will span 24 30-pixel columns here, which is the entire width of the page. Within that div, you might have other divs that have a span of span-16 and span-8, to get to your Golden Ratio.

Go ahead and make these additions to your copy of RPM’s index.html:

Time to get your RPM groove on

At the Party with Hector Rivera

Hector Rivera, the king of New York Latin Soul, really makes a splash with his 1966 release “At the Party” climbing into the R&B Top 40. This classic album will have you dancing all night long and is sure to become one of the favorite records in your collection.

Hawaii with a Bongo Beat

LeRoy Holmes has done it again with this Hawaiian-Nashville fusion album, sure to take you back to the islands or the country. Pick up this record and listen to your favorite tropical classics like “The Moon of Manakoora” and the always delightful “Mahilini Mele.” Great music for the whole family.

Dreamin’ Wild

The hunky duo of Donnie and Joe Emerson bring you this psychedelic rock album for the ages. Their smash hit “Don’t Go Lovin’ Nobody Else” will have you humming for days. This is a collector’s item and is only being offered for a limited time here at RPM Music. Get it while it’s hot.

XMAS A Go Go

This week’s mystery LP looks to be a great addition to any Christmas music collection. This just showed up one day in the RPM Music warehouse, and we’ve priced it to sell. Get your piece of mystery history with XMAS A Go Go.

Exercise

Add the above content to the main <div> of the RPM site in the index.html file you’ve been working with. Think about ways to insert your content to match what it is: a bunch of similar items that aren’t ordered, but may need to each be styled. You can download the album covers from Head First Labs:

http://www.headfirstlabs.com/books/hfwd/ch04

Fireside Chats

Tonight's talk: Who's more important to the user? Content and Style discuss who matters more when it comes to the user's experience.

Style:	Content:
You know, I really don’t think that there’s much to discuss here. I mean, the Internet is a visual medium, and people want something nice to look at. No one is going to care about the content if the site doesn’t look good.	Â
Â	Nothing to discuss? How quickly you forget the humble origins of the World Wide Web. Berners-Lee proposed HTML to help researchers share and update information, specifically scientific research. Content was king back in the early days.
Yeah, back in the way early days. But today, style and design are the branding of a site. They’re what gives a site its character and personality.	Â
Â	True, but even well-designed sites with the most cutting-edge CSS won’t hold up without well-written content. Graphics and one of those fancy three-column layouts can only get you so far. I have to be clear, short, and easy to read. Otherwise, people lose focus. And don’t even get me started on what happens if I can’t answer the questions visitors are looking for. It’s a lot of pressure!
Well there’s just as much pressure on me. What about navigation? Huh? If I don’t get people from one part of a site to another, they’d never even find you. Not to mention screen size, text size, and the usability of all these things I’m doing. It’s quite a bit to manage and not as easy as you may think.	Â
Â	Navigation? An unordered list and some text links should do just fine. You graphic designers...
What is this, 1995? Unordered lists and text links without CSS? Boring.	Â
Â	<markup> Style, are you still complaining about Content? Don’t you remember when you were right there next to him? I helped you get there with tags like <font>, <i>, <b> and <table>. </markup>
Hey, who invited this guy?	Â
Â	<markup> Stylesheets are great, but remember how it used to be? Endlessly-nested tables, markup filled with hex colors, and the always lovable spacer GIF. </markup>
I told you, we don’t talk about that anymore. We were all young and stupid then, with a complete disregard for the separation of markup and style. By the way, where’s Content?	Â
Â	Sorry, that markup guy has a tendency to follow me around sometimes. However, he makes a valid point. You used to be just tags in the HTML mess.
So that was good? Now that I live in CSS documents, I’m much more useful and not so bogged down by all the stuff that markup is doing. It’s definitely better for me. If anything, I’m really doing you a favor, too. Now you get to stand alone... for whatever that’s worth.	Â
Â	You have cleaned up the files quite a bit by moving into the /stylesheets directory. It really has given markup and me a chance to get to know each other better. It’s amazing what you can do without all your meaningless style tags all over the place.
Is that supposed to be a compliment? You know, it has been a lot easier for me not having to deal with all your <p>s everywhere. Just don’t forget to include me in your head.	Â

Exercise Solution

Here’s how we marked up the album covers, descriptions, and titles in our version of RPM 2.0. What did you do?

Test Drive

How’s RPM 2.0 looking?

Update your version of index.html, and load it up in your browser.

Add some CSS to clean up the layout

Some simple additions to rpm.css should clean up things considerably:

Test Drive

RPM 2.0(1) is ready to test.

Update your version of rpm.css, and reload the RPM site.

Finish off the content and navigation markup

Let’s add a little more content to show the RPM owner just how far we’ve come. Make these changes to your copy of index.html:

Vertical ratios usually require images and CSS positioning.

It’s relatively easy to get your horizontal ratios right using a CSS grid framework like Blueprint. But how do you get a vertical ratio going, like between a main header image and the rest of a site’s content?

You can start by sizing your image to take up about 1/3 of the typical user’s vertical screen real estate. But then you’re having to use a lot of different images, and possibly even the dreaded 1-pixel transparent spacer. And what about the parts of the page within the header: a navigation bar, the site logo, any headings... it can turn into a mess—fast.

A better solution is to put together a background image that has things in the correct proportions, like this:

Add layout and typographic details with some more CSS

Here are some more CSS rules to help clean up and format all the new XHTML you just added. Make these additions to rpm.css, too:

Relax

Focus on design, not the CSS.

It’s okay if you’re not 100% sure on all these CSS rules. You can pick up Head First HTML with XHTML & CSS for more details. For now, focus on the look we’re creating, and how it’s balanced, organized, and follows the Golden Ratio.

Test Drive

RPM is ready to go live.

Update index.html and rpm.css, and download any images you don’t already have from Head First Labs. Then see what all your work has produced:

Bullet Points

• A survey is an excellent way to get broad information about your audience.

• A persona is an archetype user that embodies and represents your audience.

• Screen real estate refers to the amount of space on the screen of the device that the designer has to work with.

• The lower your resolution, the larger items will be and the more screen real estate they will take up.

• A grid can provide order and visual logic when you are designing your layout on paper.

• The Golden Ratio can produce designs that are more pleasing to the eye.

• The rule of thirds is a quick and easy way to create grids that are based on the Golden Ratio.

• A CSS grid-based framework is a specialized CSS file that contains all of the necessary styles for laying your site out along a grid in CSS.

• The goal of a CSS grid-based framework is to allow the designer to focus on tasks that are unique to their specific project, rather than reinventing the wheel each time around.

• Block hover navs provide users with information as to where they will end up when they click on the link.