Embed Size (px)
DESCRIPTION
Sharing my thoughts and process when creating web sites and apps. My goal is to promote some "best practices" that will help you make better websites with less frustration (as well as dispel a few myths).
Citation preview
2011.02.12
Modern Web ConceptsRyan Parsley
Linxter.com
How Do You Work Now?
Designer works first •
Developer works first •
We don’t need no stinking designers •
How Do You Work Now?
Less investment fosters more iterations •
Process is not wasted time •
Learn to let go •
Reusability is overrated •
A Stitch In Time...
Let Go, Let Cloud
Cloudy Thoughts
“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
Think About Why Before How
Good design is the baseline •
Great design is a feature •
Customer’s goals... not your goals •
Users probably don’t work for your company •
User Centric?
Usability?
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 •
What Does The User Expect?
“The only ‘intuitive’ interface is the nipple. After that it’s all learned.”
—Bruce Ediger
Design Patterns
Beware The Antipatterns
Beware The Antipatterns
Beware The Antipatterns
Beware The Antipatterns
The Grid Is Your Friend
Logical solution for creating layouts •
Consistency comes baked in •
Great learning tool •
Thoughts On Mobile
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 •
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/ •
Image Credits
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
Resources
