Off the Top: Web design Entries
Showing posts: 121-135 of 222 total posts
Building with Web Standards or how Zeldman got the future now
I awaiting Jeffrey Zeldman's Designing with Web Standards, which is available for order from Amazon (Designing with Web Standards). I have been a believer in designing with Web Standards for years, but it was Jeffrey that pushed me over the edge to evangelist for Web standards. One of the best things going for Web standards is it make validation of markup easy, which is one of the first steps in making a Web site accessible.
I work in an environment that requires Web standard compliance as it provides information to the public as a public good. Taxpayers have coughed up their hard earned dollars to pay for research and services, which are delivered to them on the Web. The public may access information from a kiosk in an underfunded library with a donated computer on a dial-up connection, but they can get to information that they are seeking. The user may be disabled and relying on assistive technology to read the public information. The user may be tracking down information from a mobile device as they are travelling across country on their family vacation. Each of these users can easily get the public information they are seeking from one source, a standard compliant Web page.
Every new page that is developed by the team I am on validates to HTML 4.01 transitional. Why 4.01 transitional and not XHTML? We support older browsers and 4.01 transitional seems to have pretty good access to information no matter the browser or device. We are not on the cutting edge, but we know nearly everybody can get the information their tax dollars have paid for. I dream of a day job building XHTML with full CSS layout, but with the clients I work for we still aim at the public good first.
I am very happy that Jeffrey has his book coming out as it should bring to light to more developers what it means to build to Web standards. Every contract that is signed buy the agency I work for must validate to HTML 4.01 transitional, but very few of the sites do when they come through the door to be posted. We provide a lot of guidance to help other developers understand, but finding a solid foundation to work upon is tough. When hiring folks many claim to have experience building valid sites, but most soon realize they never have to the degree to getting a W3C validation.
Building our pages to 4.01 does not mean we are going to stick with 4.01 forever. We plan for XHTML by closing all tags and stay away from tags deprecated in 4.01 strict. Much of what we create only needs a few scripts run to convert the pages from HTML to XHTML 1.1 transitional. Having the closing tags makes scripting to find information and search and replace much easier. (Enough for now, buy the book, we will have more later).
Presentation switching demo with CSS at Zen Garden
The separation of content and presentation is and has been extremely important. There have been many developers and designers that have showed there CSS-wares for switching presentation over the past two or three years, but Zen Garden is one of my favorites. The Zen Garden is currently functional (many others have replaced their presentation switching sites for no option presentation in the past year) and it provides a wide variety of styles and layouts. I hope Zen Garden sticks around for a while so it can be used as a great showcase for what can be done.
I am also liking Zen Garden as the various styles provide insight into the placement of headers and content. Not only do the different presentations provide different styles, but the user interface with the information drastically changes from style to style. This differing interface showcase is a great tool to help people understand the importance of presentation and understanding the user. Different audiences may have strong preferences or attraction to the various presentations and testing of the various interfaces most likly would generate widely different results with various user groups. [hat tip Eric Meyer]
Design versus communication
Zeldman explains the differences between differences between design and communication.
Indi on site navigation and keeping it under control
Indi Young provides a great guide for building browsing structures in her article Site Navigation: Keeping It Under Control.
Blurbs: Writing previews of Web pages
A February 2001 article by Dennis Jerz discusses Blurbs: Writing Previews of Web Pages, which is very helpful information that helps annotate links to ease and assist the users understanding what is behind "door number 2". The blurbs help the user by providing more than the short snippet in a link. This makes the browsing structures much more friendly.
Using HTML tags properly to help external search results
There are some essentials to building Web pages that get found with external search engines. Understanding the tags in HTML and how they are (rather should be) used is important. The main tags for most popular search engines are the title, heading (h1, h2, etc), paragraph (p), and anchor (a). Different search engines have given some weight in their ranking to metatags, but most do not use them or have decreased their value.
Google gives a lot of weight to the title tag, which is often what shows in the link Google gives its user to click for the entry. In the title tag the wording is important too, as the most specific information should be toward the front. A user searching for news may find a weblog toward the top of the search ahead of CNN, as CNN puts its name ahead of the title of the article. A title should echo the contents of the page as that will help the ranking of the pages, titles that are not repeated can get flagged for removal from search engines.
The headings help echo what is in the title and provide breaking points in the document. Headings not only help the user scan the page easily, but also are used by search engines to ensure the page is what it states it is. The echoing of terms are used to move an entry to the top of the rankings as the mechanical search engines get reinforcement that the information is on target for what its users may be seeking.
The paragraph tags also are used to help reinforce the text within them.
The anchor tags are used for links and this is what the search engines use to scrape and find other Web pages. The text used for the links is used by the search engines to weight their rankings also. If you want users to find information deep in your site put a short clear description between the anchor tags. The W3C standards include the ability to use a title attribute which some search tools also use. The title attribute is also used by some site readers (used by those with visual difficulties and those who want their information read aloud to them, because they may be driving or have their hands otherwise occupied) to replace the information between the anchor tags or to augment that information.
Example
The application I built to manage this weblog section is build to use each of these elements. This often results in high rankings in Google (and relatedly Yahoo), but this is not the intent, I am just a like fussy in that area. It gets to be very odd when my posting weblog posting review of a meal at Ten Penh is at the top or near the top of a Google Ten Penh search. The link for the Ten Penh restaurant is near the bottom of the first page.
Why is the restaurant not the top link? There are a few possible reasons. The restaurant page has its name at "tenpenh" in the title tag, which is very odd or sloppy. The page does not contain a heading tag nor a paragraph tag as the site is built with Flash. The semantic structure in Flash, for those search engines that scrape Flash. Equally the internal page links are not read by a search engine as they are in Flash also. A norm for many sites is having the logo of the site in the upper left corner clickable to the home page of the site, which with the use of the alt attribute in a image tag within an anchor link allow for each page to add value to the home page rant (if the alt attritute would have "Ten Penh Home" for example).
Not only does Flash hinder the scapeing of information the use of JavaScript links wipes out those as means to increase search rankings. Pages with dynamic links that are often believed to ease browsing (which may or may not prove the case depending on the site's users and the site goals in actual user testing) hurt the information in the site for being found by external search engines. JavaScript is not scrapable for links or text written out by JavaScript.
Matt Jones looses faith in navigation
Matt picks up on the failure of navigation and points to similar conversations to ones I had with Stewart that turned me to look for something other than navigation as a means to build information structures. Each user approaches information with two of their own receptors, cognitive and sensory receptors. The cognitive elements include vocabulary and rhetoric (essentially writing style). The sensory include visual elements, which include color, texture, and layout. Layout includes the visual structure and context given through proximity. These two seem to have paralells to Andrew Dillon's semantic spatial model, but I want to know more about his model.
Matt discusses the problems with navigation consistancy at the BBC sites. Here is where navigation gets in the way, as browsing structures is a better term and less restrictive. The user needs a means to find other information that is related or provides context to the information the see on their screens. If there is some attraction to the information infront of the user they often believe what which they seek will be close by if the information is grouped by like information. Much like a market where produce is grouped together, as they are like products.
Scott does a great redesign
Scott LePera I kickin' it with his site's redesign. The black text on grey is easy to read (much better than grey text on white) and the color palete is warm and friendly like Scott. The redesign is insanely fast loading (which is more than I can say of Macromedia's redesign). If you are in Austin say hi to Scott for me at SXSW.
Tweaking the presentation layer for links
We are still doing some tweaking related to the recent redesign. This latest change includes the underlining of links. The style sheet now treats the distinct content area separately. The links page does not have any underlining on the links as the page is all links and the underlining tends to interfere with the user's scanning of the links and therefore the lack of underlining eases this pages use. The hover is identical for all the links through out the site, the hover provides an orange hue to tie the colors of the site together. The right content frame does not have any links either as the combination of the light orange background and the blue link has a little reading difficulty, but with the underlining there was strong reading hinderance. The links through the rest of the site are all underlined to ease the user's ability to discern that the links can be clicked. The links under the Off the Top remain grey with underlining with orange hover.
Let me know how these work for you.
Running a Design Critique
How to run a design critique from Scott Berkun at UIWEB. This not only includes who should be in the room, how often, but a list of items to cover with heuristics on it. This is looks to be worth digging back in and reading every word.
Web Techniques / New Architect says Buh-Bye
R.I.P. Web Techniques / New Architect. Amit and Maggie shared the news.
This is a sad note, but also one that seems to show how things have changed. How many of us were excited when the new issues of Web Techniques arrived or were anxious when it was late? The publication changed over time as did the market for the magazine. The need for a printed magazine changed over time, but having a printed article to show clients or superiors was a great help as they discounted the information printed from the Web (I don't know how much this has changed). There are many Web based outlets for similar information and similar quality of information, Boxes and Arrows, Digital Web, A List Apart, and O'Reilly Network to name a few. None the less, we morn this day and get back to building a better Web.
Peel exposes layered storytelling
Design Interact examines the Seattle design firm Peel and their layered storytelling approach to information structures. Layered storytelling is explained:
Layered storytelling means that a site opens much like a film, with a splash of music, photography and animation, but not a lot of information. If you stay on the top level of the site, your experience is similar to watching a documentary on television. But if you click on any topic, you dive down into a more book-like experience, with long texts and additional background information. The idea is that a visitor skims along the surface until he or she finds something interesting and then digs in to read more.
This appoach provides the ability to have a one way interaction with the site as it entertains and informs, but when the user is attracted to a topic, idea, or visual cue they can interact and find out more. I have enjoyed the layered storytelling approach when I have encountered it. It does seem like it would have the same repeat user problems that other multi-media interfaces encounter, in that having to wait for load times before interacting or navigating is usually problematic. Providing an option to use the layered storytelling or providing it the first time by default (but if a user is like me and works with three or four browsers open or working from many computers, setting a cookie to track repeat use will not solve the issue).
This too is worth coming back to as it provides intamacy with the user and a topic. This can help break down some of the dry appearance of some dull topics that are difficult to unwrap, like sciences, urban planning, the history of duct tape, etc.
Zeldman discusses XHTML 2
Zeldman provides insight into XHTML 2, which provides a response and agreement with Mark Pilgrim's Semantic Obsolescence rant.
Up the kilt of the BBC redesign
Matt has posted a PDF of the detailed BBC redesign process, which is well worth the download time (7.3 MB plus). This is how the process should be done and is done often in places that care to do it right. This process takes time, which equates to money, but the reward is happy satisfied users.
At first I found it a slight bit odd that the Beeb would target their voice map (page 16) to the fun and highbrow side of the map. I understand highbrow, but fun over functional seemed odd at first (possibly since I work with clients that should be focussing on the functional and not so fun side of the map (some think of the fun at the detriment of functional). But, having the Beeb America channel help understand the fun side of the site. There is a lot of information that the Beeb produces and much of it is instructional/educational, which benefits from having the fun element. I have tended to think of the BBC as a resource for my news, and growingly so my information (gardening, etc) and entertainment.