interactivity and plugins

One of the big draw backs for people accessing interactive web sites is that it is sometimes necessary to have the correct plugins installed. If you dont, it is tedious and sometimes unsuccessful exercise trying to download them from the page and in worst case scenario it can lock up your computer necessitating a re-boot.

REFUSE : online clothing brochure. uses flash 9. Aimed at men and women early 20s mid 30s

On its front page it which is very spartan, it contains the message enter , fullscreen and resolution setting for it and also that flash 9 is used on the site.

This is good practice, it alerts the view to what is needed to see the site at its best.

On clicking enter a giant page emerges from the top of the screen (courtesy of flash) .
The layout (as shown below) is a collage of photos handwritten text and navigation info.
The navigation is a little difficult to see initially.
When u click on the links the whole page moves either up down right or left to the linked area.
This movement on basic broadband connection is a quite slow.
Immediately you find you are not looking at a rectangular selection of boxes with text and images which may appeal to this age group looking for a new fresh web experience
The layout is very modern and engaging, using latest web technology
The site content is well targeted at the 20 - 30 age group with high quality photo images of models and clothing.
www.refuse.com.mx

Interactivity

The CBBC (childrens bbc) is a fantastic site full of interactive elements...

Specifically aimed at children the front page offers links in to various areas with icons and text .

The color scheme is bright and simple ....the pages are easy to scan "view for info".

Navigation is well laidout and there is a very good flow through the page content.

The speed at which the interactive games is good, on basic broadband.

There is good feedback when one of the links doesnt work....informing you of what has happened and some options you can choose from eg try again later, hit back arrow etc.

The background contains many mouse "roll overs" triggering sounds and movement.

There is constant movement in the background with acompanying sounds.

The background is downloadable as a screen saver.

There is a selection of browser based games, where you can play games with favorite animated characters from bbc programes and areas where you can "have your say" (post your comments on the site)

All the main cbbc programs are here with the ability to view again on the bbc iplayer.

However .....some of the content is not available to viewers outside the UK.

This is I believe because of copyright and various other leagal issues.

All in all a very well contructed web site providing great content to its viewers.....pity about the limitations on some of the content to overseas viewers though.

The Guiness Book of Records (in need of redesign?)

The Guiness Book of Records site is another example of a print publication moving to the web.

The variety of visitors to the site and varying languages add special challenges ....so one of the first things the visitor sees is a language choice button and small icons of some of its content areas as well as text explanations. The site is designed for a very standard 800x640 I'm thinking that this may be a concious decision made by the designers to offer the site to the widest number of viewers ...many who may not have updated their browsers or are using older computers which cannot handle larger displays.

However the front page contains 2 large vidow windows and slideshow with a list of photos (visible) of the content of the slide show. The layout seems very cramped and the presence of advertising on top and on left side really adds to the clutter. While offering lots of info etc ..I think this site is in need of a major redesign.

www.guinnessworldrecords.com

making your websites look good on the web

Unlike a newspaper where everyone sees the same content in exactly the same places on the page...web pages will not look the same to everyone who looks at them.

There are many issues that conspire to thwart the pixel perfect layout that some claim they can achieve on all browsers.

Try not to obscess on pixel perfect layout in every browser...aim for your website looking good on all of them

Color: laptops and CRT monitors differ with laptops looking somewhat washed-out.
The angle of the laptops screen also has to be factored in when talking about color.
Designers can't control what kind of monitor the viewer is using, and have to choose colors that minimize this factor when they choosing colors.

Layout: because there are so many browsers and OS combinations out there, even with Tables and CSS you are going to find it difficult to get a universal pixel perfect reproduction of your layout of your pages. If someone is determined and willing to spend a lot of time on coding and have a good grip of Java script and CSS and can also spend a lot of time on maintainance they might succeed. However if the viewing browser has Java Script disabled or is viewing on a mobile device, the results may not be what the designer had in mind.

Fonts: there is no way to be 100% certain that all who view your website will have the same fonts on their machines....you can however try to alleviate this by including options in the HTML code. Another option would be to create the whole page as a graphic ....downside is that it would be horrendously large and would take a very long time to download (relative to HTML) and would also be difficult to update and correct errors or typos in the content. Viewers would find it difficult to increase the size of the fonts for easier reading.

So, before becoming obsessed on pixel perfect web pages on all web browsers .....it might be a better target to have your webpages/site look good in all the browsers it is viewed in.....

news paper online Los Angeles Times

The Los Angeles Times is California's leading newspaper.....covering LA, US and international news.
Still retaining its gothic header the los angeles times is a very good example of a printed publication having moved onto the web and all that incorporates....
The white background, choice of font and layout make it very easy to read.
To me, the use of black letters on white in the header visually echoes the printed version, this i believe is beneficial to the paper as its header adds recognisable gravitas to its web version as many of its web readers may also be readers of the print version.
As you scroll down the page you can view four articles per screen.
The quality of the photographs on the pages are high.
The layout changes some way down the main page going from a right column to rows that add greater space for viewing in a letter box style frame.
The site is well thought out and the news is easy to find and read and you can access
any page from anywhere on the site.
There is some advertising on pages...
I recently read that in order to survive, many newspapers want to reintroduce some sort of subscription fee....one possible format being discussed is subcribing to a package of content ...eg newspapers magazines music sports....etc for a flat fee...this might be similar to some of the tv content packages we now pay for.
Also on the site are many blogs....enought to keep you entertained and up-to-date.

http://www.latimes.com/

conveyance

everything conveys.....

survey conclusions on web fonts

I found this article at smashingmagazine which explores setting type in web design and some comon practices and guidlines to be comprehensive and very accesible using graphs pie-charts and excel ....a fantastic resource.

This study is available in full at

http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/




Below is a general overview in text about it findings
"The study shows a clear set of common practices and guidelines for setting type in Web design. Note, though, that these findings are not scientific and should serve only as rough guidelines:
Either serif or sans-serif fonts are fine for body copy and headings, but sans-serif fonts are still more popular for both.
Common choices for headlines are Georgia, Arial and Helvetica.
Common choices for body copy are Georgia, Arial, Verdana and Lucida Grande.
The most popular font size for headings is a range between 18 and 29 pixels.
The most popular font size for body copy is a range between 12 and 14 pixels.
Header font size ÷ Body copy font size = 1.96.
Line height (pixels) ÷ body copy font size (pixels) = 1.48.
Line length (pixels) ÷ line height (pixels) = 27.8.
Space between paragraphs (pixels) ÷ line height (pixels) = 0.754.
The optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular,
Body text is left-aligned, image replacement is rarely used and links are either underlined or highlighted with bold or color."

advertising an event for all ages

This site was put together to advertise and inform about Heritage Week.....
It was aimed at all ages, families etc....it was possible for people to register their events on this site.

I like this page for its use of color and choice of font and a degree of interactivity.
The combination of purple, green and torquoise on a white background adds vitality and freshness.
The font for Heritage and date etc is serif nice and rounded and humanistic...presence of non serif does not clash.
The navigation bar a mixture of text and icons is effective and well spaced.
Icons for the members, and the ability to customise them adds interactivity and personalization to the whole mix.
Some elements in the graphic on top of page move ...swans flying etc adding dynamiscism to the site.
The presence of advertising on the left adds the possibilty of income for the site.
The graphic in the top right of page reflects aspects of our history/heritage ...children of Lir, castles (blarney?)sports etc... also people in the outdoors add a visual which is one of inclusion.
This screen grab is for the Photo Competition.......
Also I liked the range of ways of contacting the organisers ....phone fax email text are written along the bottom of the page. Some web pages just have a web button for contacting....which can be very annoying when you need to ask about or explain a complex issue.
This site was aimed at all ages and its design very much reflects this.
I would give it 8 out of 10....