GD 66 Class 06 + 07

Class 06 Topics:  Responsive Web Design (RWD), Meta tags, Text Properties, CSS Box Model.

Class 07 Topics:  Responsive Prototype, Midterm Presentations Review, Links Best Practices, Link CSS, In-class lab time.

 

Announcements


Class 06


Assignments

Please be sure all your assignments are posted to your WordPress site. I’ll post your grades for Assignment 1-4 and Quiz 2 by next week,

Grading Scale

A=90-100%
Superior performance. Excellent achievement and craftsmanship in all work. Performs beyond assignment requirements.

B=80-89%
Above average performance. Consistent progress and craftsmanship. Meets all assignment requirements.

C=70-79%
Average performance. Minimum time and effort spent on assignment. Fulfills basic assignment requirements.

D=60-69%
Uneven performance. Minimal output and improvement in work. Requirements are only partially fulfilled.

F=60% and below
Fails to meet a minimum of performance levels. Does not exhibit achievement or progress.


What does it take to create a responsive design?

Three core ingredients:

1. A flexible, grid-based layout,
2. Flexible images and media
3. Media queries

Flexible images

The max-width: 100%

the max-width: 100% rule can also apply to most fixed-width elements, like video and other rich media


Make it Responsive

Demo page: http://www.everythingaboutweb.com/classes/examples/html5-two-column-style-responsive/

Be sure to do the following:

  • In the HTML, remove height on all images.
  • Add the following code to the head of your HTML document


Add Media Queries to the end of your CSS

For more information about Media Queries


Wireframes

A wireframe is a bare-bones layout of a web page. It is a simple drawing of the chunks of information and functionality for key pages in the site. You will want to create a wireframe for the home page, each unique second level page, and any other significantly different pages on the site. Wireframes include the containers for all the major elements of the page. Elements include navigation, placeholders for images, content and functional elements (like search), and footer. Wireframes do not include any reference to color, typography, or visual imagery.

Wireframes are NOT normally visual design (typography, colors, images, final layout, etc.). Wireframes are a rough draft of required content only.

Wireframes focus on required elements and their relative importance without the added complexity of visual design. Wireframes are an inexpensive way to test structural design ideas. Making major changes to a wireframe is simple compared to making major changes to a visual design.

How to read a Wireframe

Fuzzy-Math-How-to-read-a-wireframe

PDF: How-to-read-a-wireframe Fuzzy-Math

Example of Wireframes

http://support.balsamiq.com/customer/portal/articles/615901

Another Example

3ov4SLv

Wireframe Template for Responsive Web Design
http://www.rubbercheese.com/blog/comments/a-wireframe-template-for-responsive-web-design

Free Photoshop Wireframe Kit
http://rafaltomal.com/free-photoshop-wireframe-kit/


Meta Tags


Text properties

Other text properties available in CSS that you probably won’t use as often are as follows:

  • font-weight specifies how heavy/bold the text is, and can take values of 100, 200, 300, 400, 500, 600, 700, 800, or 900 (each one is progressively bolder), or it can take simpler human-readable values of lighter, normal (the default), bold, bolder. Bear in mind that not all fonts will accept all of these values, so you may need to do a little experimentation.
  • font-style specifies what variant of the font should be used, and takes values of italic, oblique, or normal (the default). This is likely to be used only if you absolutely need to style something to look italic but don’t want the associated semantic emphasis. oblique is similar to italic, the difference being that italic uses any available italic font of the font family being used, whereas oblique just takes the normal font and adds a slant to it.
  • font-variant specifies usage of a small-caps variant of the applied font, in which upper case letters are rendered normally, and lower case letters are rendered as smaller versions of their upper case equivalents. To set this on an element, use the declaration font-variant: small-caps;.
  • line-height specifies the height of each text line (just the line the text sits on; not the text itself), in whatever unit you choose. You can see this in use in the next chapter.
  • text-transform transforms the textual content of an element. Possible values are capitalize (capitalises all words), lowercase (makes all letters lowercase) and uppercase (makes all letters uppercase).
  • text-decoration specifies different types of decoration on the textual content of an element. Possible values are blink (makes the text blink on and off), underline (draws a line under the text), overline (draws a line above the text), and line-through (draws a line through the text).

Line lengths

One easy thing you can do to make things more legible is to make the content narrower. A general guideline is to make your text columns about 60–70 characters in length for easier reading.

Text Sizing

An em is a scalable web measurement unit that is always equal to the current font size of the document, so for example if a default font size of 16px is currently being used for paragraphs, 16px is equal to 1em. Setting a font size of 2ems will always make the font double the default size. There is another equivalence to note here too—since 2ems doubles the font size, 2ems is equal to setting the size as 200%, while 80% will equal 0.8ems and 100% equals 1em, etc.


CSS Box Model

Since we are talking about layout here, it is time to introduce another fundamental concept that you should understand when working with HTML and CSS: the box model.

This is the model browsers use to work out how much space HTML elements take up on the page, and how much space to put between them. By default, block elements in your HTML appear one after another in the same order you placed them in the document (also known as source order), with some default margins separating them, and other default styles applied. Inline elements are placed one after the other inside block elements, kind of like placing some smaller boxes inside a larger box.

The space around a block element

Now let’s concentrate on a single block element. There are three layers that go around the element’s content, rather like the layers of an onion.

So the layers in the box model are content, padding, border, and margin. Also note the inclusion of height and width on this diagram. When you set the width and height properties of an element, you are actually just setting the width and height of the content. All the other layers add extra width and height on top of that. Study this carefully, and remember the order they are in—it will make it easier for you in future when you are solving content placement problems!

Remember this:

To calculate the overall width of a box, including all padding, borders and margins, you would use the following formula:

total box width = content area width + left padding + right padding + left border + right border + left margin + right margin

When two margins meet

When two vertical margins meet—for example, when a bottom margin is set on an element, and a top margin is set on the element directly below it—the margins collapse into one another, and the resulting margin is the same size as the larger of the two original margins.


Class 07


Midterm Project

Examples of deliverables:

http://gd66.smcgrdes.com/archive/section_4241/GD66-midterm-examples/


Responsive Prototype

Using Media Queries, make the home page of your midterm project responsive. Be sure to refer to our HTML exercise we did in class. See the links above in the “HTML5: Moving towards responsive.”

Example of Responsive Prototype

Alima Pure Cosmetics Responsive Prototype
http://www.everythingaboutweb.com/classes/examples/midterm-flexible-queries/final_web/

Please note: Make your images around twice the size needed in order for the images to scale and respond “responsively.” For example, if your footer image is 960 pixels in width, create a grey box for the footer that is 1900 pixels in width. You may allow the height to scale accordingly so the image will be larger in height also.

Don’t forget to put this in the <head> of your HTML files:

Suggested breakpoints

To stack your divs on top of one another, change the properties to these: width: 100% and float:none.


Midterm Presentations

Midterm Presentations will be Tuesday, April 7. You must present your midterm project in order to receive your grade.

Presentations are an opportunity to receive feedback from me and your peers. Be prepared to talk about your design process and what choices you’ve made with your design. Act like we’re the client and tell us things important when presenting to a client:

  • Prepare to speak for 5-10 minutes about your project.
  • Show us the deliverables for the midterm project.
  • Who is the target audience? How does your design meet the needs of the target audience? In what way does your design appeal to this audience?
  • What are the needs of the client? Talk about the needs and objectives and how your design serves these needs.
  • Talk about the specifics of your design: Why did you pick the color palette for the website? How did you organize the content in your site map?
  • Learning to talk about your designs is one of the most important skills to develop during your time in school! Be sure to stand up tall and speak loudly so we can hear you in the back of the room.

While critiquing your peers’ work remember to be respectful and constructive. We’re all here to learn so give thoughtful, useful feedback.

How to Survive a Critique: A Guide to Giving and Receiving Feedback
http://www.aiga.org/how-to-survive-a-critique/

The Unwritten Rules of a Great Design Critique
http://tympanus.net/codrops/2012/10/15/the-unwritten-rules-of-a-great-design-critique/


Link Styling

  • link: The default state—it defines what links should look like by default, when you fi rst get to them. By default, unvisited links are coloured blue.
  • visited: The style of a link that has already been visited (clicked on, or followed). By default, already visited links are coloured purple.
  • hover: The style of a link whilst the mouse cursor is hovering over it.
  • focus: The style of a link when it has been given focus by means other than the mouse, for example, if the user has used the keyboard to navigate to it. Note that old versions of Internet Explorer do not support the focus state, and just use active in place of focus.
  • active: The style of the link while it is activated, i.e., as the mouse button is held down while the pointer is over the link (when the mouse button is released the state changes to :focus); it is also the style of the last activated link when you arrive back at the original document by going back in your browser history.

A love/hate relationship

Before we move on, there is one more thing to mention—you need to specify link, visited, hover (and focus), and active in that order. Note the order in which I’ve put the rules in the CSS file.

Why? Because of inheritance, and because of the order in which the browser triggers the different states.

Leave a comment