ah teaches information design (Beyond Information Design lecture)

Beyond Information Design

Lecture outline

A lecture to help you think about moving forward beyond information design and into other areas of design and development. Lecture slides will be made available on the day of the lecture (November 26).

In preparation for lecture...

Please close up any laptops, cellphones, Razrs, Whoops and other 'beep-boop' devices.

Office hours

Bonus office hours:

  • Thursday, November 21/28 from 2-3:30pm (in-person or remote).
  • Friday, November 22/29 from 1-2:30pm (remote).
  • Monday, November 25 & December 2 from 1-2:30pm (in-person or remote).

Changes to existing office hours:

  • Today's in-person office hours will move to 7:30-8:30pm and be remote.
  • All future Wednesday (10-11am) in-person office hours are cancelled.

Please make sure to email or DM if looking to attend office hours.

Grade returns

P2 and P3 grades will be returned to this week.

If you have any questions or concerns please follow up with Andrew directly.

Code reviews

In some cases it appears that some citations may be missing from P3 deliverables — code has been copied or generated from other sources without citing.

If this has occurred you will receive a temporary zero on the project and a message indicating a code review is required for P3 before the grades can be released. Please follow-up with Andrew to arrange a time to complete a code review.

Building Websites exercise

MEGALAB continues

All future weeks of the labs will meet in SRYC 3130.

Answering questions

I'll do my best to answer all of them, but I may not necessarily answer your questions directly.

If you have any follow-up questions, please feel free to email or message me over course chat.

P4: Design and Develop

Do we need to revise our wireframes?

No.

If you are changing or improving your project for P4 you do not need to revisit and revise the P2 wireframes.

Do we need to implement everything we proposed?

Within what you are capable of, yes.

If you have proposed some very complex/fancy interactions in Figma, and cannot replicate that using HTML or CSS, then you are not required to do that. I would recommend speaking with myself or the TAs if you are unsure.

Keep in mind more complex interactions can often be broken down into smaller 'steps' that are a series of separate HTML pages showing how a particular functionality would work.

Embark resources

Branding guidelines

As you are provided with branding guidelines, the expectation is that you will follow them for:

What images can I use?

Embark has provided some images, but consider when and if that image makes sense for the grant/program/award that you are adding it to.

Do we only build the site for the six grants/awards/programs?

Yes.

How responsive does it need to be?

The page will need to resize and reorganize effectively between 320px to 1920px. No larger or smaller, but the page shouldn't "explode" outside of those sizes.

How do I work with feedback varying in quality?

My recommendations:

How do I and my teammate work on code collaboratively?

Ideally we would cover using git.

Any other project or design questions?

Please raise hand if so.

Development questions

If I use other's code, should I cite it?

Yes please!

Any of these is acceptable:

Code reviews

If there are materials in your project submission that are not cited and seem beyond the scope of what we have covered in the course you may be required to complete a 'code review'.

A code review will require you answer specific questions of how the code is working and why it was built this way. If you are unable to effectively explain this the code grade for the project may become a zero, at the instructor's discretion.

Can I use JavaScript?

Only if you must.

JavaScript is... a lot more. I would recommend getting in touch with me if you want to explore it 'for reals' instead of just copy/pasting things until it works.

Can I use frameworks such as Bootstraps, Foundation, etc?

No.

I need you to demonstrate that you can understand and build the webpage yourself at least once. Frameworks offload a lot of this understanding into pre-built material.

Can we use pre-processing such as SASS?

No.

If our pages pass the validators, is our code guaranteed to be error-free?

Yes and no.

Many of the errors below are also part of our 'modern best practices' errors (things that we have taught you).

Yes, it is guaranteed to be error-free of what the validator can check.

No, there are a variety of items that the validator is unable to effectively assess, particularly around accessibility:

  • Improper ordering of headings
  • Not setting proper 'alt' attributes for images
  • Using <br>, <b>, <em>, <i> (etc) non-semantically
  • Not setting the <meta name="viewport"...> element
  • No focus states
  • Using pixels for font sizing
  • Not using the <style> element

How do I link multiple pages?

Unlike a link within the page, linking between pages involves knowing where files are and their names. More on linking at the Mozilla Developer Network.

Consider this file structure:

  • other.html
  • pages/
    • index.html
    • grants-listing.html
<!-- From the index.html page -->
<a href="grants-listing.html">Grants</a>
<a href="grants-listing.html#bc-hydro">BC Hydro Grant</a>
<a href="grants-listing.html#action">Action Grant</a>
<a href="../other.html" target="_blank">Other</a>


<!-- From the other.html page -->
<a href="pages/index.html">Home</a>
<a href="pages/grants-listing.html">Grants</a>

div vs section

When do I use each?

div is semantically meaningless. It is useful for adding structure that we can style in our HTML.

section is a 'logicval' section of content in our HTML. It is semantically meaningful and is usually used to associate a heading and related content.

When to use normalize.css?

This file is cleared for use in the project and allows you to 'even out' the differences between the ways browsers render HTML and CSS by default.

How do I choose breakpoints?

Let your content decide.

Start at mobile and bring the page width out until the content looks awkward or is not using the space effectively. That is a breakpoint.

How do I load fonts?

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/e14ea47359f73cd87b6c320cb511e0b7

See this on CodePen.

Centering

(Part 1)

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/3818d0004a9f1c525564a709800d63d2

See this on CodePen.

Centering

(Part 2)

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/4f3d6e526a830c85f4da35b40976fc48

See this on CodePen.

How do I make a dropdown/hamburger menu?

With JavaScript.

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/45464025d337bc2bd33a6567350a4a68

See this on CodePen.

Next week's dev questions

Any other development questions?

Please raise hand if so.

235 vs 238?

Code tutorial

Please prep for the CSS positioning code tutorial by downloading the starter files from 235.ah.link/t04

1/1