180 likes | 263 Views
Where web design is heading ?. Trends in design & optimization In 2010/2011. - 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!!
E N D
Where web design is heading? Trends in design & optimization In 2010/2011 - 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!! - ???? $$$$$ @#$#$&@)#*@ Janusz Kowalczyk - 2010.11.26
Agenda • HTML 5 • UX • Accessibility • Ubiquity • Simplicity & minimalism • Optimization • Security • Design tools
HTML 5 What'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
Ubiquity Where: • 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.elysiumburns.com/ http://www.pixelcraft.ie/
Optimization My 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/4 Unobtrusive 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/4 Java 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/4 Graceful 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
Security Common 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 statistics blog.endpoint.com – Sprites and their impact stubbornella.org - Top 5 Mistakes of Massive CSS Wikipedia – web related information anybrowser.org – Graceful degradation & PE webtips.dan.info – Graceful degradation & PE