Week 03

REMINDER: Mandatory event

Meet the Director | Interface/Interaction Design
WK4
Wednesday, Sept. 30th
1pm  (We will attend as a group and continue class afterwards)
Boardroom (near the Enrollment Office)

Topics
: Web Standards, Visual Design for Web and Interaction: layout, grid, visual flow
Studio
Experiment: Design the composition of a home page for a new website. The specification is to design a microsite for moma.org suitable for the target audience of 8-12 year olds (commonly referred to as the “tween” market). Your layout/grid and visual flow should take in consideration this target market. (You will need to do some informal research so you know something about the “tween” market.) I want you to complete two different design directions. The two sketches must represent two different grid systems. You can “break the grid” on one of the sketches if you’d like. Another specification for the design is it must contain images, text, and pull-quotes in addition to anything else you’d like to add to the site. Your design should be optimized for a screen resolution of 1024 x 768 therefore the dimensions of your design should be 990 pixels x 560 pixels (Remember 560 pixels is considered “the fold”). Post your thoughts and decision-making process for this exercise on your WP blog.
Project:
Work on your design of the microsite and bring in a large print-out of your work so we can discuss in class.

Reading for next week:
Web Standards:
Read the class notes below and watch video
Navigation & Interface Design

Answer the 2 questions in the Comment section of the Week 03 notes of this site. Please reply to the questions below by our next class, Wednesday, September 30.


Why Web Standards?

Below are the main reasons adopting web standards in your web design/development work is a good idea. Using web standards confers the following benefits:

  1. Efficiency of code: A lot of best practice web standards usage is all about reusing code—you can separate your HTML content from your stylistic (CSS) and behavioral (JavaScript) information, allowing your file sizes to be kept small, and code to be written only once, and then reused wherever it is needed.
  2. Ease of maintenance: This follows closely on from the last point—if you can write HTML only once, and then apply styles and behavior wherever they are needed using classes and functions, then if you need to change something at a later date, you can just make the change in one place and it propagates throughout the entire web site, rather than having to specify that change everywhere that it is needed!
  3. Accessibility: The next two points are closely related—one of the big issues on the Web is making web sites accessible to everyone, no matter who they are, regardless of circumstance. This includes making web sites usable by people with disabilities such as blindness/visual impairment and motor impairment (ie, people who have restricted movement, and might not be able to use their hands properly, or at all). By using web standards and best practices, you’ll be able to make your web sites usable by this significant group of the web audience with no extra effort.
  4. Device compatibility: by this, I mean ensuring that your web sites will work not only across different platforms—ie Windows, Mac, Linux—but also alternative browsing devices, which these days can include mobile phones, TVs and games consoles. These devices have limitations such as screen size, processing power, control mechanisms available and more, but the good news is that again, using web standards and best practices, you can pretty much guarantee that your web sites will work on most of these devices. There are more mobile phones in the world than PCs, a lot of which are Internet–capable, so can you or your clients afford to miss out on this market? For more on mobile web development, check out some of the dedicated articles on dev.opera.com.
  5. Web crawlers/search engines: By this, we are talking about what is termed search engine optimization—the practice of making your web sites as visible as possible to the so–called web crawlers that trawl the web and index web sites, and therefore giving you better search rankings on sites such as Google. There is a science to this (see SEO articles such as Intelligent site structure for better SEO! and Semantic HTML and Search Engine Optimization) but yet again, just by using web standards you will make your site a lot more visible on Google, Yahoo!, etc., which is good for business.
The Coming of Web Standards

During the browser wars, Microsoft and Netscape focused on implementing new features rather than on fixing problems with the features they already supported, and adding proprietary features and creating features that were in direct competition with existing features in the other browser, but implemented in an incompatible way.

Developers at the time were forced to deal with ever increasing levels of confusion when trying to build web sites, sometimes to the extent of building two different but effectively duplicate sites for the two main browsers, and other times just choosing to support only one browser, and blocking others from using their sites. This was a terrible way of working, and the inevitable backlash from developers was not far away.

The Formation of the W3C

In 1994, Tim Berners-Lee founded the World Wide Web Consortium (W3C) at the Massachusetts Institute of Technology, with support from CERN, DARPA (as ARPA had been renamed to) and the European Commission. The W3C’s vision was to standardize the protocols and technologies used to build the web such that the content would be available to as wide a population of the world as possible.

During the next few years, the W3C published several specifications (called recommendations) including HTML 4.0, the format for PNG images, and Cascading Style Sheets versions 1 and 2.

However, the W3C do not enforce their recommendations. Manufacturers only have to conform to the W3C documents if they wish to label their product as W3C-compliant. In practice, this is not a valuable selling point as almost all users of the web do not know, nor probably care, who the W3C are. Consequently, the browser wars continued unabated.

The Web Standards Project

In 1998, the browser market was dominated by Internet Explorer 4 and Netscape Navigator 4. A beta version of Internet Explorer 5 was released, and it implemented a new and proprietary dynamic HTML. This meant that professional web developers needed to know five different ways of writing JavaScript.

As a result, a group of professional web developers and designers banded together. This group called themselves the Web Standards Project (WaSP). The idea was that by calling the W3C documents standards rather than recommendations, they might be able to convince Microsoft and Netscape to support them.

The early method of spreading the call to action was done using a traditional advertising technique called a roadblock, where a company would take out an advert on all broadcast channels at the same time, so no matter how a viewer would flick between channels, they would get exactly the same message. The WaSP published an article simultaneously on various web development focused sites including builder.com, Wired online, and some popular mailing lists.

Another technique they used was to ridicule the companies that would join the W3C (and other standards bodies) but then focus more on creating new features than on getting the basics that they had signed up for correct to start with.

This all sounds a bit negative, but the WaSP didn’t just sit there criticizing people—they also helped. Seven members formed the CSS Samurai, who identified the top ten problems with the CSS support in Opera and Internet Explorer (Opera fixed their problems, Microsoft did not).

The Rise of Web Standards

In 2000, Microsoft released Internet Explorer 5 Macintosh Edition. This was a very important milestone, it being the default browser installed with the Mac OS at the time, and having a reasonable level of support for the W3C recommendations too. Along with Opera’s decent level of support for CSS and HTML, it contributed to a general positive movement, where web developers and designers felt comfortable designing sites using web standards for the first time.

The WaSP persuaded Netscape to postpone the release of the 5.0 version of Netscape Navigator until it was much more compliant (this work formed the basis of what is now Firefox, a very popular browser). The WaSP also created a Dreamweaver Task Force to encourage Macromedia to change their popular web authoring tool to encourage and support the creation of compliant sites.

The popular web development site A List Apart was redesigned early in 2001 and in an article describing how and why, stated:

In six months, a year, or two years at most, all sites will be designed with these standards. […] We can watch our skills grow obsolete, or start learning standards-based techniques now.

That was a little optimistic—not all sites, even in 2008, are built with web standards. But many people listened. Older browsers decreased in market share, and two more very high profile sites redesigned using web standards: Wired magazine in 2002, and ESPN in 2003 became field leaders in supporting web standards and new techniques.

Also in 2003, Dave Shea launched a site called the CSS Zen Garden. This was to have more impact on web professionals than anything else, by truly illustrating that the entire design can change just by changing the style of the page; the content could remain identical.

Since then in the professional web development community web standards have become de rigeur. And you will want to develop an excellent grounding in these techniques so that you can develop websites just as clean, semantic, accessible and standards-compliant as the big companies’.

Validation, what’s that?

Because HTML and XHTML are set standards (and CSS too, for that matter), the World Wide Web Consortium (W3C) has created a great tool called a validator to automatically check your pages for you, and point out any problems/errors your code might have, such as missing closing tags or missing quotes around attributes. The HTML validator is available online at http://validator.w3.org/. It will automatically detect whether you’re using HTML or XHTML, and which doctype you’re using. If you want to check out your CSS, the validator for that is available at http://jigsaw.w3.org/css-validator/.

Above material from The Web Standards Curriculum. This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

big think: Jeffrey Zeldman Talking about Web Standards


http://bigthink.com/topics/architecture-and-design/ideas/jeff-zeldman-drives-home-the-importance-of-web-standards


Visual Design for Web
Dimensions

Your pages will be displayed on screens with a variety of screen resolutions – from 800 horizontal x 600 vertical pixels to 1024 x 768 and beyond. As a designer, you need to be sure your pages will look OK when displayed in the different circumstances your target audience will encounter. Don’t assume that everyone has the same monitor setup that you have!

The situation is more complicated than simply screen resolution:

  • Internet Explorer and Safari have different amounts of space available for pages
  • Macs and PCs have different amounts of space available for pages
  • The user can adjust their browser to make more or less room available (e.g. showing or hiding different control bars)
  • If your page needs a vertical or horizontal scroll bar, that scroll bar takes up extra space (12-15 pixels)

Based on all the variations, I’ve created a guide for designing pages for the three major screen resolutions, 640×480, 800×600, and 1024×768. Designing with these recommendations will ensure that all your page content within the pixel dimensions will be visible in the worst case situations. My recommendations are only guides, and you should adjust your designs based on your project’s requirements. You don’t have to design exactly for these dimensions. In particular:

  • In the vertical direction, you can have additional information beyond the specification, just keep in mind that your audience may have to scroll to see it. Consider the information within the first 560 pixels (for 1024 x 768 displays) to be “above the fold”. In newspaper terminology, copy that’s “above the fold” is visible in the top half of the paper, and includes the most important articles and headlines.
  • In the horizontal direction, you don’t have to fill the space to the limits of the recommendation. Just because you can design to 990 pixels wide for an 1024 x 768 screen, doesn’t mean you should design that wide

The size recommendations below are smaller than the actual screen size is because there is space taken up on the screen by menus, scroll bars, buttons, and other interface elements not on the web page.

  • Recommended maximum page dimensions for 640×480 screen: 610×280 (sample page)
  • Recommended maximum page dimensions for 800×600 screen: 770×400 (sample page)
  • Recommended maximum page dimensions for 1024×768 screen: 990×560 (sample page)

Browser Display Statistics: http://www.w3schools.com/browsers/browsers_display.asp

Grid systems in Web Design

Grid design is a fundamental skill of any designer. Understanding proportional relationships, white space and composition are all vital in constructing a grid for any delivery platform – web, print & real 3d environments. – Mark Boulton

Five Simple Steps to designing grid systems
  1. Subdividing ratios
  2. Ratios and complex grid systems
  3. Grid systems for web design: Part 1
  4. Grid systems for web design: Part 2 Fixed
  5. Grid systems for web design: Part 3 Fluid


A whole load of considerations

Designing grid systems for print is considerably more straight forward than designing grid systems for the web. First off,in print, the designer has a fixed media size – the paper size (or packaging, poster, whatever). Let’s say a print designer has designed a magazine. The reader of this magazine can’t suddenly increase the font size if they find it difficult to read – well they just move it closer to their eyes I guess. This is just one consideration, there are more but I’m sure you get the point.

So, that’s media size. On the web you have other considerations such as the browser, the OS platform, the screen size and the actual devices that web sites can be viewed on, from PDA’s and Mobile’s to assistive technologies such as screen readers. How do you design a grid for all of this? It’s a really good question and I’m not claiming I have the answer.
. . .

Good designers for the web know that the users who use their sites may want different, and know, with the web, they have the power to change things. The designer has lost, to a degree, the ability to control. For a lot of designers (including me), this has been a tough transition. We’re taught for years to create the delicate balances of white space, the manicured typography and delicate colour palettes, all designed to create harmonious designs which do their job very well.

Then some short sighted user comes along and increases the text size… and… and… totally breaks your design.

I think you get the idea. We can’t be upset when the user wants to change something like the text size. What we can do is design grid systems to adapt to those changes. – Mark Boulton


Grid systems can be constructed from ratios.

Simple ratios such as 1:3, or 2:1 are called rational ratios.
More complex ratios, such as those based on the Golden Section (1: 1.618) , are called irrational ratios.

Fixed layout

A fixed grid for designing for the web is as close a translation from traditional grid design as there is. The designer is using fixed measurements, pixels mostly, to construct the grid and to position elements within the grid structure and a canvas which is based on a fixed size. See, everything is fixed.

Example of the “Rule of Thirds”

Fluid layout

In order for a grid to be flexible (adaptive), we have to use scalable units of measurement such as 100% or Ems. Just a reminder: An Em (pronounced ‘m’ NOT ‘e, m’) is a typographic measurement equal to the point size of the typeface you are using. We also use percentages.

To give us our column width, convert the ratio’s to percentages, which gives us 61.8% for the main column and 38.2% for the right column.

Adaptive Grid System based on the Golden Section

Example of the “Golden Section”


Web Page Layout Grid

Layout Grid

Layout Grid

Photoshop file: Grid Layout

Good Grid system resource: http://tutorialblog.org/grid-systems-in-web-design



Comments

  1. jamie September 22nd

    Comment Arrow

    Demonstrating an understanding of what you learned from the assigned readings about Navigation and Interface Design, give me an example (and an URL) of a well-designed interface and the reason(s) why. Please be specific and detailed in your answer.

    [Reply]

    Dee Kim Reply:

    A well-designed website that could be a good example is SVAs’. http://www.sva.edu
    I first thought this site is too simple without any fun features, however, it seems like the most easy and clear one.
    First, entering the web site, you can easliy find header navigation bar.

    1. Paths
    If you click ‘Undergraduate’, the site shows different departments on the left navigation bar. The upper navigation bar from the index page is maintained. Now if click a department, another menu bar appears on your right side. Again, the left menu bar is still there. The same mechanism goes on. Everything you clicked is highlighetd, telling you where you are. So if you navigated
    ‘Undergraduate>Cartooning>Admissions Time line’, these menus are highlighted on one page which means you don’t have to go back or forth to get to a different menu. Personally I think it is easier to recognize than a breadcrumb nail. They’re using header, left column, right column wisely. Lastly, the title bar of the page shows a breadcrumb tail which is also a thoughtful touch.

    2. Region
    By clicking the ‘Graduate Bar’, you move to another region. The layout of the page is consistent, but the color scheme is different. It definitely shows that you’re browsing a different category.

    3. This site also has a nice search box that tells the scope of the search(google) and shows various search options.

    [Reply]

    Rubina Ramchandani Reply:

    Recently I came across a website http://www.childrensrights.org/. This is a non-profit organization working towards the welfare of children. The website uses a clean layout that has been adapted as a template. This maintains continuity and recall value. The website also uses web designing ‘norms’ and user interface research to its advantage. The header very simply tells us what the company is all about, urges the user to get involved in various ways and provides for quick searches saving the user time and energy. However, the user is also given a set of categories to select and browse through. Some of these categories, depending on the information, have sub topics. A user spending good amount of time surfing through the Internet and looking at websites should find it relatively easy to browse through this website due to its consistency in layout and overall information design . Breadcrumb trails have been made a part of the category head so that the user is not lost and can navigate to another category without any confusion. The template is extremely flexible in keeping with the general layout and look and feel of the overall website.

    [Reply]

    Mike Manalo Reply:

    Website: http://www.klein-dytham.com/
    Author: Klein Dytham architecture

    In terms of navigation, the website utilizes the rule of thirds to emphasize content without distorting navigation. The bottom one-third is a word grid matrix that categorizes the firm’s content (work/portfolio categories, mission statements & company profile and external links ). A bold typeface is then used to indicate the category and then a smaller and greyed out text is used for the sub-context. This navigation system stays constant and helps the user have access to all content. It should be noted the small detail of how the sub-context is highlighted black when you move your mouse over- which works particularly well with the website’s white backdrop.

    The top two-thirds is then allocated for drawings and renderings of the firm’s projects. What is interesting is that the 2/3 space is then divided again in vertical format using the rule of thirds as well. The left space is the one-third portion and has a set design feature of being a black box with text and numerical navigation on the bottom for the project’s content.

    [Reply]

    Aarti Vashisht Reply:

    Dissemination of information on the web can be a challenge. Acquiring information on web can be still a bigger challenge. More than often I would find myself distracted or digressed from the content I initially started with. Agreed, there is no defined understanding of what route the user will adopt to seek the information and that the user behavior is usually unpredictable. However, even though the user is unpredictable, I would not completely agree that he wants to get distracted, I believe that his attention diverges because the site has not been designed well. The site is not providing good clues, as mentioned in the chapter on interface design

    “Electronic documents provide none of the physical cues we take for granted in assessing information. When we see a web hypertext link on a page we have few clues to where we will be led, how much information is at the other end of the link, and exactly how the linked information relates to the current page.”

    Some of the bigger enterprises invest a great deal of time and energy on developing their web presence. The magnitude of their content makes it a necessity for them to organize their information. For me one good example is http://www.bbc.co.uk , this is the home page or the shop window of the BBC network sites. Even though BBC is lot more that just news, it is understand, how it is perceived by its audience. It is well structure and easy to explore. Like a good content page, it connect you to the labyrinth information. What more it allows the user to sift through, remove the unnecessary content from its view and customize the home page (even though the customization has not be boldly highlighted, it has been given a noticeable place and cues). Since the site and its sub-sites use a consistent paths for navigation back and forth (consistent top and bottom bar of each page), if the user is lost it help the user track back into familiar environments. Each of the sub-sites have a distinct yet familiar touch. This has been achieved by conscious use of key graphic elements. There are many aspect that make BBC site a pleasurable walkthrough but as the articles mentioned primarily the space is easy to comprehend.

    [Reply]

    Christine Nakashiba Reply:

    honeyee.com

    I love this website.

    It’s a Japanese website, and because the navigation is so simple with enough English, I can easily navigate my way around.

    1. The navigation. On the homepage. I like how the right side is always the same throughout each page: the navigation. But, when I see this first page, I don’t even look at it, I just look at the left side with the large navigation. Then when I go to a page, the navigation on the right stays the same. So, there is no disconnect from the homepage to the following pages. Except when you go to the store and to the Prime blog. Clicking on either page, it opens up on a new page, and so there is no real need for a navigation, it wants to be separate. But, there is a link at the top of all pages to the homepage.

    2. The consistent use of mainly black, white and yellow help keep everything looking like it’s from the same place, but in different forms.

    3. The blog page is great, it is a page of many different people’s blogs and they color code their box as to when they last updated their website.

    4. This site seems really fun and energetic, but it still has some of the basic web standards implemented. For example, the home page link and logo at the top left corner. On the blogs, each person puts where they are from, and the dates are available.

    5. I think this is a great concept for a website. It gives exposure to each person who has a blog, just by association. It also gives people what they want: pictures, a look into people’s lives and a way to feed their Curious George. With it’s friendly face, it’s used more as a marketing tool than a technical and straightforward website.

    [Reply]


  2. jamie September 22nd

    Comment Arrow

    “Web Standards” has many benefits and grew out of the obstacles and problems designers and developers ran into the 1990s. Explain in detail one idea you found new, interesting, or open for discussion from the video “big think: Jeffrey Zeldman Talking about Web Standards.” (Note: Your entry must be different than comments already posted by your class mates.)

    [Reply]

    Dee Kim Reply:

    The thought behind his idea was this: rather than using 1/4 of the budget in designing 3-4 websites, it’s better to have one website, and invest money in other places. Nowadays, design industry is concentrating on user experience. We think that we should consider all demographic groups that we’re desiging for. Sometimes that becomes creating 3-4 different versions of things which is similar to making websties for different browsers. Listening to Jeffrey’s idea, I learned that sometimes we should be clever, think outside of the box, and find a whole new approach that can be universal and flexible at the same time.

    [Reply]

    Christine Nakashiba Reply:

    Around 4:50 he talks about him arguing for web standards, about why they need them. And he said that they said: why do we need them? It all looks the same to me. And he humbly replied: well, it doesn’t to me, but o.k, but it’s making us look like bad designers.

    I know this doesn’t have anything to do directly with the concept of web standards, but it was a great thing for me to see. First of all, that response is so weak, and it makes designers look bad. Second, because he didn’t stand up to them right then and there, he had to spend so much extra time to get what he wanted: idea of, going around the bush.

    [Reply]


  3. Rubina Ramchandani September 29th

    Comment Arrow

    What I found extremely interesting about the discussion with Jeffrey Zeldman is his is definition of Design. He states ‘Design, like everything in life, is about understanding what the problems are, solving those problems and there is always trade offs.’ The problem here was identified. A problem where web browsers were competing with each other and too much time was spent developing a page that was supported by three or four browsers. A solution was put forth and accepted by the web browsers. A solution was put forth where all browsers were asked to comply with small group of standards, the web standards, which would work universally across all devices. They eventually did and today all browsers support them. This has resulted in more time, money and energy is being spent on design, content development, usability and information architecture.

    [Reply]


  4. Mike Manalo September 30th

    Comment Arrow

    Around the 7:46-8:02 mark, Jeffery states, “…There’s a trade off. When you design a site, you have to know who the users are, the lead users and maybe three other kinds in mind…and you might have some who are an edge case where the site work for the them, but it’s not optimal for them.”

    What is interesting about web standards, when described by Jeffery, is that there is a difference between typology and design method. The goal is still to have good web content that is legible and accessible when presented. Thus, web design isn’t just merely high levels functionality- but a balanced art of graphic content with user interface. That is why we can list a variety of websites, from the Flash intensive to the template oriented and to CSS and Web 2.0 based, that function differently- but in the end, provide favorable experiences for accessing great web content.

    [Reply]


  5. Buddy September 30th

    Comment Arrow

    1. Website example: http://www.newyorker.com/arts

    I give a lot of praise to The New Yorker for being able to put together a successful website that is not only easy to see aesthetically, but easy to navigate through and shift focus whenever one wishes. For example, upon visiting the site, you’ll notice up top the navigation which is pretty straight forward nonetheless, but what it is interesting about this specific navigation is that it always remains at the top, never shifting sides, never changing in dimensions, etc., which plays as a trigger, a place that one, if lost, can always revert back to find easily to re-begin their search or whatever it is they were visiting the site for. Another cool interface aspect about this site, is NY’s ability to put together all of this information (i.e., books, authors, art, humanities, politics, humor, short fiction, video, etc.), all of these things in an orderly fashion that never seems to get overwhelming like some other sites that just dump and dump more and more material at the viewer. I think NY’s ability to utilize these qualities has given them a lead up in having a successful site that may not be the prettiest or unorthodox site, but in this case, simple seems to be the answer.

    2. In watching Jeffrey Zeldman’s video on web standards, the most important thing that stood out to me, is this continuing idea that content needs to be accessible. And this statement is very true when it comes to wed standards. The content that exists within a site can’t just exist within the site and be there, it has to be so easy to access almost so easy to the point where it seems the site is doing all the work for you. To me that is designing on the most important web standard and simply because if the message of your site (i.e., the design, the navigation, the interface, the easy browsing, the easy search, etc.), is being misunderstood by the viewer, then the site is useless because websites need to be just like “Google,” easy to find.

    [Reply]


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Interactive Design 01