Corey Kolb

2009-11-03T12:46:00.000-08:00

I have compiled the following checklist of 10 hints and ideas that are important in building a website.

1)It is very important to set up the proper file directory from the start of building a site. Within the folder for a site there should be a html file titled index.html as well as a folder titled images. The folder titled images needs to contain all images and background images.

2)When it comes time to start writing html and css be structured and organized. It can be very difficult to spot misspelling and lack of tags when code is not properly spaced and tabbed. Improper spacing can also lead to errors in your code.

3)Always give a site a name. On the tope of the browser’s chrome the title of a page is displayed. It is important to remember to write a title in the head of the html document so that this name will appear. This is best practice and will aid in SEO.

4)Always check spelling when creating a file directory or writing html and css. Misspellings can lead to preventable errors.

5)Always validate the css and html of a site. One can validate html at validator.w3.org. One can validate css at jigsaw.w3.org/css-validator/. The html of a site should be validated before moving on to css. Theses sites will point out on which line the error has occurred. It is best to try to fix the first error and validate again. One fix can resolve multiple errors.

6)When writing css be aware of inheritance and the issues it can create. An example of this is would be a paragraph element in a sub-content div inheriting the font size from the container div of a site.

7)The four anchor pseudo classes are: link, :visited, :hover, :active. These pseudo classes can be remembered by the mnemonic device: LoVeHAte.

8)Keep in mind the basics of margin and padding. Margin creates space between elements, while padding creates space inside the element to which it is applied.

9)There is an appropriate and inappropriate use of background image replacement technique. The appropriate use of this technique is when the background image replacement contains the same text that it is replacing. There have been attempts in search engine optimization by adding keywords and hidden text to the replaced text. This is known as black hat search engine optimization and is not only inappropriate but will lead your site to not be found on search engines.

10)Fire Bug is a vital tool in building a site. One helpful use of Fire Bug is ensuring that padding and margins are properly applied. When you hover over an element Fire Bug will highlight the padding in blue and the margin in yellow. Fire Bug is also a useful learning tool in finding out how other site are built.

Review Of Case Study

2009-09-22T10:43:00.000-07:00

Upon my weekly browse through www.aiga.com, I stumbled upon a very interesting case study on the redesign of NPR website. This case study by Callie Neylan, NPR provided insight on what goes into making such a huge web site, development of design,how many people are involved, and many other interesting bits of information regarding such a massive undertaking.

The initial design and framework for the design appears to have been been outsourced to aninteractive agency Schematic. The rest of the process was done in house at NPR. This provided the designers direct access to editors and others that would be creating content for the site. The study reports that the design team actually moved to where the editors were working in order to have closer contact in the designing of the site.

What really added to the value of this case study was the array of images from the designing process. The reader can see the old site, the new site, thumbnails, comps, and grid layouts.

Single Page Websites

2009-09-15T13:34:00.001-07:00

Of the websites featured on http://www.webdesigndev.com/inspiration/30-outstanding-single-page-website-designs,http://www.thinkgreenmeeting.com/ stood out as best utilizing the single page concept.

Upon arriving at the site a large graphic slides in from the bottom right hand corner of the browser. This graphic is interactive and illustrates the services provided by the site. As you drag your mouse over icons of cars and planes that make a meeting possible they creatively disappear and the cost of a meeting goes down. Not only is this fun, but the graphic also illustrates that it is cheaper and greener to have an online meeting as opposed to flying and driving people to a single location.

The entire site has a green, renewable, earthy feel to it. This is established by a recycled paper-looking background with hints of green in the typography and graphic elements.

The site has lots of movement witch engages and entertains visitors. As you click on a section in the navigation bar, the right-hand portion of the site glides to the section you clicked on. The other sections are briefly seen before you arrive at the section you clicked on. This would not be as interesting if the site had not established unity between each section of the navigation bar.

Repetition of recognizable icons used on road and pedestrian signage not only creates unity but also is visually interesting and effective. These icons are seen in the initial graphic as well as on each section of the navigation bar.

In contrast to think green marketing, http://www.basilgloo.com/ is a less successful single page website. The page has some depth to it created by a shallow depth of field but that is about all it has going for it. Despite the minimal amount of content the site looks cluttered and akin to a NASCAR with all of its logos.

website review

2009-09-01T15:00:00.000-07:00

One website that I have used in the past and find useful is www.aiga.org, the AIGA website. This site contains content such as visual inspiration in the form of award winning design work in a virtual gallery, articles by professionals in the graphic design field on a variety of topics, and much more. Needs of graphic design professionals and students are catered to on this site. An example of this is the section to find and post jobs.

As mentioned above this site is designed for design a design-oriented audience.This presents challenges that another website does not need to address. The hypersensitive audience of this site will pick up on subtleties of typography. In fact, a personal essay by Andrew Twigg http://www.aiga.org/content.cfm/a-not-so-sweet-tale-of-digital-type?searchtext=web type&curl=2 addresses and evaluates Georgia, the typeface used on the site. The aiga.org site has strong, formal design that makes it functional, accessible and aesthetically pleasing.

Due to the amount of content on the site I will focus on the initial page you reach when navigating to the site. Next to the AIGA logo is a varying image that directs you to the design archives. This focal point always contain a beautiful design that simultaneously lets the viewer know that this is a design website as well as bring attention to the intuitive navigation bar at the top of the page. All of the essential navigation elements are in the top region of the site and establish the grid that runs underneath.

The content underneath is aligned to a three-column grid. The left two columns contain articles, design jobs and a calendar of events. The right column contains a brief mission statement, search bar, news, and links to official sponsors. This grid organizes the content of the site thus rendering it functional and visually pleasing.

2009-09-01T11:27:00.000-07:00