Modern Web Concepts

1,644 views

Published on

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).

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,644
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Modern Web Concepts

  1. 1. Modern Web Concepts Ryan Parsley Linxter.com 2010.9.25
  2. 2. How Do You Work Now?
  3. 3. How Do You Work Now? • Designer Works First • Developer Works First • We don’t need no stinking designers
  4. 4. A Stitch In Time... • Less investment fosters more iterations • Process is not wasted time • Learn to let go • Reusability is overated
  5. 5. Let Go, Let Cloud
  6. 6. Cloudy Thoughts
  7. 7. 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
  8. 8. User Centric? • Good Design is the baseline • Great Design is a feature • Customer’s goals... not your goals • Users != Shareholders
  9. 9. Usability?
  10. 10. 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
  11. 11. Design Patterns “The only ‘intuitive’ interface is the nipple. After that it’s all learned.” —bruce ediger
  12. 12. Beware The Antipatterns
  13. 13. Beware The Antipatterns
  14. 14. Beware The Antipatterns
  15. 15. Beware The Antipatterns
  16. 16. The Grid Is Your Friend • Logical solution for creating layouts • Consistancy comes baked in • Great learning tool
  17. 17. Thoughts On Mobile
  18. 18. Thoughts On Mobile
  19. 19. Responsive Design • Augment grids • @media screen and (max-width:480px) • Every screen can have a custom feel
  20. 20. HTML5 Is Not A Myth • <!DOCTYPE html> • Focus on the structural bits first • Fill in the gaps with modernizer.js
  21. 21. Mind The Gap? • Progressive Enhancement • Define Support • There is no need to look the same in all browsers
  22. 22. 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/
  23. 23. 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

×