ah teaches information design (Technical Questions lecture)

P3 grades

Your last project's grades will be released after labs today. If you have concerns about your grades or would like further feedback please email Andrew and we can arrange a time during office hours or otherwise to discuss your concerns.

MEGALAB

For this week and next week's labs we will be forming 'MEGALAB' in SRYC 3100.

This means that all students who would usually be in 3140 will be migrating to 3100 to enable more direct critique and support from the entire instructional team.

Lecture schedule

The 'plan' for today's lecture:

• Review the project brief
• Answer design related project questions
• Answer development related project questions
• Do the grids code tutorial

Next week

The 'plan' for next week's lecture:

• Cover some more code demos (i.e. animation, fancier buttons/interactions)
• Answer 'beyond the course' questions
• Cover CSS positioning

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.

Design-related questions

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 P3 wireframes.

If we have changed teams, which idea do we pursue?

That is a discussion. You will need to discuss with your new teammates about the strengths and weaknesses of each of your ideas, and determine which direction (or combination of) you would like to pursue for P4.

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.

Branding guidelines

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

• Typography
• Colour use
• Illustration/imagery

I am waiting to hear back from Embark about a collection of images you can make use of.

Who should this website be 'owned' by?

It is Embark's website, but directs folks to the clubs.

Any questions about the website should go to Embark, any questions about the clubs should go to the clubs.

Can we change the design from P3?

Of course.

Please consider that there are limitations to what you can achieve with HTML and CSS in comparison to Figma (and vice versa). Your design will likely evolve, change, and (ideally) improve in P4.

Can we just design the desktop or mobile?

No.

Any other design questions?

Please raise hand if so.

Development questions

Why learn HTML/CSS?

Some people say there's no need to learn HTML and CSS when there are services like Squarespace, WIX, etc. to help you make a website. Do you think they have a point?

Definitely, but...

If you want to be able to 'design' for the web, or communicate with developers, you need to understand 'how' the web is built. HTML and CSS are the fundamental languages of the web, and it is unlikely they will disappear anytime soon.

Why not just teach the design of websites?

My ethics and bias.

If you want to design websites that are accessible, you need to understand HTML to do so. Design alone cannot make 'accessible' websites, and designers are typically the ones responsible for concerns of their users.

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

Yes please!

Any of these is acceptable:

• A citation as a comment within the code itself
• A citation as a comment with your submission to Canvas
• A citation in a seperate text file linked in your submission

Can we take the CSS from developer mode in Figma?

Yes, but...

Keep in mind this code may not be adhering to standards we are recommending or requiring within this course. One big example would be is Figma providing you with pixel based font sizing or rem based fonts sizing.

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.

How do I make a dropdown/hamburger menu?

With JavaScript.

I will still caution you about getting into JavaScript in the course as we do not grade you on it. If you still want to explore, the Web Design & Development course's JavaScript tutorial covers how to build a dropdown menu.

How do I set up FTP?

Email Andrew.

Due to the security upgrades to SFU's servers, we have a different setup this term for FTP.

Are we required to use the provided filespace?

Yes.

For the final submission for this project you will be required to use the filespace provided. You may use other services in the interim, but they may not allow to validate your code.

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.

When do I do something in HTML vs CSS?

My website looks different on different devices

This could be 'the nature of the web' or another issue that is cropping up. I would ask the following questions of the 'difference':

• Does it look like a tiny desktop version on mobile? If so, take a look at the <meta name="viewport" ...> element to make sure it is set correctly.
• Do two different devices render the fonts differently? If so, take a look at the font-family property to see if a font is perhaps not available on the device.
• Do things shift slightly between different browsers or devices? It may just be the 'flexible' nature of the web.

Can our website be too simple?

Yes and no.

We are grading on the rubric within which you could create a 'simple' website and still achieve a decent mark, but keep in mind that 'simple' may not solve the design problem you are dealing with this term (and hence result in a lower grade).

Any other development questions?

Please raise hand if so.