ah teaches information design (Technical Questions lecture)

Technical Questions

Lecture outline

A lecture for answering any lingering questions you have about the final project, HTML, or CSS.

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.

Lecture schedule

The 'plan' for today's lecture:

  • Comments from the City
  • Answer design related project questions
  • Answer development related project questions
  • Answer other project questions
  • Review the project brief
  • Answer 'beyond the course' questions

Comments from the City

Most interested in projects that:

  • Defined an audience more clearly
  • Thought about how to direct the audience 'deeper' into the page
  • Thought about what information or structures made sense for the given audience

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.

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

Why not learn [insert JavaScript framework]?

Why can't we learn and use JS frameworks such as React.js, Angular, Vue, etc?

Because you still need to understand HTML and CSS to work with them effectively.

Frameworks make development work a lot easier, but you still need to understand the other languages they interact with to make websites work. Otherwise you are likely to build even less accessible websites.

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 make a carousel?

With JavaScript.

Any purely HTML/CSS carousels are accessibility nightmares. I would also recommend reading the Nielsen Norman Group's article on the usability of carousels.

It does not paint the most usable of pictures.

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.

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

Yes and no.

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

We have a more 'thorough' validator that we will introduce you to in the labs.

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
    • review.html
    • contact.html
<!-- From the index.html page -->
<a href="review.html">Review</a>
<a href="contact.html">Contact</a>
<a href="../other.html" target="_blank">Other</a>


<!-- From the other.html page -->
<a href="pages/index.html">Home</a>
<a href="pages/contact.html">Contact</a>

How do I get things 'edge to edge' in a browser?

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

See this on CodePen.

How do I do a 'full-bleed' image?

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

See this on CodePen.

How do I make 'fancier' buttons?

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

See this on CodePen.

How do I make 'blank' columns?

CSS Trick's Complete Guide to Grid is also an excellent resource.

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

See this on CodePen.

Other project questions

Is there a time we can get open support for HTML/CSS?

Yes! This and next week's labs, and next lecture.

This and next week's labs, and next week's lecture will be heavy on the support time for coding. Your TAs will be focused on helping you with code, while I will be talking with you about design.

I liked the 'gallery walk' of P3, will we do that again?

Yes!

We typically do it at or just before the end of projects in this course. This term is a bit short so we are just doing it at the end of projects.

P4: Design and Develop

'Beyond the course' questions

Please note that for a lot of these this is my own opinion that I am sharing. Do not take it as fact.

If I want to be in the UX design industry would it be better if I have a BSc instead of a BA?

Next weeks

There are some changes to the next couple weeks:

  • All labs will be held in SUR 3100.
  • I will be in the labs to critique designs.
  • Your TAs will be helping critique and troubleshoot code.
  • Our lecture next week (Nov. 25) will be some more answers to questions, and otherwise open time for support.
  • Our final lecture (Dec. 2) will be some final notes on the course, and otherwise open time for support.
Takeaways survey
Positioning
1/1