Where web design is heading?

- Daddy, Daddy I need a new computer!!- What for?- Mainly for web browsing and communicating with friends?- What it should be like?- It must have at least dual core 3GHz CPU and 4GB of RAM!!- ???? $$$$$ @#$#$&@)#*@

Trends in design & optimization

In 2010/2011

Janusz Kowalczyk - 2010.11.26

Agenda

• HTML 5• UX• Accessibility• Ubiquity• Simplicity & minimalism• Optimization• Security• Design tools

HTML 5What's new:

• Canvas

• Media support

• Say goodbye to Flash and Silverlight :)

• Off-line database storage

• Drag-and-drop

• Not (yet) in specification

• Geolocation

• Web SQL Database / a local SQL Database

• Indexed Database API

UX – User eXperience

UX – what's that?• User experience is subjective and focuses on the use

• It's all about HCI (Human-Computer Interaction)

• Three main factors that influence user experience

• User's state

• System properties

• Context of use (situation)

Why follow those rules?• Higher revenues through increased sales

• Increased user efficiency and satisfaction

• Reduced development costs

• Reduced support costs

Accessibility

Who & How:

• WAI - Web Accessibility Initiative• WCAG - Web Content Accessibility Guidelines

• WAI-ARIA - Accessible Rich Internet Applications

What for ?

• There are 1.3 million disabled people in the UK who are available for and want to work (*)

• Speech synthesis and/or control

• Keyboard and touchscreen control

* - Source: Office for National Statistics Labour Force Survey, Jan - March 2009

UbiquityWhere:• Tablets

• Mobile handsets

• E-book readers

• Touch screen devices

• Game consoles

Why & How:• Improve accessibility for people with disabilities

• Key-press navigation

• Adapt layout and content to “new” media types: 'horizontalism', monochromatic displays etc.

• CSS media queries

http://theymakeapps.com/

http://mad-ar.ch/

Simplicity & Minimalism

How:

• Simple message

• Lots of white space

• Strong typography

• Surprising colour schemes

Why?

• Focus attention

• Emphasize differences

• Easier to remember

• Improve accessibility

http://www.kylestanding.com/

http://www.madebysofa.com/

http://www.pixelcraft.ie/

http://www.elysiumburns.com/

OptimizationMy 4 best tips

• Sprites / Animated PNG / SVG

• Unobtrusive Java Script (DHTML)

• CSS & JS Compression

• Graceful degradation & Progressive enhancement

Why use them?

• Decrease costs

• Speed-up page loading time

• Improve user experience

• Improve accessibility

• Future Proof

Optimization 1/4

Sprites / Animated PNG / SVG

Why use them?• Web browser spend 5-38%of the time to download

HTML and 62-95% loading images, scripts, CSS• Decrease the number of requests by 10 or more• Decrease page load time• Save money

Optimization 2/4Unobtrusive Java Script (DHTML) • Separate functionality from page structure/content and

presentation

• Avoid cross-browser incompatibility

• Progressive enhancement (support user agents that may not support advanced JavaScript functionality)

Best practises• Capability detection

• DOM Scripting (avoid browser-specific extensions)

• Follow JavaScript programming best practices

Why follow those rules?• Scalability

• Accessibility (i.e. for devices with slow CPU)

• Better compatibility

Optimization 3/4Java Script & CSS compression• 21% of Alexa Top 1000 have CSS greater than 100K• 42% Don’t GZIP CSS – GZIPed files are usually 5x

smaller• Web browser spend 5-38%of the time to download HTML

and 62-95% loading images, scripts, CSSs

Why use compression?• Save money on new equipment and bandwidth• Improve user experience• Decrease page loading time

Optimization 4/4Graceful degradation• Browser backward compatibility

• Support user agents with no JS or proprietary plug-in

• Gracefully degrade: ”Menu Rollovers”, Forms etc

Progressive Enhancement• Basic content & functionality should be accessible to all browsers

• Provide enhanced features with unobtrusive JS

• Respect end user browser preferences

Why?• Better accessibility

• SEO (search engine optimization)

• Improve UX

SecurityCommon Attack Methods:

• XSS – Cross-site scripting• Rigorous input validation

• SQL injection• Escaping

• Use object-relational mapping

• Use parameterized statements

• Tabnabbing

• Disable fav icons

• Buffer overflow

• Impersonation attacks - malformed cookies

• Social attacks / Malware / Banners etc

Design tools

• Libraries / Frameworks

– Jquery, YUI, Mootools, GWT etc.

• IDEs / Source code editors

– IDEs: Eclipse WTP / Aptana Studio / Zend

– Editors: Notepad++, EditPlus

• Testing tools

– Browser built-in debuggers

– Selenium / Firebug

Questions

• ?

Sources: css-tricks.com – page content loading time statisticsblog.endpoint.com – Sprites and their impact stubbornella.org - Top 5 Mistakes of Massive CSSWikipedia – web related informationanybrowser.org – Graceful degradation & PEwebtips.dan.info – Graceful degradation & PE