Thu, Nov 18

From wireframe to site

Today's objectives

Further exploration of the Skeleton framework. Generating assets and managing handoffs.

  • Review Skeleton assignment/work in progress
  • Skeleton next steps
  • Using breakpoints
  • Generating assets
    • Photoshop: Legacy save for web
    • Photoshop: Generate
    • Photoshop: Layer comps
    • Photoshop: Quick export
    • Adobe XD
  • Other topics: favicons, semantics
  • Other frameworks: Bootstrap

Tasks

Discuss challenges in "reimplementing" a site. Review work in progress.

Presentations

Responsive design

Responsive design

Asset creation

Asset creation

How to do things

How to do things

Workflow and testing

Workflow and testing

Agenda

Agenda

Assignment

Written assignment questions.

  • Formatting
  • References/citations
  • Presentation format

Assignment 07 revision
Fix. Test. Fix. Test again.

Revise your Assignment 7 submission and re-upload it. Make sure you test carefully.

Remember to include:

  • the viewport meta tag to help the site work on mobile (and the mobile inspector Chrome mobile viewin Chrome)
    <meta name="viewport" content="width=device-width,initial-scale=1">
  • Test carefully, after you upload.
  • Make sure skeleton is installed and linked.
  • Send code to me for review before the deadline if you have problems.

Upload your revised assignment to the folder "assignment-07" replacing your existing version.

Due Wed, Nov 24, 6:00 PM.

Samples

Here you will find any sample files or code samples you need for class.

None this week - refer to last week's page.

Tutorials

None this week - refer to last week's page.

Resources

Planning and prototyping

Photoshop: Generate assets
https://helpx.adobe.com/ca/photoshop/using/generate-assets-layers.html
Illustrator: Export for Screens
https://helpx.adobe.com/illustrator/using/collect-assets-export-for-screens.html
"Responsive" Images
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Slicing
https://helpx.adobe.com/photoshop/using/slicing-web-pages.html

Robert Currie
This page was last updated at 2022-05-17 12:45.