Download as PDF, PPTX
Uploaded byRyan Parsley
Modern Web Concepts
The document discusses modern web concepts, emphasizing the importance of a user-centric design approach and efficient processes in development. It highlights the significance of consistency and cohesiveness in design, cautions against common design pitfalls, and advocates for responsive design. Additionally, it provides resources for further exploration of HTML5 and responsive web design principles.
More Related Content
Modern Web Concepts
- 1. Modern Web Concepts Ryan Parsley Linxter.com 2011.02.12
- 2. How Do YouWork Now?
- 3. How Do YouWork Now? • Designer works first • Developer works first • We don’t need no stinking designers
- 4. A Stitch InTime... • Less investment fosters more iterations • Process is not wasted time • Learn to let go • Reusability is overrated
- 5. Let Go, LetCloud
- 6.
- 7. Think About WhyBefore 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. User Centric? • Good design is the baseline • Great design is a feature • Customer’s goals... not your goals • Users probably don’t work for your company
- 9.
- 10. What Does TheUser 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. Design Patterns “The only ‘intuitive’ interface is the nipple. After that it’s all learned.” —Bruce Ediger
- 12.
- 13.
- 14.
- 15.
- 16. The Grid IsYour Friend • Logical solution for creating layouts • Consistency comes baked in • Great learning tool
- 17.
- 18.
- 19. Responsive Design • Augment grids • @media screen and (max-width:480px) • Every screen can have a custom feel
- 20. HTML5 Is NotA Myth • <!DOCTYPE html> • Focus on the structural bits first • Fill in the gaps with modernizer.js
- 21. Mind The Gap? • Progressive enhancement • Define “support” • There is no need to look the same in all browsers
- 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. 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