Styling Attributes

Styling web pages with CSS is never easy, but I found a way of styling attributes of tags. Very useful if you start dabbling with microformats or just want to style specific links in a certain way.

Examples

a[rel="tag"] { color: #F00; }
a[href="http://ifingers.com"] {color: #FFF; background-color: #00F; }

One Web Acid2 and CSS3 by Hakon Wium Lie

CTO, Opera Software

howcome AT opera.com

First Part - One Web

WAP being an example of bad practice. The web should evolve.

Opera Web Devices

Started in 1995. Opera for Desktop for Windows. Then in 2000 Opera for Mobile - good for Opera. Opera for Devices - in the past 12 months.

Example is the Wii. Opera is the default Wii browser. A sharing experience, changing the web. One code base for all devices.

The $100 dollar laptop. Cheap machine, not for public. Think less, less, less, so a child can use it. Small keys for kids. Opera is perfect for it.

Similar to the Wii, no hardrive, wi-fi, mesh networking.
Foundation - One laptop per child.

mini.opera.com - mini is different. Small java app, abou 100k. Proxy server fetches data, compresses it to binary. Opera mini enables good surfing app. Free.

specifications

HTML5

• WHAT WG and W3C
• the

CSS

• CSS 2.1
• CSS3 Values and Unites
• CSS3 page units

Video on the web today

Obscure video coding. Video should be made a first class web citizen.

2 problems:

part 1 - the markup ie

part2 - video format

Right way of encoding. Most video formats are proprietory. Open standard for video.

Ogg Theora video is open format - similar to png, used by wiki.

Ogg Theora

Cousin of Ogg Vorbis from xiph.org generator - ffmpeg2theora

CSS

CSS 10 years old. Hakon worked with Tim Berners Lee at SERN. Hakon proposed CSS.

shows css zen garden as an example.

CSS3

CSS3 has been split into 30 modules. Work in progress.

Media Queries

Handheld modes is an example of a media query. Media Types include presentation mode - projector.

@media handheld and (max-width; 300px)

Multi column Layout

True multi column layout. - Mozilla implememnted it now. Scales images and adds columns depending on the size of the screen.

CSS3 Multi column Layout

define number and width of columns

body {
column-width: 14em;
column-count: 3
columns

Great for CSS for professional printing.

CSS3 Paged Media - crop marks, multi columns, footnotes, floating elements such as images to the bottom of a page

example

Headers and Footers

title { string-set: header content }
@page

Page Floats
div.figure { float: bottom page }

Cascading Style Sheets - Designing for the web - third edition. Used html and css to print the actual book. Using printsxml

A book microformat - boom!

• set of class names:
• titlepage
• table of contents
• preface
• chapter
• appendix

semantics - borrows names from DocBook.

Web fonts

Hopefully in the next 12 months... could be wrong...

Microsoft's core fonts

Andale Mono Arial Comic Sans MS Courier New Georgia

web fonts introduced css2 in 1998. Supported by Microsoft and Netscape.
No support for truetype

i.e.
@ import url (http://www.

Acid2

Acid2 was made to show if IE was valid or not. Acid1 tested for box model. Safari was first to get it right. Firfox 3 will pass Acid2 in 07. Microsoft IE7 still does not pass the Acid2 test.

Web Applications

Use web standards for web applications - contrary to Jeremys presentation! Opera have developed Opera Widgets. Almost 1000 widgets available.

Google Gears

A API framwork for javascript, adding sql database to the browser. Store data off and online. Off-line access to web pages. More robust operations!

How to be a creative sponge - John Hicks

Hicksdesign, based in Witney outside Oxford.
Famous for Firefox and Thunderbird Logos

How do you do it? How do you get te ideas to actually design something?

Lots of parts of the design process - colour, grids.

"Designers need to be visual leeches, constantly cataloguing and recording information - Jason Santa Maria

Creative Sponges - collect creative juices

The 3 stages of the creative sponge

1. Collect
2. Catalog
3. Create

Collect

Everything you collect is relevant to the design progress
Observe life, how does the light reflect off the walls?

• Collect Books
• Penguin books - a design classic, good typeography - cheap!
• Collect Magazines - weekend supplements - good ideas for quotes, headers and side boxes, typography.
• Found Typography - Take pictures of signs
• Stuff off the internet - very easy to drag and drop
• Print and Pattern blog, johnsons thought of the day
• Veer - good for type - try the flont
• Freebies - Sign up for mailinglists - T26, Burbank
• T Shirts - threadless t shirts, great t shirts, colour schemes
• Leaflet Racks - oooh, lol they are the designers buffet lol take everything, one of each, take even the bad ones.
• Clothing labels and tags
• Packaging - breakfast cereal boxes - dorset cereals - american typewriter
• Photos that go wrong: Photos using other objects - take photos through a beer glass
• Doodles from you head - let out the stuff in your head
• But, don't collect websites! Approach doesn't work.

Catalog

"Designers are magpies..."
The good old sketchbook - use Moleskine, and letraset, writing notes is as important as images

John Hicks used to spurn Moleskine but now actively uses landscape Moleskine Reporter notebooks. These have great paper, and fit nicely between you and your computer keyboard.

• Binders
• Box files
• Not an easy way to get it out again
• John Hicks uses iPhoto. Create hierarchical Scrapbook Folders
• Yojimbo - takes everything

The "killer app" for the web creative sponge: flickr

For the first time peoples personal collections are being shared, great groups - Pictograms and Pucblic Space Typeography

Create

Peter Blake, famous for the sergeant pepper album - goes to markets, buys objects nad rearranges them.

The Fear : blank white paper

The process of collecting can stimulate

Creative Cataysets

• Deadlines!
• Change of environment - walk/drive
• Go to bed!
• Peace and quiet (go for a wee)
• Take a shower - hot water stimulates the brain
• Mind Mapping

Critique it!

Shows example of the London 2012 Olympics - and Daily Mail readers versions - any better?
Mood Boards are your friend!
Create a British Theme - not the empire and stuff. Italian Job, Mr Ben, Coldstream Guards, Sgt Pepper Album - look for common elements eg Red.
Someone else would do it and get a totally different mood board

Advantages of mood boards

1. Concentrates on the concept/mood
2. Stimulates concersation
3. Quick
4. Clients can make their own

Design Patterns

Patterns are optimal - collect design patterns - check out tab design patterns on flickr

Sample colors

Dodgy phtotos can create color patterns

Finally a couple of examples

Open Doors student site - slanted text, copied colors

"Soak up everything, you never know when you are going to need it"
- John Hicks

• http://hicksdesign.co.uk/journal/be-a-creative-sponge
• http://del.icious.us/jonhicks/sponge

High Performance Web Sites by Nate Koechley

One dozen rules for faster pages

1. Share results of our research in t Yahoo is firml committed to openness

Why talk about performance?

In the last 2 years, we do a lot more with web pages. Steve Souders - High Performance Two Performance Flavors: Response Time and System Efficiency The importance of front end performance!!! 95% is front end. Back0end vs. Front-end Until now we haveon 1 Perception - How fast does it feel to the users? Perceived response time It's in the eye of the beholder 2 80% of consequences Yahoo Interface Blog yuiblog.com 3 Cache Sadly the cache doesn't work as well as it should 40-60% of users still have an empty cache Therefore optimize for no-cache and with cache 4 Cookies Set scope correctly Keep sizes low, 80ms delay with cookies Total cookie size - Amazon 60 bytes - good example. 1. Eliminate unnecessary cookies 2. Keep cookie sizes low 3. 5 Parallel Downloads

One Dozen Rules

Rule 1 - Make fewer HTTP requests css sprites alistapart.com/articles/sprites Combine Scripts, Combined Stylesheets Rule 2 - Use a CDN amazon.com - Akamai Distribute your static content beofre distributing content Rule 3 Add an Expires Header Not just for images images, stylesheets and scripts Rule 4: Gzip Components You can addect users download times 90% of browsers support compression Gzip compresses more than deflate Gzip: not just for HTML for gzip scripts, Free YUI Hosting includes Aggregated files w Rule 5: Put CSS at the top stsylesheets use < link > not @import!!!!! Slower, but perceived loading time is faster Rule 6; Move scripts to the bottom of th te page scripts block rendering what about defer? - no good Rule 7: Avoid CSS Expressions Rule 8: Make JS and CSS External Inline: bigger HTML but no hhtp request External: cachable but extra http Except for a users "home page" Post-Onload Download Dynamic Inlining Rule 9: Reduce DNS Lookups Best practice: Max 2-4 hosts Use keep-alive Rule 10: Minify Javascript Take out white space, Two popular choices - Dojo is a better compressor but JSMin is less error prone. minify is safer than obstifacation Rule 11: Avoid redirects Redirects are worst form of blocking Redirects - Amazon have none! Rule 12: Tuen off ETags

Case Studies

Yahoo 1 Moved JS to onload 2 removed redirects 50% faster What about performance and Web 2.0 apps? Client-side CPU is more of an issue User expectations are higher start off on the right foot - care! Live Analysis IBM Page Detailer - windows only Fasterfox - measures load time of pages LiveHTTPHeaders firefox extension Firebug - Recommended! YSlow to be released soon.

Conclusion

Focus on the front end harvest the low hanging fruit reduce http requests

Links

nate.koechley.com/blog nate.koechley.com/talks/2007/atmedia-london

Beyond AJAX by Jesse James Garrett Notes

Jesse James Garrett from Adaptive Path

Notes made at @media07, Islington, London

Their work:

Flickr, Creative Commons The elements of user experience - check it out book also available. jig.net - visual vocabulary Blog - comes from one of founders of adaptive path Jesse coined the word - "AJAX". Web 2.0 - need bright coloured logo - lol

What is the web good for (or at)?

Example, early TV, modeled on Radio, and Live theatre. As tv evolved, in the mid 1950's there was a flowering of activity and innovation. 10 years on the evolution of the web, similar flowering.

It'a a big web out there, be a part of it

We are contributing to the web when we put something out there. Most compelling example is Flickr - Because they acknowledged the existence of a larger web. i.e. Uploaders, Web tools and publishing, prints and yahho intergration.

Interfaces, not pages - applications, not sites

Allow people to manipulate data, away from the "page metaphor" model. KAYAK shown as an example - aggregating results from many web sites, and manipulate results

Products that get better with use

Web is most powerful when people are connected together. YouTube shown as an example. Showing the band, "OK Go" - Here it goes again. Made their own video, put it on YouTube, and the video endded up on MTV. It won a grammy! Not only did it further OK Go but also YouTube - then google bought it for 1billion dollars.

Delivering rich experiences

In ancient greece, Ajax was a mighty warrior, a missile from the cold war. First email was from a Dutch soccer fan. lol People want to define AJAX in a specific technical way - which misses the point. But can be characterised by two points:

1. asynchronous interaction model - we are not just trying to retrieve a page anymore
2. Browser-native technologies - If you asked someone to create a rich interaction on the web, all the caveats such as using windows xp, with service pack 2 - lol

Favourite metaphor for AJAX - "Roller skates for the web!" - Bruce Sterling Javascript creates a sense of fluidity. Replicate the feeling you get from using ggoogle maps. The story begins in 1886, Scientific American Supplement - a new photographic apparatus. Did not work, as George Eastman, who created a continuos roll of film, instead of plates. He said, "You press the button, we do the rest". He constructed technology to work with his film, he dubbed the product - "The Kodak". He reduced the 19 steps from the SAS article to 3 steps. Even the marketing experience was simplified. He hid the complexity from the user. It transformed the industry, unimaginable before. People didn't see the possibilities, map sites were as good as they were in 1998. GMail was the first AJAX app. This got Yahoos attention, felt threatened because of Yahoo mail. They called a meeting, compared their stuff to the dynamic interfaces of google. Yahoo maps was not on the list.

How do you create a transformative product?

What do you want users to say after you have developed - "Can't live without it." Steve Jobs given as an example. "Over simplified quote". When a new technology comes out. WordStar screen shot given as an example, and when compared to a typewriter. i.e. video cassette recorders, How do we get past technological mindset. Then you get into the problem, and you rely on product features - showing Microsoft word with all the tool bars turned on. The blinking unset clock "The really great person will keep on going - and create a beautiful elegant solution, that works." Steve Jobs, 1984 Stop relying on technology Stop relying on features Rely on user experience instead! Eastman could have replaced plates with film, but instead he stood back and created something special. TiVo shown as an example, they could have just replicated the Diamond Rio pmp300 - first mp3 player, modeled on a cassette player. The record industry tried to ban the pmp300. 3 years later, the Apple iPod, did less, cost more but then took over the market. The success is due to the fact that the iPod acknowledged the way that users interact with technology.

We respond to products as if they are people

Products are people too

We develop a powerful, emotional connection with the product. The products that work best, are ones that have a distinct personality. Shell is a term for user interface. Users only care about the user interface - the rest is magic.

The best Web 2.0 apps start with the user interface

"Designing from the outside in" - Tim O'Reily i.e.

Experience Strategy

• Google calendar started out - fast, visually appealing, and joyous to use.
• Drop dead simple to use.

Google Calendar has already overtaken the no2 player. They set a star to sail their ship buy Apple have created an end to end system, beyond what the ipod on it's own can deliver. Flickr experience - check out Flickr's about page! i.e. We want to help people ie, the role that the product plays in the lives of the users.

The experience is the product

Interface Design Juggling by Dan Cederholm

Notes taken at @media 07 at the Business Design Centre, Islington.

SimpleBits.com

Inspiration to the talk comes from last year in Oregan, which was held at the sametime as a juggling convention.

Juggling is... Keeping everything in the air! Special Announcement ToupeePal - Wig 2.0? toupeepal.com

Color

Start with a small color palette Color is emotional Online Color Tools wellstyled.com/tools/colorcecheme2/ Colorjack Take shades from a nature images Pixelate an image in Photoshop Dan normally starts with a blank canvas Then fill with color Take a start point i.e. a logo 4 colour palette Reuse the colors thoughout the design Then from the color palette select some lighter shades to compliment Link color is important. Keep the link color consistant. Squint at the page

Typography

Great typeography is invisible Web design is 95% typeography Too few fonts? In the renaissance the italian artist only had one font. DO THE BEST WITH WHAT WE HAVE Letter spacing, italicising Georgia - headings Verdana for everything else CSS tags make iti nteresting Good book - The elementso of typographic design Use the best ampersand available - different fonts The element of of typographic design for the web - webtypography.net Used Avenir for logo and search button Veer.com - buy a t shirt, and they'll send you stuff. Myfonts.com - newsletter

Favicons

The most importanty design element of any site, no really subtraction.com tanyamerone.com How to create favicons Three choices Scale the mark down to 16 x16 Choose a fragment of the logo Use something unique Iconographer is a good programme - create in Photoshop and paste into Iconographer

Add detail without adding complexity.

Understamd the limitations of current browsers

Suggest the box

Style elements of the box - add subtle border to backgorgn veerle's blog - good example

Microformats

Microformats are... microformats.org - about us page explains Mark up a contact like this Go to microformats to find the right style for your data - i.e for contacts, events etc hCard - Contact Information Go to the online code creator microformats.org/code/hcard/creator See Simplebits example - works using technorati THIS STUFF WORKS NOW Planting Seeds - Use semantic markup to allow other people to do cool stuff with it SPARQL.org - Scrugy - uses microformats to parse cork'd data - like an 'accidental' API Search for Can your website be your API? ToupePal uses hReview for reviews and hCalendar for events http://simplebits.com/publicatopns/speak/juggling What does the h stand for in hCard etc - means html

The Broken World by Molly E. Holzschlag

Solving the browser problem once and for all

Browsers are Software

Take a look at browsers, web developers are not necessarily computer scientists. Software is, at its best, always evolving, provided its developers are also evolving. Just as Photoshp is different from Fireworks, so can browsers differ. Browser development is a complex blend of variables

Some things we know about software

No matter the method, the experience is ultimately human. No matter the method, buiding software to standards and best practices requires having standards and best practices to begin with. It is a grave assumption to believe anything about developing a web browser is easy, cheap, or fast. "IT proefessionals have a resposibulity to understand the use of standards - Tim Berners Lee

1. Development Approach

Non linerar, iterative and long-term approaches appear to best fit the emerging model of software development for as well as on the web. Rapid Application Development (RAD) - not as good as Agile / Extreme Programming.

2. Working with Standards

css 2.0 is the current recommendation, 2.1 is not recommended! Community involvement is critical to eliminating bugs, as Molly did with Microsoft. Specifications are ambiguos. Who likes to read W3C documentation.

Operating Systems and Tools

Some browsers can be a platform, like Opera being used on Wii.

Extending Browsers

i.e. scripting extensions, firebug - for firefox. The IE7 web development tool is cool. Dean Edwards, IE7 scripts, he took the bugs from IE6 and fixed them with his own library.

Proprietary Development

i.e. Netscape implemented 'blink', hence IE responded, instead of working on the CSS implementation.

Fractioning Specifications?

WhatWG created their own version of HTML, HTML 5. Now html and xhtml are seperate. W3C - HTML Working Group "The work on HTML5 is one of the largest and most important standards ever. HTML is a rewrite, not an upgrade! Dave Raggett (W3C) created tables. Tables were originally developed for layout!!! Although it wasn't implemented.

Browsers are Evolving

A closed infrastructure is dangerous. Understanding this side of story is important.

Genral Information about Browsers

Mozilla/Firefox

Software Model: Open Source Origin: Netscape Camino and Flock have evolved from Mozilla. Evolved incrementally, "No Big Bangs!"

Opera

Software Model: Proprietary Mobile Development is a stong point for Opera. Opera Innovations - Tabbed browsing etc

Safari / Webkit

Model: WebCore Faster than Gecko Unless the UA reporys itself as Firefox (not default) certain sites and features work improperley such as Gmail, Facebook and even aspects of WordPress. First browser to comply with Acid2 Each fix was blogged - by Dave Hyatt? Safari has still struggled with implementation and bug issues.

Microsoft Internet Explorer

A big sigh - caused more problems than anything else Model: Proprietary Origin: Mosaic > Spyglass Mosaic XHMLRequest is microsoft technology.

Specs verses Use

Draconian Error Handling CSS 2.1 RGB specs sgiykd yse percentages or specific values - not a hybrid of both i.e. Don't break the float in printed docs - CSS 2.0

How do we build better browsers?

We are the committee

Pathways to Success

Create Common Baselines Clarify Ambiguous Specifications Use Transparent Development Cycles Keep an Open Dialog with Community Foster Events and Networking Compete on User Interface and Browser Features, not standards Create and Follow Real Test and Use Cases There is an open door, as an opportunist I want to walk through it.