3 articles discussing CSS for web

Why a CSS website layout will make you money

http://www.webcredible.co.uk/user-friendly-resources/css/css-website-layout.shtml

There are 4 main reason; reduced bandwidth costs, higher search engine ranking, faster download speed and the increase in reach. One of the biggest factor is that CSS holds a higher density of content with less code and allows for javascript to be used. Each of these factors all contribute to attracting more visitors to the site which should lead to an increase in potential enquiries and sales. I found this article useful in making me understand the use and importance of CSS more for the evolving web.

Improving Code Readability With CSS Styleguides

http://coding.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/

This article presents 5 coding tips that is meant to dramatically improve code management and readability. Creating striking comments as a heading for each group, creating a ‘table of contents’ at the beginning of the CSS file, creating a color and typeface glossary for future reference, having a clearly defined format to the coding layout and finally indenting new or changed lines to make them more visible. Extremely helpful tips in which I plan to implement into my coding habits and hopefully save me a lot of future troubles.

Learn CSS Positioning in Ten Steps

http://www.barelyfitz.com/screencast/html-training/css/positioning/

This tutorial examines the different CSS positioning properties such as position:static,
position:relative, position:absolute, and float.It’s an extremely simple tutorial slideshow that displays the CSS code and the visual result in a way that is easy for me to understand. With each slide giving an explanation to each property and how it changes when the property is changed.

Advertisements

3 Column Layout

3 Column Layout

3 Column Layout

More or less the same thought process as the 2 Column Layout. However here, I gave the middle column a flat green background. This way, we can clearly see the 3-column layout and it also draws the viewer’s eyes into the information. This is designed around a centered layout (thus the arrows pointing towards the logo in the middle)

Also, the navigation is a the bottom, mainly because I felt that it would be distracting against the arrows if it were on top.

2 Column Web Layout

2 Column Web Layout

2 Column Layout

I did both the 2 column & 3 column web layout design using the information from http://worldharvest.cc/

Overall, I wanted to have a clean design which had a strong header and footer which I could use to hold the webpage together. I decided to limit the colors and used green and yellow for contrast.

I wanted to give the background a slight dimension to it, so I used the gradient (see first slide). To bring attention to the motto “Living the Dream”, I created some arrows to draw our eyes towards it. The green box caption for the sponsor-a-child was done in order to draw attention as well as to maximise the photograph size.

Website examples…

3 websites with interesting navigation

http://methoddesignlab.com/
http://www.designlabcph.com/index.html
http://paramore.is/

Website examples that follow a 2-column grid layout:

http://www.charitywater.org/
http://smittenkitchen.com/
http://theshoreways.com/blog/

Website examples that follow a 3-column grid layout:

http://www.bonlook.com/

http://www.pikaland.com/

http://www.designiskinky.com/

3 Articles discussing designing/building navigation for a website

1. http://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples/

This article explores creative navigation and discusses the potential usability problems of each of the techniques presented. They give inspiring and original design examples —although some are not necessarily very usable. This article encourages us to use creative navigation that have been tested, validated and verified that the technique would actually make sense in your website. Some of the examples include: Parallax and Scrolling, Storytelling, Scrolling Navigation, Experimental Navigation Menus, Breadcrumbs and Sliding Sections.

This article was very inspiring and interesting. It opened up my design choices as well as expanding on my understanding of what is possible on the web. I learned that creative navigation should not be something to be avoided but in order for it to work, there has to be an emphasis on consistency, use of clear label and appropriate descriptions to clarify when necessary.

This article basically shows the ten most common type of sites — Blogs, New sites, E-commerce, Information & references, Corporate, Community/Social Networking, Event, Review, Gallery and Personal. It also explains and compares the different ways of setting the navigation that could work such as categories, tabbed navigation, header navigation, sidebar navigation and the footer navigation. It also talks about consistency within the design regardless of what kind of site and navigation being used.

It gave me a lot of website inspirations and ideas on the different ways I could go about with the navigation for the web.

3.http://www.smashingmagazine.com/2010/01/11/the-case-against-vertical-navigation/

This is an article that explains the writer’s reasons against using the vertical navigation layout in web design.  He brings up some points that on how the vertical navigation layout is not as successful and states that it wastes valuable space and does not draw enough attention as often as the top sections of the page as people are accustomed to reading content that is between the header and footer and the vertical navigation layout is an usual and unique element to web design. These disadvantages along with some others, outweighs the benefits of simplifying the ability to update navigation links.

It made me take note and be more aware of the disadvantages and advantages in choosing between a vertical or horizontal navigation layout.