Beauty and the BeastA Practical Approach to Standards-Based, Beautiful Web Designs

Miguel LopezSolidQ: www.solidq.comBlog: www.augurarte.com

“ Mirror, mirror, on the wall, Who in

this land is fairest of all? ”

Little Snow-White byJacob and Wilhelm Grimm

Agenda…

Once Upon a Time…Beauty and the BeastOuter BeautyInner BeautyInner Beauty in action Beauty measured: W3C, WCAG, WAIDynamic designs using XML, XSLT, XPath

Once Upon a Time…Introducing the concept & importance of beauty even in a Web developer's/designer's life

“ Once Upon a Time there was

a beautiful girl…”

but…

What is this session about?

1• Idea, problem

2 • Design, solution

3 • Implementation

4 • Deployment

IE is no more the King…

“ In a small village nearby, a beautiful young woman named

Belle…”

but…

(CC) Cuppini (flickr)

Beauty?

In people…

In nature…

quality of things that makes us love them,

instilling spiritual delight

Beauty & the Beast…Identifying beauty & ugly Web interfaces

And what about Web designs…?

What makes a Web Page beautiful?Are they images?Is it text?Is it navigation?Is it composition?Is it blank space?What is it?

A mixture of factors…

Easy of use How?Easy of structure What?Clear understanding of the offer/product/services What?Good and identifiable navigation Where?

… and what’s about usability?

3questions?

Where am I?

What’s here?

Where can I go?

how to fall in love in front of a Web Page…

Demo 1

?

?

?

?

?

?

?

Outer BeautyWhat we see, we evaluate, we like/dislike…

Outer Beauty in Nature…(

aesthetics – façade

)

(CC) Naama in Flickr

Outer Beauty in People(

aesthetic – façade

)

Source: www.ecodiario.es

Source: www.happycog.com (Jeffrey Zeldman)

Outer Beauty in Websites ( Front Page – façade)

Apparently, goodlooking Web Pages…

Demo 2

Inner BeautyGoing further, knowing a little bit more about what we are looking at

Inner Beauty in Nature

(inside –

estructure)

(CC) audreyjm529 on Flickr

Source: swami.blogspace.fr

Inner Beauty in People

(value – charism

)

Source: www.happycog.com (Jeffrey Zeldman)

Inner Beauty in Websites ( Front Page – façade)

Semantic tags,

No tables,

Well indented

Looking into your soul… not so goodlooking Web page!

Demo 3

HTML Incompatibility Detected!

Inner Beauty in ActionGoing further, knowing a little bit more about what we are looking at

Basic principles…

WORDS

• structurePICT

URES

•presentation

CODE

•behavior

(X)HTML

CSS, XSLT

ECMAScript

WEB =

Ʃ (X)HTML + CSS

+ ECMAScript

So remember…

Basic Architecture in three layers:

(X)HTML for structure and basic contents

CSS for presentational issues

(Non-intrusive) JavaScript for behavior

A better desing, outer & inner beauty compliance

Demo 4

Web Beauty MeasuredStandards in Web Design: (X)HTML, CSS, ECMAScript

How we measure beauty?

In design

Greek philosophyEgyptian knowledge

proportion, cannons…

Gestalt…

On the Web…?

JavaScript

CSSW3C

(X)HTML

XML

XSLT

XPath MathMLWSDL

XFormsSOAP

RDF

PNG

DOMOWL

SMIL

Transforming bad code into good Web Standard code

Demo 5

Dynamic design using XML, XSLT, XPathand Microsoft Expression Web XML Authoring tools

design can also be connected to data not only contained in content

documents (HTML) or databases (SQL Server)

eXtensible Markup Language

aka

XML

XMLXSL, XPath

There are also W3C standards!

easy

With Expression Web (data

views)

Going further: Dynamic Designs based on XML with XSLT

Demo 6

&Summing Up…

Beauty is important in Web Design & Development.Designing Web interfaces with standards in mind is a must-to (not avoidable, sorry!).Creating Web interfaces with standards in the first steps of development reduce compatibility issues at the delivery phase.Do a semantic use of the (X)HTML, is the right way.Layouts: Doing it with tables is not easier.

More info & resources…

All standards… http://www.w3.orgBeautiful examples of XHTML/CSS: http://www.cssgarden.comExamples, articles, tutorials… http://expression.microsoft.com/es-es/default(en-us).aspx Basic knowledge about Web Standards… http://www.w3schools.com Web Standards Project: http://www.webstandards.org/ My Weblog: http://www.augurarte.com

Some Interesting books…

Designing with Web standards (J.Zeldmand)Designing Web Usability (J. Nielsen)Don’t Make Me Think (Steve Krug)Guía Práctica Expression Web (Miguel López)

“…You, my queen, are fair; it is true.

But the young queen is a thousand times

fairer than you ”Little Snow-White byJacob and Wilhelm Grimm

Thank you allAnd they all lived happily ever after, and that is the end of the story

Question & Answer

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market

conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.