Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – February

 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!

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

 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!

 Ye olde McDonalds website (1996/7)  Lego website

 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

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

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

 Adaptive design   Typography   Long vertical scrolling 

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

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

 m/ m/ 

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

 101 Best HTML5 website

 Video – The Art of Web Design  WY4 WY4

 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

 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

 Cacoo  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

Site screenshot Accessed 6/2/13http://

 Beginners guide to wireframing  -tutorials/a-beginners-guide-to-wireframing/ -tutorials/a-beginners-guide-to-wireframing/