1. Course created by Sarah Phillips sphillips@lecturers.billyblue.edu.au BBCD Melbourne BAPDCOM Version 1 – February 2013. http://bbcdcomdes.weebly.com/

2.  1989 HTML invented by Tim Berners-Lee at CERN in Switzerland.  1994 Netscape launches and becomes the leading browser. HTML2 was born. Can now design with resizable tables and background images!

3.  1995 HTML 3 is released, but everyone argues about what tags should be standard. No one agrees, hence why browsers support (or don’t support) tags in different ways. The academic engineering committee overseeing this kicks up a stink at some of the suggestions. They believe that HTML should only specify how a document is organised and not how it looks – therefore, text colour, font size and font choice are outside of scope. They are ignored.

4.  1997 HTML 4 becomes standard. New features include - frames - CSS integration - being able to embed external scripts  At this point, designs are made to fit a 800x600 screen resolution!

5.  Ye olde McDonalds website (1996/7) http://web.archive.org/web/19961221230104/http:/ www.mcdonalds.com/ http://web.archive.org/web/19961221230104/http:/ www.mcdonalds.com/  Lego website - 1996 http://web.archive.org/web/19970110033427/http:// www.lego.com/

6.  Fastforward to 2010…. HTML5  includes features for playing audio & video  HTML5 on its own cannot be used for animation and interactivity — it must be supplemented with CSS3 or Javascript.  Some elements dropped because they are better written in CSS – like, and  According to a report released on 30 September 2011, 34 of the world's top 100 Web sites were using HTML5

7.  HTML5 and compatability  Most modern browsers support HTML – to a degree.  ie8 is still one of the most common browsers – and doesn’t support HTML5.  Browsers will ignore markups it doesn’t understand, so we need to keep this in mind when coding in HTML5 – make sure you test in a few different browsers.

8.  So… web design trends tend to follow the capabilities and average adaption level. When HTML5 first came out, it wasn’t widely supported in browsers popular at the time, so take up was slow. Even now, it’s starting to gain momentum… it is on track to be the recommended way to go…by 2014.

9.  Adaptive design  http://nubbytwiglet.com/ http://nubbytwiglet.com/  Typography  http://www.designweekportland.com/ http://www.designweekportland.com/  Long vertical scrolling  http://pinterest.com/ http://pinterest.com/

10.  Consistent navigation area  Contrast between text & background  Important information above the fold  Optimized graphics  Hierarchy  Consistency  REMEMBER, IT’S ALL ABOUT THE CONTENT  (and don’t drive the user crazy)

11.  Appeal to your target audience – even if that means breaking/bending a couple of rules.

12. http://pbskids.org/

13.  http://www.neckandbackpainchiropractic.co m/ http://www.neckandbackpainchiropractic.co m/  http://www.dpgraph.com/ http://www.dpgraph.com/

14.  Awards for leading industry standard web- design - http://www.webbyawards.com/http://www.webbyawards.com/  Looking for old websites? http://www.web.archive.org http://www.web.archive.org  HTML standards for web developers http://developers.whatwg.org/ http://developers.whatwg.org/  Best web design practices http://terrymorris.net/bestpractices/ http://terrymorris.net/bestpractices/  State of web design trends – 2012http://webdesign.tutsplus.com/articles/indu stry-trends/the-state-of-web-design-trends- 2012-annual-edition/http://webdesign.tutsplus.com/articles/indu stry-trends/the-state-of-web-design-trends- 2012-annual-edition/

15.  101 Best HTML5 website http://101besthtml5sites.com/ http://101besthtml5sites.com/

16.  Video – The Art of Web Design  http://www.youtube.com/watch?v=3iVVM_Dg WY4 http://www.youtube.com/watch?v=3iVVM_Dg WY4

18.  Describe the contents of a web page and their relative priorities.  Help establish functionalities, behaviours and assess feasibility  Look like web pages devoid of most visual/graphic styling

19. http://www.tokyowebdesigns.com/advice/1487/wireframing-your-site-what-why-and-how

20.  Great for visualising how much content per page and the balance of content.  Helps to get client feedback on layout and placement, without them getting hung up on presentation.  Doing a wireframe first will allow you to spot problems early and make changes quickly.  If the wireframe is done to actual dimensions, then design will be ‘reskinning’ this template.  They are the storyboards of web design

21.  Cacoo http://cacoo.com/http://cacoo.com/  Comes with drawing stencils to quickly mockup your wireframes.  Has tools to align elements, resulting in cleaner wireframes  Can share wireframes with multiple users, who can add notes to the frames.  Free trial account

22. Site screenshot http://www.cacoo.com. Accessed 6/2/13http://www.cacoo.com.

23.  Beginners guide to wireframing  http://webdesign.tutsplus.com/tutorials/workflow -tutorials/a-beginners-guide-to-wireframing/ http://webdesign.tutsplus.com/tutorials/workflow -tutorials/a-beginners-guide-to-wireframing/