Module 2: Analyzing Web Code
A comparison of Time.com and Zeldman.com
The page I analyzed for Module 1 was Time.com, so I thought it fitting to analyze its underlying stricture for Module 2. I am comparing the code with that of Jeffery Zeldman’s site, zeldman.com. Zeldman is considered a God of sorts for web design and his site acts as much as a creative outlet and blog for Zeldman as a standard to which authors should compare their work. I am going to deviate slightly from the original assignment. I will be analyzing the CSS sheets used in the sites. I am pretty familiar with HTML, but not so much in CSS. As this assignment is to serve also as a reference sheet of sorts, I figured CSS would be a good substitute for HTML in my case.
In general, Jeffery Zeldman is my hero (of web design)…he is renowned in the field of web design and has a site viewed by thousands of people every day. His site reflects his prowess in web design and passion for user experience and learning. The first thing I would like to mention about his CSS sheet compared to TIME’s is the little disclaimers/explanations he leaves like easter eggs throughout the document. He fully intended for other people to look at his CSS code and learn from the way he went about designing his site. TIME, on the other hand, looks like an intern got carried away with the copy and paste button and then went through and changed what they needed. The code is sloppy, disorganized and unnecessarily redundant. It appears to me that TIME jumped on the web bandwagon as an afterthought and spent only as much time and money constructing the site as necessary to create a skeleton template…and have not had a major overhaul to their site or a significant update in quite some time.
In TIME’s defense, they do have a lot of information that has to be presented…which means a lot of formatting. And being a novice in CSS coding, I am not in the best position to be tearing their code or process apart. But all the same, I’m almost positive that there is a simpler and better way to lay this site out using CSS. It would also help if they put in little explainer tags to help future authors (including themselves) to know which things are which as Zeldman did.
I really enjoyed this assignment…main reason being that I use this sort of process for learning about web design on my own. I usually will go through the source code of a site to see how it works…maybe even open th e document in Dreamweaver’s split view and see which elements correlate to which lines of code.
I must admit, I read through Zeldman’s code more than TIME’s…mostly because the TIME CSS to me, seemed like a jumbled mess. Zeldman did a very good job with making his code accessible and readable. I did learn a lot from Zeldman’s code about the process of laying out using CSS. Background images and divs are key elements in contemporary layout design and Zeldman demonstrated perfectly how to use them. I also picked up some seemingly good shortcuts on how to code in attributes…especially background attributes…rath er than have several separate attributes such as an image attribute, a color attribute and so on, just have one background attribute tag with all of the attributes specified inside of it.
Here’s an example of what I mean:
div#wrapper {
background: transparent url(/i04/wrapinner.gif) top left repeat-y;
}
As per the rubric, here’s a lis t of reoccurring elements I found in both TIME and Zeldman.com.
• min-width—sets the minimum width of an element
• border—define the borders around an element
• display—sets how/if an element is displayed
• text-align—aligns the text in an element
• margin—define the space around elements
• padding—define the space between the element border and the element content
• color—defines the color o f an element, be it text, border or other
• font—defines the font of the text…usually supply the specific font as well as the root font and serif family
• width—sets the width of an element…usually div’s
• height—defines the height of something…usually div’s
• font-size—defines the font size…usually using the ‘em’ unit
• list-style—sets the type of the list-item marker (the bullet points)
• position—defines the pos ition of an element…like a picture or a div or whatnot
• line-height—sets the distance between lines of text…’em’ units work best
• letter-spacing—sets the distance between characters…’em’ works best
• text-transform—defines any special characteristics of the text…so you can make everything uppercase or small caps or whatnot
• background-color—sets the background color of an element
• a:visited—a pseudo class for hyperlinks that defines the appearance of visited links
• a:hover—a pseudo class for hyperlinks that defines the appearance of links when hovered over by a mouse
I feel very confident with using basic attributes like –color, -image, and –position—mainly to do with the fact that I have used programs dealing with visual elements like Photoshop and Illustrator, however, a nything dealing with text is still relatively foreign to me…I think it has to do with my inexperience with manipulating text…I am getting better at using text manipulating attributes however.
I would just like to say that W3C Schools is the BEST PLACE EVER to learn anything about anything web…from definitions to tutorials on how to do different tasks to basic walkthroughs and even learn how to get a certification in any web authoring language recognized by the W3C. This is where I got all of the information pertaining to the attributes and where I have been learning code. I constantly have a tab in my browser devoted to W3C Schools in the event I have a web-related question
So in short, TIME needs a major overhaul on their site, Jeffery Zeldman is a web authoring GOD and I have a long way to go before I can do anything close to what I have seen in this project.
 | |
• Very cluttered…every attribute has an identifier…makes it a pain if one was ever to go back in and edit it • Lines and lines and lines of code • Most images are actually in the CSS…especially for the RSS feeds and background images • All the attribute id’s are individual…rather than consolidating them • Color tags • Text font families • Margin/padding • Links have their own id’s and colors and most have attributes for diff a:hover • Images: default • There’s a lot of information on how the page looks and how things are formatted | • clean and organized • There are small explainer tags that describe the function of different things • He seems to have designed the CSS with future editors and the common viewer in mind • The images are also in CSS, but the tags are different…rather than have the tag as background-image, he consolidates all of the bkgd attributes into one tag… • Color tags • Text font families • Margin/padding • Links have their own id’s and colors and most have attributes for diff a:hover • Images: url(local image path) • There’s a lot of information on how the page looks and how things are formatted • This version looks a lot cleaner and simpler to navigate • Plus there are little explainers throughout the doc letting you know where you are |
So there's my paper...and I'll get around to posting more progress later...when I actually have things to talk about...
Posts
No comments:
Post a Comment