Bill Weye

Tag: Web Design (page 2 of 2)

Reviewing the new Apple Website: Overall

Apple home page on June 12, 2007 Apple has a new Website. The last time they had a major redesign was in 2001, coinciding with the release of OS 10.0 (you can review a lot of Apple homepage images on Flickr). Over the next couple of days I’ll review the different features and accessibility of the site, including the footer, main menu, the new slider menu, and support page.

My first impression was to like it. A lot. But why? (I guess that’s the point of reviewing something–giving your readers an informed opinion of why you like or dislike something). Well, there are many new things on the site, but they haven’t reinvented the wheel; the changes to the site are a development of the existing site without confusing their visitors.

adobe main website menuFrom the top, the new main menu is simplified version of the now iconic gel tabs (with horizontal sub-menu). My first thought was, “oh, they copied the new Adobe menu,” but it’s not really a copy despite their design similarities. The new menu doesn’t have a sub-menu riding along the bottom (nor is it a drop-down like the Adobe menu), but instead there is a new “slider menu” that appears on some pages (I’ll review that in another post). The new Apple page is 980 pixels wide, which gives the new menu room to spread. apple website sprite menuIn addition, unlike the Adobe menu, Apple’s is image based for a consistent look across all operating systems and browsers. Look at that Adobe image to the right; see how the “Store” item wrapped? I’m sure it’s fine on a PC, but on my Mac the execution is terrible. The new Apple menu uses a css sprite, first written about by Dave Shea on A List Apart (in 2004!). I’m a big fan of sprites, have used them many times, and don’t really see any downside. old apple gel tab menuApple gets a big thumbs up for the sprites. The gel tabs were getting tired.

In the next couple of days I’ll dig deeper into the new site, talk about the improved accessibility for people with disabilities, discuss the choices they made in regard to sub-menus, and the increased use of the black background color.

Centering an unordered menu list

I have been struggling for some time trying to create a simple, unordered horizontial list menu using css. Well, I found some inspiration and figured out the problem. Inspired by the Centered List Navbar Updated at Listamatic, and comments by another menu creator at Listamatic, I was able to create a menu like you will find on my footer. This hasn’t been tested on any Windoz machines yet, but it works fine in FireFox, Safari, and Camino on Mac OSX.

First, here is the HTML you will need (you can expand or contract the list as needed:

<div id="footercontainer">
<ul>
<li class="first"><a href="#">Link text one</a> you can also add text outside the link.</li>
<li><a href="#">Just link text</a></li>
<li><a href="#">Link text three</a> you can also add text outside the link.</li>
</ul>
</div>

Before I get to the css, you will notice one change I made because I was using this for a footer: I did not want all of the text in a list item as a link, therefore I had to change where the border (pipe) was added. Originally the border was added to the link; the border is now added to the left of the list item.


#footercontainer ul
{
text-align: center;
padding: .1em 0;
margin: 1.25em 0;
background-color: #fff;
color: #666;
width: 100%;
line-height: 140%;
font-size: 85%;
}

#footercontainer ul li
{
display: inline;
padding: .2em .5em;
border-left: 1px solid #e72000;
}

#footercontainer ul li.first
{
border-left: none;
}

#footercontainer ul li a
{
color: #0000cd;
text-decoration: none;
}

#footercontainer ul li a:hover
{
color: #e72000;
text-decoration: underline;
}

Hope you find this helpful. You can contact me with comments or suggestions.

Give Me The Paper NY Times

I couldn’t disagree with Jack Shafer of Slate any more about the redesign of the New York Times Web site. The redesign is an improvement, but in no way would it cause me to turn my nose at the printed page for newspaper content. By that I mean if I am going to read stories printed in the paper, I prefer to read the daily paper as printed, not the same thing on the Web. The Web site can give you a lot of multimedia extras and links to other information, but in terms of readability, there is a reason the printed page has been around for so long.

What is missing from the redesign? At the top of my list would be white space; I think the line-height needs to be increased on the first page teasers, and a little more padding wouldn’t hurt. Second on my list of disappointments would be the use of the Georgia font. I’m not sure what the problem is, but it doesn’t look as nice on a PC (compared to my Mac at home).

It’s funny that Khoi Vinh, the new design director at nytimes.com, doesn’t take much credit for the redesign (he has only been there a short time). From what I have seen of his work, the updated nytimes.com design is very much similar to Vinh’s design taste.

Newerposts

Copyright © 2019 Bill Weye

Up ↑