Modern Web Concepts

Modern Web Concepts Ryan Parsley Linxter.com 2010.9.25

How Do You Work Now?

How Do You Work Now? • Designer Works First • Developer Works First • We don’t need no stinking designers

A Stitch In Time... • Less investment fosters more iterations • Process is not wasted time • Learn to let go • Reusability is overated

Let Go, Let Cloud

Cloudy Thoughts

Think About Why Before How “If you don’t know where you are going, any road will get you there.” —Lewis Carroll • Identify your Target Audience • Identify with your target Audience

User Centric? • Good Design is the baseline • Great Design is a feature • Customer’s goals... not your goals • Users != Shareholders

Usability?

What Does The User Expect? • Consistency is great! • Cohesiveness is what you really need. • If you don’t fancy yourself a design expert... there is no shame in striving for obvious. • You don’t have to be *that* clever

Design Patterns “The only ‘intuitive’ interface is the nipple. After that it’s all learned.” —bruce ediger

Beware The Antipatterns

The Grid Is Your Friend • Logical solution for creating layouts • Consistancy comes baked in • Great learning tool

Thoughts On Mobile

Responsive Design • Augment grids • @media screen and (max-width:480px) • Every screen can have a custom feel

HTML5 Is Not A Myth • <!DOCTYPE html> • Focus on the structural bits first • Fill in the gaps with modernizer.js

Mind The Gap? • Progressive Enhancement • Define Support • There is no need to look the same in all browsers

Image Credits • http://www.flickr.com/photos/joeandy/147678902 • http://www.flickr.com/photos/eliotreeves/3865454969 • http://www.flickr.com/photos/24868561@ N07/3981525301 • http://www.flickr.com/photos/joshsimerman/3444223835 • http://www.flickr.com/photos/adactio/1799116343/

Resources • http://www.modernizr.com • http://adactio.com/articles • http://www.alistapart.com/articles/responsive-web-design • http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr • http://www.joelonsoftware.com/uibook/fog0000000249.html • http://gettingreal.37signals.com/ch09_Interface_First.php • http://thinkvitamin.com/business/how-to-increase-sign-ups-by-200-percent • http://www-01.ibm.com/software/ucd/ucd.html • http://blog.reybango.com/2010/09/21/how-to-create-html5-website-and-page-templates-for- visual-studio-2010

Modern Web Concepts

by Ryan Parsley on Sep 24, 2010

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 33

Statistics

Modern Web Concepts Presentation Transcript

http://lanyrd.com	31
http://www.linkedin.com	2