Interactive Design Homepage

VUIT Digital Arts

Teacher Name: Lisa Cianci - email: lisa.cianci@vu.edu.au
Education Manager: Adam Hutterer - email: adam.hutterer@vu.edu.au

Class Website - http://multimedia.tafe.vu.edu.au/lisa/2015/ID2


Subject: ID2 - Interactive Design

Course: Advanced Diploma of Graphic Design (CUV60411)


CLASS 05

What is Responsive Web Design?

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, andCSS3 media queries, an extension of the @media rule, in the following ways:

  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

from: http://en.wikipedia.org/wiki/Responsive_web_design

 

Some links to follow up:

http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/

http://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly

http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design

http://www.huffingtonpost.com/john-rampton/business-mobile-responsive-design_b_5267077.html

 

Start Assessment Task 2 - Video Website - Responsive Interface Design

Today you will undertake the following tasks in class for Assessment Task 2:

  1. Research 3 different video distribution websites with particular focus on how they responsively present their interfaces for different screen sizes and different functionality (admin, viewer etc.). We will share research results in class and discuss the pros and cons of different websites, speculate on who their users might be and make suggestions for what the "user experience could be".

  2. Develop a Persona for your Video Website responsive interface designs using the sheet from Class 1.

  3. Begin sketching your wireframes for your website responsive design. There are many templates online that you can print and use for layout. Some of the most useful ones look like graph paper with grid lines that allow you to closely map out the positioning of content elements.

  4. Start to think about a name and logo for your website.

References

http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/

http://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly

http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design

http://www.huffingtonpost.com/john-rampton/business-mobile-responsive-design_b_5267077.html

http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/

http://www.lukew.com/ff/entry.asp?1514

http://bradfrost.github.io/this-is-responsive/patterns.html

 

Video Distribution Websites:

http://www.reelseo.com/video-marketing-basics-5-distribution/

https://www.youtube.com/

https://vimeo.com/

http://screen.yahoo.com/

https://www.flickr.com/explore/video/

http://www.metacafe.com/

http://www.dailymotion.com/

http://blip.tv/

http://www.viddler.com/

 

 

 

For Next Week

Work on title and logo design.