My web design course with Kevin McMillan at Emily Carr University of Art and Design is all about uncovering the layers behind a web site, with a focus on responsive adaptive design. Kevin has been teaching web design since the beginning of web design…so it’s interesting to hear his stories about how things have changed over time. Also he’s a wealth of information and has us using several free sites to learn this ever-evolving, fast-spinning, somewhat intimidating but fascinating area.
For the first week’s homework, we had to write some HTML (hyper-text markup language!) for a 3+page website. I decided to build a site that will house all the info i’m accumulating in my learning about Interaction Design. This is what my HTML file looked like:
Kevin wanted us to develop and think about the underlying structure of the site with headings, links, etc, using images and sections to divide up the information.
CSS and RESPONSIVE DESIGN
Next, for week 2, we learned CSS (cascading style sheet) which essentially makes the HTML look pretty, all the while understanding that to make a site responsive, it has to look the same on any device, regardless of size. Here’s a snippet of my CSS file:
Putting these two files together (HTML and CSS) reveals what the site would look like…here when the screen is at its widest, so the desktop view:
Then what it might look like on a tablet…offering a different page, with reference to my summer class with Thomas Girard at Emily Carr:
And lastly for mobile (when the screen is made the smallest), which is really how most people first look at websites, so it’s important to have all the same links, look and details…mobile-first!
FLOATS AND BOX MODELS
For weeks 3 and 4, Kevin has us re-create two websites so they matched an image he gave us…it was tough work, tackling basic floats and the box model. Floating is when you move images across a page and have text possibly wrap around it. The Box model is important to learn as that deals with space in the box (padding) and space outside the box (margins). Here are the two sites I recreated: