DDM - Design for Digital Media
Diploma of Creative Industries (WDCI)

Teacher Name - lisa.cianci@vu.edu.au
Class Website - http://lisacianci.vucreativeindustries.com/2012/DDM

(login to the website: username = student; password = student)

Class 12 - Design for Mobile Media

Class:  look at responsive design for mobile devices, discussion & activity


Responsive Design

What is it? What does it mean for designers of digital media? How does this relate to the 3rd Assessment Task?

There are so many devices and computers that access the Internet via web browsers these days. These devices all have different formatted and sized screens, and different orientations - landscape and portrait. With smartphones, the orientation can be changed with a small hand movement. So, how do we design interfaces that will suit all of these screen types?

Issues to consider:

  • studies have indicated that by 2015, more people will access the web by smartphone than desktop computer
  • browser peculiarities and web standards (all browsers have their own ways of rendering content)
  • font size and placement to fit on the screen, look good, and be readable
  • positioning of content sections in different screen dimensions
  • image size (in pixels and kilobytes)
  • style and scripting issues relating to different screen sizes.

Initially, when phones became Internet browsers, designers tried to develop different pages to suit the most popular hand-held devices, using Javascript and other scripting languages to detect the type of device being used, then present different pages from the web server depending on the device type. So you needed one web page for your desktop users, and one or more web pages to suit different mobile phones.

Given the transient nature of the web - and the many kinds of software and hardware we use to access web pages, this kind of design practice is not sustainable. It would mean redesigning a web page each time a different device or screen size becomes available.

Responsive Design is a concept based upon Responsive Architecture, where buildings and public spaces are created that allow for more flexibility and sustainability as people occupy and move through them, such as detecting movement to turn on lights and heating/cooling, walls that are moveable, spacs that can have more than one function depending on who is using them. This idea can be applied to web design. So how do we do it?

The new CSS3 standard (which is a type of scripting that is used with HTML to create the style of a web page) allows for something called "Media Queries". These queries can check for properties like screen dimensions, or device type, then use different stylesheets (CSS = Cascading Style Sheets) to present the same content in different ways. It's the same web page, just with the sections rearranged and resized.

This is one of the reasons using grids and wireframes to design web pages is so important. Designers need to identify the different blocks of content on a web page, then consider how these should be placed for different types of screens.

If your Wordpress blog has a theme that uses responsive design, you will be able to see your blog with a different layout on your smartphone or tablet device. Give it a try!

Responsive Design uses methods like "Fluid Grids" and "Responsive Images" to present a web page that will look good and be readable on most devices.

  • Fluid Grids allow for blocks of content to be flexibly positioned according to the type of screen or device.

  • Responsive Images may be utilised in different ways, for example, some websites use code to detect the screen size or device type then serve the image in the right size - small image for small screen, large image for large screen. This is necessary because if you're on your mobile phone using the 3G network for example, you want to load a website quickly. A large image can be resized to look small on a small screen, but it will take much longer to load and cost you more money for data download.

Consider some websites designed for desktop, and how they might be re-presented for mobile devices. One school of thought at the moment believes that we should design for mobile devices first, then consider the larger screens.

How does this relate to Assessment Task 3? You will be designing a website image gallery that has to look good on desktop and mobile screens - the same content, but two different layouts. One will be larger and landscape oriented, the other will be small and portrait oriented (although the smaller screen should also work in landscape - allowing for the way smartphones can change orientation).

You will need to identify the blocks of content required for your image gallery design - title/header, navigation, main content area, information area, other elements? How would you position them for a large desktop monitor with a resolution with a width over 1400 pixels? or an iPhone with a screen width of only 320 pixels?

Exercise: on paper or use Photoshop if you prefer, look at your own blog site, or choose a site that you like, and draw the wireframes for the desktop layout, then draw a set of wireframes for how the same content could be placed for a smartphone screen, and you might even try iPad/tablet design if you want an extra challenge.

Example: look at this web page that shows some examples of simple wireframes that toggle between desktop and mobile:


Do the same thing (no need to animate it, just create static images or sketches) for your chosen website. choose 3 pages from the website and create 2 images for each page.

You may want to look at some responsive Wordpress themes aspart of your research for Assessment task 3 because many of them haveimage galleries or portfolio layouts that might give you ideas for your own designs.











*Just Google "responsive design", "fluid grids", "wireframes" and "design for mobile" to find many articles on this topic.


Favourite Flash sites

Provide your URLs for your favourite Flash sites, we will have a look at some in class.



Introduction to Assessment Task 3 - Image gallery website project

Review the next assessment task - you don't have to start working on it yet, but you might want to start researching good image gallery sites that work for desktop / smartphone or both interface types. In week 14 you will have time in class to write up your research and produce the word doc for the needs analysis. Make sure you have all of your links and other resources in class to complete the task. See the Assessment Task 3 document here.



Lab: Complete Storyboards and place images in Flash template


Today you will be working on the completion of images for the Storyboard animatic, and importing the images to Flash.
Hopefully by the end of class we can have a presentation of everyone's work.


Class Exercise (From last week - if you missed it)

Using the Flash file provided, import your JPG or PNG image files into the Flash Library, and then place them on Keyframes in the Timeline so they can be seen on the Stage.

Manipulate keyframes and the FPS (Frames per Second) property to test the speed of play back, and investigate how the Navigation buttons work with ActionScript code Functions in the Flash file. Try Publishing a SWF file to test your Animatic.

1. Open the provided Flash file Template01.fla in Flash (this is a CS4 version file but it will open ion CS5 also).

flash interface

2. Explore the Flash interface. Note the location of the Stage, Properties panel, Library panel, Actions panel and Toolbar panel. Note the Flash file Properties - how big the Stage size is (width and height in pixels) and also the speed of the Flash file playback (Frames Per Second - FPS). You can manipulate these if you want a different dimensions or speed. And the background colour of the whole file - you can change this to suit your colour scheme, or use a background image.

3. Before you import images to Flash, check your image file types and sizes. It is best to use JPG or PNG format, but you can also import Photoshop PSD files directly into Flash. I prefer to keep my Photoshop file as a working file and save out PNG or JPG images for Flash - it's much simpler. The main reason for doing this is because if I want to change something in the Photoshop file, or use it to generate multiple images for Flash, then I'm not changing the flat PNG or JPG files that Flash is linked to.

For today's exercise you don't need finished storyboards, just use any images you can grab. I will make some sample images available, or just get some off the Internet.

Working with imagery in Flash is always a balance of image quality versus small image size. An animation with lots of high quality PNG-224 images will make a very large Flash file that will play slowly compared to compressed JPG files. If you only have a few files, as with your animatics, you should be OK to use PNG-24 (which has the advantage of having transparency which the JPG format does not have).

4. Once your images are ready, you can go the the File menu in Flash and choose Import to Library. you will be able to choose multiple files that will import into the Flash application, and then be accessible in the Flash Library panel.

5. Experiment with dragging your images to the Keyframes in the Timeline. I have created this template with the timeline structure already in place, so all you should need to do is drag and drop. Depending on your Flash skills, you might want to customise this file to suit your requirements, but if you don't know Flash, you can just work with what's already there without any prior knowledge of Flash animation.

Flash can be tricky at first - especially understanding how the Timeline and Stage are related. You need to click on the Keyframe that you want in the Timeline to make sure you're in the right place, but then you drag the image from the Library to the Stage. It might take a bit of practice to get this right, but don't worry if you mess it up. You can always undo (CTRL-Z for Win, CMD-Z for Mac) or just ditch the whole file and start again.

Make sure you save your work as you go so if you really mess something up and crash the application, you can open up the last saved version of your file.

6. To test your Flash Movie, use the shortcut keys (CTRL-ENTER for Win, CMD-ENTER for Mac).When you test a Flash file, it generates the SWF file which is the "Published" Flash file that you put on the web. You should see a SWF window open with your Flash file and it should be fully interactive, and playing at the FPS speed. Navigation should be working in the SWF. Close the window to keep editing the FLA file, and test again when you're ready.

7. You can also go to the File menu and choose Publish, or Publish settings to change the settings or properties of the Flash file before publishing the final SWF. Make sure you save the FLA file as this is your working file. You can always generate another SWF file at any time, but not without the FLA master file.


Outcomes by the end of class:

You should have your finished images in the Flash template by the end of class.


Reading/viewing for next week:

Write a 2-3 paragraph review of AGIdeas, put it on your blog.


Other Things to Remember

You should be continuing to work on the following Assessment Tasks:

AT2 - Storyboard Trailer;

AT1 - Blog (Keep adding entries to your blog)

Please see me in class if you are having any issues with assessment tasks. There will be time to work on these in class - think of the Lab session from 4-7pm as time to work on assessment tasks as well as class exercises, then you can ask me for help.