INP 150: Web Coding I

1
INP 150 Web Coding I

• Lecture 19 Advice for a fledgling creative

2
Web design is more than coding

• You may think that web design is a simple matter
  of coding, but if you look at examples of good
  design (alistapart.com, wired.com, blogger.com,
  etc.), you may be left with the feeling
• Where do I start? Do I have to be born with that
  sort of design ability?

3
A note of reassurance...

• Most excellent websites are teams of designers,
  coders, photographers, information architects,
  SEO experts, programmers and administrators,
  usually tied together with production managers.

4
But!

• ... it is an uphill battle to get recognized and
  gain work.
• A little understanding of the many knowledge
  domains will offer you a context
• To get a job, you need a decent portfolio. To
  have a decent portfolio, you need to develop your
  design skills.

5
Where to start?

• Learn a little about digital graphics! Purchase
  software (or download free software, e.g., GIMP),
  and try out a few tutorials
• Look through some books (or articles) on
  Information Architecture and web usability
• Learn the basics of typography, look at examples
  (print and web) for inspiration
• Learn the basics of color choice, choose colors
  wisely
• cont'...

6
Where to start? (cont')

• Slump around online... a little each day!
• Read articles at alistapart.com, wired.com,
  adaptive path, other design resources
• Read essays from the leaders Tim O'Reilly, Jakob
  Nielson, Tim Berners-Lee, Eric Costello, etc.
• Learn to write for the web!
• The best way is to read on the web
• Learn new technologies, new languages (Javascript
  is a good place to start)

7
Some collected advice

• I've collected advice from a variety of sites and
  articles, and would like to share the value of
  keeping up with web issues

8
Creating the grid

• Design a grid! Think before you design...
• Your text and images should create hard edges
  that direct the eye and suggest structure...

Image source http//www.webstyleguide.com/page/gr
ids.html
9
The fold

• Mind the fold...
• Assume you have less than 600 pixels above the
  fold, which should be rich in meaningful images
• Vertical scrolling should be used for getting
  supplementary information the essentials should
  be above the fold

Image source http//www.webstyleguide.com/page/gr
ids.html
10
Relinquishing control

• The belief that the web page should be controlled
  down to the pixel is a natural result of a deep
  heritage of print design
• Many forum questions regard how to force a
  certain look across browsers and platforms
• Create adaptive web pages, which will in turn be
  accessible
• Use relative font sizes, create fluid (hence
  scalable) layouts, and give the control back to
  the user the web is not print!

Article A Dao of Web Design, alistapart.com
11
People do read online!

• One day, the bad Internet fairy shut down all
  online organizational and company sites.
• Developers thought too bad, no more web, slept
  in late, nibbled on their low-fat bagels, went
  back to bed
• However, the users still stayed online, reading
  and writing, laughing and cheering, sending
  email, blogging
• After a few days, the Internet fairy put the
  sites back online. Hooray said the developers!
  They immediately started designing and after
  finishing their sites, they hired writers to fill
  in the gaps on their pages. As dumb as a sack of
  hammers.

Article A Fairy, a Low-Fat Bagel, and a Sack of
Hammers, alistapart.com
12
Asynchronous web towards a platform

• People come to expect more responsiveness from
  web applications, as opposed to the standard HTTP
  response
• Creating pages that can asynchronously download
  content does not require brand-new technologies
  or proprietary stacks a combination of
  Javascript, HTML, CSS and the XMLHttpRequest is
  enough
• Though the components of AJAX have existed for a
  while, we have online started to apply them in
  meaningful ways
• Google has pioneered many of these new
  discoveries with web applications like Gmail and
  Google Maps

Article AJAX A New Approach to Web
Applications, adaptivepath.com
13
Users adding value

• The traditional model of the web is providing
  access to content
• However, the most successful sites of late have
  come from giving up content to users, e.g.,
  Wikipedia (and all wikis), blogging sites
  (blogger, myspace, etc.), and social bookmarking
  (del.icio.net), peer news (digg, slashdot), image
  sharing (flickr), etc.
• Pay attention to the long tail, providing
  services instead of canned software, and
  lightweight development/business models

Article What is Web 2.0, Tim O'Reilly,
oreillynet.com
14
Don'ts by the infamous Jakob Nielson

• Don't have long paragraphs of unbroken text...
  text should be scanable and meaning should be
  apparent without reading the text
• Don't design content to look like ads, including
  banners, animation and pop-ups... users will tune
  it out
• Don't use small, fixed fonts
• Don't offer search unless you keep statistics on
  usage and constantly tweak it
• Keep forms as simple as possible cut out every
  field that isn't necessary
• Don't hide contact information hurts your
  credibility
• Source Various articles, Jakob Nielson,
  useit.com/alertbox/

15
I'm counting to 5ms...

• Studies should that 5 milliseconds of exposure to
  a web site is all it takes for a user to
  determine how they feel about a site
• There is not, of course, any standard rule for
  creating a site with impact
• The best practices include good color choice,
  minimalistic designs and user testing discount
  testing if you can't afford the real thing!
• Source Create Sites with Impact,
  www.netmag.co.uk

16
In conclusion

• The details are very important you must pay
  attention to color, spacing, font choice, layout,
  accessibility and presentation without losing
  track of quality content and user needs
• Solid coding techniques, such as using CSS for
  style, using XHTML for thin markup, and other
  more advanced topics will help you create
  successful sites