Lost in the Sauce: Exploring CSS Navs

Looked up a list of different navigation resources for this week, with the majority of them being tutorials for making slick-looking menus or hyperlinks.

• Pure CSS Horizontal Menu (SEO Friendly)
• CSS Navigation Rollovers With Drop-downs
• Creating Hyperlinks and applying Styles to them in Microsoft Expression Web
• Make an Optimized Slick CSS menu
• The Ultimate Navigation with CSS level 3

Of these articles, there are a few that stand out. I think Pure CSS Horizontal Menu (SEO Friendly) is probably my favorite, because it offers a very clear step-by-step instructional method. The author shows a visual example to accompany each step of the construction process, so that you get a real sense of how the menu comes together; I find this much more valuable than a purely text-driven tutorial.

Plus, a CSS-driven drop down menu is still something that surprises me. That type of effect seems like it would require at least some degree of scripting involved, but to see it completely covered in CSS is another reminder that there’s still a lot of potential there I have to explore. I would be interested to hear from the class about other examples of surprising CSS functionality, like drop down menus, hover boxes, or other interactive elements, that would normally appear to be script-driven.

My second choice for a stand out article is The Ultimate Navigation with CSS level 3 . Unfortunately, this tutorial doesn’t give the same visual examples that “Pure CSS Horizontal Menu” did above, but it’s still a very thorough resource. Plus, I tend to prefer how simple and slick the final result of this tutorial looks.

Notice how the author prefaces the article by warning that it incorporates elements that don’t validate in XHTML 1.0 Transitional – is it just me, or does these like these nifty looking effects never seem to validate?

Location, location, location

The three articles this week are all helpful resources for understanding how to use CSS positioning in laying out page elements. The first, “Learn CSS Positioning in Ten Steps”, was a resource that was referred to a great deal by other articles on the web as being one of the best resources for learning positioning. It’s definitely going into my bookmarks – this tutorial puts simple definitions for each layout property directly side-by-side with a visual example of its use. Though none of the layouts are explained thoroughly, it’s a terrific cliff-notes introduction to the whole concept.

The second tutorial is very much like the first, but uses a different layout to show how each positioned element works within the “document flow”. Unlike the first tutorial that breaks up each layout example, the second tutorial throws them together on a single page. I prefer the first tutorial myself, but I thought someone else might prefer this second option. You do get a better sense of how these can all work together on the same page by being able to see all of the properties used  simultaneously.

Finally, there’s the article “Absolute, Relative, Fixed Positioning: How Do They Differ?”. This is a good final article to read after absorbing the first two; though it doesn’t provide visual examples for the four major layout properties, the author provides a better “pro-and-con” analysis for their use.

A small complaint I had about the positioning resources I found was their lack of suggestions for how to apply these properties in real-world layouts. They did a great job of defining each layout and providing visual examples, but I wish they could have suggested some “best-use” scenarios. For example, saying something like “using relative positioning is often used to negotiate problems in multi-column layouts” or “absolute positioning can help you place dynamic images as backgrounds”. I know it’s greatly up to me to decide how to use these layout commands, but providing more suggested applications would be helpful in integrating them to my own website project.

5 Sites to Help With My “Choose A City” Project

Here are five “city-profile” sites that will help me in putting together my own project:

1. Yelp

 Why I Like? :  The site is very user-content rich and extensive, which makes all of the answers and reviews seem very reliable. Many of the community members also appear to be extremely involved with Yelp, so the content they provide is usually well-thought out and entertaining to read.

Features to use for my site? : The “Fresh Lists” section. It’s an area where Yelp members can post there own “favorite lists” on whatever they please – for example, “My favorite Sushi places in town”.  I wish you had the ability to make comments or debate about other’s member’s list, but the idea is still a great reflection of the type of information I want to provide on my site. 

Strongest Feature?: The community building aspect of the site. Because members create their own profiles and have so many options for interacting with other members, it creates a strong sense of community among Yelp contributors. As such, they are more enthusiastic about writing reviews and the like, which makes the content available to visitors that much richer. 

2. Find Your Spot

Why I Like? : This site’s friendly, laid back mood. The little animated dog does a good job in personifying what the site provides: an enthusiastic and generous help guide for anyone who needs it. 

Features to use for my site? : The site’s main “online-quiz” feature. I had already considered doing something like this for my site, so seeing a real example of it gave me some good insight into what questions and formats I might want to use myself. However, I’m not sure I will have the time in order to create such a quiz; seeing how extensive findyourspot.com is makes me wonder if I create something similar with much less time and information to put toward it. 

Strongest Feature? : Again, the site’s quiz. Its simple and fun to use, and the answers it provides are a good place to start when looking at other cities to move to or visit. 

3. Sterling’s Best Places

Why I Like? : Simple and straightforward. Though a site like Yelp has much more content, it can also tend to be overwhelming to a first time visitor. BestPlaces keeps the format simple and you don’t have difficulty in absorbing the data and user feedback on the site. 

Features to use for my site? : Though the user forum is pretty much like any regular website forum, it is especially relevant to me since many of the postings featured there give me great ideas for the type of questions I want to use for my own site. It really makes me think of how to write my questions and think of the process for posting answers. This site does have a bit of a problem of “shouting match” styles forum postings, which makes me consider how I will avoid doing that on my project. 

Strongest Feature? : There aren’t any revolutionary features, but I think that’s one of its strongest attributes. The layout and structuring of the content is the site’s real strength. 

4. City-Data.com

Why I like? : Much like bestplaces.net, I think city-data does a good job of mixing raw data with more detailed answers in a straightforward format. 

Features to use for my site? : Some of the questions on the forum are very valuable to my own efforts, such as “Top Ten Reasons Not to Move to (blank)” or “New Yorkers Considering Austin”. I like how some of these do a good job comparing one city to the other, but like bestplaces.net the unfiltered forum approach can sometimes devolve into useless name calling that hurts the content. The small image gallery provided at the beginning of each city profile is something I will probably use on my site, though not at the very top of the page as it is positioned here.

Strongest Feature? : Nothing stands out in particular, but the mix of numbers and user quotes is well integrated and accessible. 

5. epodunk.com

Why I like? : Though the information provided is very-data and number heavy, epodunk does a good job of making it simple to search through: a long list-format with practically every topic you could think of. Pretty old-school approach, but great for getting a thorough answer without having to guess where everything is. 

Features to use for my site? : They feature a large quote from a well-known person on each of the city pages, something I had already considered posting on my site. Seeing it used elsewhere is a good starting point for how to use it myself. 

Strongest Feature? :  Topic-driven list format. No hassle in trying to find anything, and the data-driven approach means you avoid some of the moronic bickering that creeps into unregulated forums.

“Everything Floats Down Here”

The first writing for this week re-summarizes the most important concept we’ve covered so far in class: making sure your design is based on your content. In an expansion of this idea, it reminds the reader that search crawlers review a site’s content from top-to-bottom, so it’s important to organize all of your pages with this in mind. The author goes on to give several examples of the most common float layouts on the web. Overall the writing is a nice beginner’s review of basic float designs, as well as a nice reminder of how it relates to structuring content semantically.

The week’s second reading is a real gem. The author gives a long list of resources on floats, grouped together in subjects like “clearing floats”, “float bugs”, “float layouts”, and more. In particular, I think anyone who is practicing heavily with floats should bookmark the page for the “float bugs” section. I ran across several bugs I have encountered previously, and without this kind of resource they always take much longer to search out and discover on a case-by-case basis. Being able to quickly refer to this webpage in the future will be a real time saver.

The final reading for this week doesn’t really deal with CSS floats primarily, but it came up in during my search and wanted to discuss it regardless. This article talks about the old arguments for using tables (instead of CSS magic) as a means to layout a website. The author’s arguments really resonate with me; when I began to learn HTML at work, I was taught using the table-layout method for building everything, and I found it to be a pretty intuitive way to learn layouts. Envisioning page layout in the standard columns and rows format made it simple to structure content, and it was very easy to learn how table, tr, and td tags worked. As the author mentions, this seems like a much simpler way to initially learn web design than the CSS driven way of doing things; floats, clears, margins, and the like take a deeper level of understanding, and implementing them can be much more confusing for a beginner.

The more I used tables and tried using more complex layouts, the more I discovered their weaknesses when compared to the CSS div driven approach. Now that I have grown more comfortable with floats, I won’t be returning to the table-driven way of doing things; however, the author makes some very valid points in this article. Furthermore, I was not aware of this CSS display: table option. A CSS-based model that emulates the simplicity of table layout? Is this a good way for beginners to learn web-design, or does it merely delay whole-hearted acceptance of CSS layout methods? I can’t fully go with either side until I tinker more with the display option. Anyone have more experience with this?

P.S. – If anyone can name what I’m referencing in the title for this post, I will buy you a cookie.