7 web design
- 1. < web design 101 >
- 2. < web design 101 > have you installed?! • a text editor! • Cyberduck (or another FTP client)! • a web inspector for your browser! details on web.mit.edu/2.744/www!
- 3. what’s in a webpage?!
- 5. what’s in a webpage?! hypertext markup language! contains text and links to other pages! cascading style sheets! defines the look and feel of your site! javascript! adds interactivity to your site!
- 6. design guidelines! enhancing usability and readability!
- 8. sketch then code! some content may be “below the fold”!
- 9. sketch then code! add navigation arrows!
- 10. design for the screen! 1997! today!
- 11. responsive design! design for the screen!
- 13. provide context! tell the user where he/she is!
- 14. don’t reinvent the wheel! modify existing layouts and templates! getbootstrap.com! foundation.zurb.com! verynicesites.com!
- 16. 12 column grid!
- 18. …why ?!12! 1! 12! 1! 1! 1! 2! 1! 3! 1! 4! 1! 6! lcd!(! )!=! can achieve many different layouts!
- 19. HTML basics!
- 20. <lunch> <hamburger> <bun></bun> <lettuce></lettuce> <tomato></tomato> <cheese></cheese> <patty></patty> <bun></bun> </hamburger> </lunch> HTML structure!
- 21. <!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <p>Hello World!</p> </body> </html> HTML structure!
- 22. HTML tags! <tag attr=“value”> content… </tag> tag structure! open tag close tag attribute(s)
- 23. HTML tags! <patty cooked=“med”> yum. </patty> tag structure!
- 24. HTML tags! <p> <h1>…<h6> <a> <ul>,<ol>,<li> <table>,<tr>,<td> <img/>,<video> view all the tags at: http://www.w3schools.com/tags/! - paragraph! - headings! - link / anchor! - lists! - tables! - images, videos! typography!
- 25. HTML tags! <b>,<strong> <i>,<em> <sup>,<sub> - bold! - italics! - super/subscript! view all the tags at: http://www.w3schools.com/tags/! text formatting!
- 26. HTML tags! <div> <section> <article> <br/> <hr/> - container! - section! - article! - line break! - horizontal rule! view all the tags at: http://www.w3schools.com/tags/! organization!
- 27. adding style!
- 28. CSS basics! <p style=“font-‐size:14px;”>…</p> inline styling! pros! highly specific! cons! highly specific! hard to maintain! HTML/CSS coupled! !
- 29. CSS basics! block styling! pros! affects all matched elements! cons! HTML/CSS coupled! ! <style> p { font-‐size: 14px; } </style>
- 30. CSS basics! separate file! pros! write once for whole site HTML & CSS decoupled! cons! harder to control! p { font-‐size: 14px; }
- 31. CSS basics! rule syntax! selector { property: value; property: value; … }
- 32. CSS basics! properties! Typography! font-‐size font-‐weight font-‐family line-‐height text-‐align http://htmldog.com/reference/cssproperties/! http://www.w3schools.com/cssref/! view all! Colors! color background-‐color background-‐image line-‐height text-‐align Positioning! position width,height margin padding border
- 33. CSS basics! selectors! p { font-‐size: 14px; } <p> .bp { color: gray; } <p class=“bp”> #headline { font-‐size:20px; } <p id=“headline”> HTML element! CSS rule!
- 34. CSS basics! cascading selectors! .intro h1 { font-‐size:18px; } <div class=“intro”> <h1>…</h1> </div> HTML element! CSS rule! style h1 inside every element with class=“intro”
- 39. what’s next? ! no official class! 2.744 Product Design! for class Thursday, February 27! tutorial: building your storyboard site?!