Design and deliver

Ready-made website builders

1. State that the easiest tools to use to create a website for their portfolio are online website builders.
2. Divide the class into three groups and have each group examine one of the following free website builders for the design category ‘Portfolio’ (each web builder site below has a Portfolio template category). 
   (Teacher note: Although these sites are free they may require registration. You may choose to create and provide a login.)
   
   • Wix
   • Squarespace
   • Weebly
3. Have each large group meet, discuss and report back to the class the criteria required by a website to satisfy each of these terms:
   
   • functionality
   • accessibility
   • usability
   • aesthetics
   • features: for example, blogs, online store, social media widgets, other feature widgets, domain registration.
4. Ask students to (individually) find a website they believe meets the above criteria.

This lesson sequence will emphasise the importance of a designer focusing always on users’ needs in any design process. We focus on website design and examine functionality, accessibility, usability and aesthetics. Learners observe and are encouraged to ask clarifying questions.

Flexible web site design

1. State that, if a designer wants more freedom than these free tools with their pre-defined templates provide, there are a number of applications available.
2. Discuss some of these with the class (see Teacher introduction for some ideas).
3. Demonstrate to the class this demo website called Pigeon built using Adobe Muse CC to showcase its responsive design feature: Alternatively, if the above title disturbs you too(!), use another website created in Adobe Muse CC The Chrome browser is recommended for this demonstration.
4. As you look at the website with the students, note how elements fluidly reposition themselves in each of the web pages when browser windows are resized to accommodate new dimensions.
5. Students then compare the website using a desktop, tablet and small screen device such as a mobile phone. (It is only necessary to have a few devices to share around.) Students observe how the display adapts to the dimensions and sizes of the screens.
6. Emphasise that only one web layout had to be created. Because of Adobe Muse CC’s responsive design feature, no code was written as it was generated interactively by the application.
7. Repeat, viewing the following HTML5 Boilerplate website using both desktop and mobile devices:
8. Explain that the responsive layout features on the above website were achieved by hand coding through extensive use of specialised CSS and JavaScript code.
9. Show examples by inspecting the site’s explanation of itself, which provides snippets of code for website designers.
10. Show students the following video called Fixed vs. Fluid vs. Adaptive vs. Responsive.
11. Explain to students that the CSS3 @media query rule is used to define different style rules for different media types/devices. One HTML file and one set of images for multiple layout variations are driven by multiple CSS definitions triggered by media queries.
12. Explain that designers who did not wish to create three designs had a choice of using a predesigned template or coding by hand.
13. Tell students that Adobe Muse CC allows the creation of websites without the need to write code. Muse does not implement "Responsive Layout" by hand coding but by using a design process which automatically generates this CSS code for the designer.
14. Explain that Adobe Muse uses what it calls @media queries breakpoints. It uses these and containers, with different ‘breakpoints’ for the variety of screen sizes the web pages might encounter, from extra-small (mobile) to large (large desktop).
15. Demonstrate the breakpoint effect by showing this webpage.
16. Explain to students that a media query or breakpoint looks at the capability of the device, and checks, amongst other things:
    • width and height of the viewport
    • width and height of the device
    • orientation (is the tablet/phone in landscape or portrait mode?)
    • resolution.

This means that the designs will look good on any size of screen.

1. State the task ahead: ‘Using Adobe Muse CC's responsive design feature we will be using iterative feedback to develop a website whose layout adjusts to desktop, tablet or smartphone.’
2. Re-state that, before Muse introduced this responsive design feature, separate layouts (known as adaptive layouts): had to be designed in this or other similar products for each type of display – desktop, tablet or smartphone. Using this approach, browser window dimensions often meant that the appearance of the pages was unpredictable.
3. Explain that you will demonstrate for students the creation of a portfolio website using Muse.

You and your students will together build a site using Muse.

• Students will build their own portfolio-based website using Muse in stages, led by the learning construction provided by you.
• Stop after each step as students develop their own content.
• Advise students to save a new version of their site after each step.
• Tell students to use any free opportunities to explore other features in Muse CC.

Here is a suitable sequence for teaching the construction of a portfolio-based website using Muse CC. Note that this is not intended to be a set of tutorial instructions. For that, see Resources.

1. Create a new site (both a master page and a home page)
2. Add 2 connected pages using the plus + symbol on the right side of the home page and add placeholder text to each page to identify these: Home Portfolio My Profile.
3. Add header (banner) and footer rectangles to the master page. Drag the window to simulate browser widths, and select option to fix rectangles to width of browser.
4. Link all pages using the Horizontal menu widget by adding this to the master page and setting States for the Normal, Rollover, Mouse down and Active states.
5. Import images. Import a logo to the master page’s top banner. Add background images to each page, scaled to fill and centred.
6. Add specialised fonts (built-in feature in Muse CC allows adding Edge fonts). Explain this feature when compared to Standard web fonts and System fonts.
7. Add body text.
8. Add the slideshow Gallery widget to the Portfolio page.
9. Add Social Media widgets.
10. Finally, resize to show how content is ‘broken’ when the window is resized.
    • Show Muse CC’s responsive design feature.
    • Explain that the critical Breakpoints for Desktop, Tablet and Phone are 1280, 1024 and 640 respectively. However, explain that creation of Breakpoints should be determined by content rather than these measures.
    • As you resize the layout, draw attention to the way items are affected and create a Breakpoint and reposition these as required.
    • Explain pinning, resizing and effects for a selected object for each Breakpoint.

Give the following guidance to students:

• Buttons on phones and tablets are for fingers, not mouse pointers. Thus buttons need to be at least 40 px x 40 px for these small devices.
• Tablets and phones are often used in bright light conditions (outdoors) and screen elements should have high contrast.
• Consider slow bandwidth for devices other than desktops. Some objects may need to be sacrificed.
• Consider the advantages of a ‘hamburger’ menu (vertical stacked navigation, not drop-down) on small devices, for touch navigation.

1. Students complete their own portfolio-based website using Muse, as guided by you (see ‘Learning construction’).
2. They modify and improve their site as much as possible.
3. Ask students to move from computer to computer completing the site design comparison worksheet for around five workstations. They will score each website from 1 to 5 on the following criteria, and comment on any special features noted.
   • Functionality
   • Accessibility
   • Usability
   • Aesthetics
   • Features: (for example, blogs, online store, social media widgets, other feature widgets, domain registration)
4. Ask students to share their observations of good things or things that need to be improved.
5. Ask students to modify their own site as a result of that sharing of observations.
6. Have them evaluate their own site using the above criteria.