Here are a few examples of blog sites that are either particularly well-crafted or are doing something interesting with structure. Be sure to explore the various page types: home page, “permalink” page, archive page, etc.
Just wanted to re-post the description and requirements for project 1.
Create a blog, entirely controlled by Wordpress, that serves as an online notebook of and about your design process.
You should design and structure the blog to accept multiple kinds of content: samples of your work in progress, others’ design/artwork that inspires you, questions about design or code, web bookmarks, etc.
The success of this project depends both on the design of your blog and the content you add to it. While blogs are by their nature templated, you should not treat yours as a generic container: its design should express an idea or emphasis that is important to your work and methods. Take advantage of native Wordpress features like categories, tag, and pages to highlight difference and variation in your posts.
March 21, 2012 (Preliminary Grade: structure must be complete)
May 2, 2012 (Final Grade)
As with Exercise 1, your mission is to view the enclosed screenshot, then use appropriate HTML markup and CSS to match it as closely as possible. You are allowed one class and no IDs. No floats and no position:absolute or position:relative!
Be sure to refer to the CSS Properties and Inline vs. Block cheat sheets if you need to.
Here are Big Ideas slides (PDF) from our first class.
I gave two examples of websites that combine visual ideas with smart structuring and programming:
The Walker Art Center in Minneapolis launched a new site last Fall that acts as a fairly expansive platform for art news, criticism, and conversations in addition to listing the usual exhibition info.
Ian Coyle’s Field Notes microsite is a sort of behind-the-scenes into particular projects in his portfolio. A great example of carefully crafted design that departs from the standard “fixed width column in the middle of the page” format.
Let’s review some of the most common CSS properties and their shorthand versions.
Fonts should be specified as a “stack” of multiple fonts: this provides fallbacks if the first font is not available to the user. Make sure to put quotation marks (single or double) around multi-word font names, and to end the font stack with an appropriate generic keyword (serif, sans-serif, monospace). If you put the page’s primary font on the body tag, nested elements like paragraphs, lists, etc. will inherit the font without you having to specific it again:
body {font-family:"Helvetica Neue", helvetica, arial, sans-serif;}
body blockquote {font-family:georgia, "Times New Roman", times, serif;}
body code {font-family: monospace;} /* code samples on this site use this rule along with background-color:yellow; */
Set type size and leading:
body p {font-size:12px; line-height:15px;}
You’re welcome to use the shorthand font property, but it’s fairly picky about the minimum properties:
body p {font: 12px georgia, "Times New Roman", times, serif; } /* "font size font-family" is the fewest properties you can declare with the font shorthand; otherwise the whole line gets ignored */
We probably also want to specify a line-height; to do that, use a slash after the font-size and put your line-height there:
body p {font: 12px/15px georgia, "Times New Roman", times, serif;}
If you want to add all the other possible options, they need to come before the mandatory settings:
body p {font: italic small-caps bold 12px/15px georgia, "Times New Roman", times, serif; } /* all the fixins: font-style, font-variant, font-weight, font-size, line-height, font-family */
Some other typographic properties:
p em {font-style:italic;} /* a little redundant: browsers tend to italicize the emphasis tag by themselves */
p strong {font-weight:bold;} /* a little redundant: browsers tend to bold the strong tag by themselves */
span.caps {text-transform:uppercase; letter-spacing:1px; } /* better method for small-caps than using font-variant:small-caps */
Don’t forget you can use the normal value to override previous bold/italic settings (or the defaults):
p strong {font-weigh:normal; color:red;} /* in this design a color change stands in for bold */
Realign the text of an element (only works on block-level elements):
h2 {text-align: center;}
p.caption {text-align:right;}
Indent the first line of an element:
article p {text-indent:20px; margin:0;} /* NB: In classical book typography, you would not also add margins between paragraphs; text-indent is enough to signal a new paragraph. */
A large negative text-indent is often used to hide the text of an element while still applying other properties to it (which can’t be done using display:none;). This is the basis of the classic “image replacement” technique, where text content is hidden and replaced with a (background) image:
h1#logo {text-indent:-9999px; background: white url(logo.png) no-repeat 0 0; width:200px; height:100px; }
The box model can be confusing, but it comes down to two fundamental ideas. First, margin creates space between elements, while padding creates space inside elements. The difference is a lot more obvious when an element has a background, a border, or both.
You can specify the values on particular sides individually:
div#sidebar {margin-top:20px; margin-bottom: 10px; padding-top:20px; padding-bottom: 10px;}
Or use the margin and padding shorthands. Use an analog clock as a reminder of the order (top right bottom left)
div#sidebar {margin: 20px 10px 5px 7px;} /* margins-top: 20px, margin-right:10px, margin-bottom:5px, margin-left: 7px */
The other shorthands:
div#sidebar {margin:20px 10px;} /* margin-top AND margin-bottom are 20px, margin-left AND margin-right are 10px */
div#sidebar {margin:12px 7px 8px;} /* margin-top is 12px, margin-left AND margin-right are 7px, margin-bottom is 8px; */
So here’s how we would apply a gray background to blockquotes, inset the type inside that gray box by 5px, and then inset the whole thing by 20px on either side from its container’s edges:
blockquote {margin: 0 20px 0 20px; padding:5px; background-color:gray;}
The second big idea behind the box model: margin and padding both get added to any width and height settings you have specified, which is a little unintuitive.
div#sidebar {width:200px; padding:20px; margin:20px 10px; }/* takes up 260px of horizontal space */
nav {height:50px; padding:10px 20px; margin-bottom:20px; }/* takes up 90px of vertical space */
Unordered lists (ul) and ordered lists (ol) both have list items (<li>) nested inside them. By default, browsers add bullets to unordered lists and sequential numbers to ordered lists.
Traditionally the ul has been used for all sorts of text content that needs to be grouped together but doesn’t involve running text (as in a paragraph). A set of navigation links are the most common example, and we can use CSS to style them any way we want. (NB: list-style is technically shorthand for list-style-type, list-style-position, and list-style-image, but it’s rare to need those three properties on their own).
nav ul {list-style:none; } /* remove bullets *
#main ul {list-style:disc; } /* change bullet style from solid circle to disc */
Borders are useful both to create visual boxes and also to create horizontal or vertical lines. Here’s we put borders on all four sides of the element:
div#sidebar {border-width: 2px; border-color:gray; border-style: solid;}
The shorthand below is useful, especially when applying a border to just one side (border-top, border-right, etc.). Remember to always use the sequence border-weight, border-style, border-color:
div.sidebar {border: 5px solid gray;} /* put a border around the whole sidebar */
div.sidebar a {border-bottom: 1px dotted blue;} /* underline links inside the sidebar */
When applying background colors, it’s simplest to use the background-color property on its own
div#sidebar {background-color:gray;}
But when applying a background image, I recommend the background shorthand. Include all these elements and don’t change the order: background-color, background-image, background-repeat, background-attachment, background-position. Note that transparent is a legitimate and useful value for background-color. background-position requires horizontal and vertical values (e.g. 2px 5px, left top, center center, 30% 50%, etc. And finally, background-attachment can be scroll (the default) or fixed.
section#main {background: transparent url(images/pattern.png) repeat-x left top;}