Mobile First

We will be discussing what it means to design “mobile-first”.
Video: Luke Wroblewski-Mobile First
Why Is It So Easy to Get “Mobile First” Wrong

Sketching and Protoyping

Today we will be diving further into prototyping for the web. We will be doing hands on practice with Invision

Project 1

Building off the process that we practiced in class last week, I give you big Project 1. Full Link to Project 1

To be completed by Wednesday, February 3

  • Review Chapters 10, 11, 12 of Duckett.
  • Read Chapters 6-7 of Krug
  • Read chapters 1-3 of Shiffman, seminar will be February 10 (See syllabus about seminars)
  • Read How to use an HTML boilerplate

Development Exercise Due on Wednesday, February 3

The goal of this exercise is to help you learn to

  • Familiarize yourself with the HTML5 Boilerpate
  • Better understand HTML5 structure ie <header></header><section></section> etc
  • Better understanding of responsive properties
  • Be able to change CSS properties

Exercise 4

Structure

  • Download the HTML5 Boilerplate Responsive Template - Direct Link
  • Expand the zip file and rename the folder ex4
  • Change the code h1.title to say My Recipe.
  • Change the three nav links nav ul li a to Ingredients, Directions, Nutrition Information respectively
  • Change article header h1 to the name of your recipe but make sure it links to the original recipe. You will be mixing tags. <h1><a href="/">Your recipe</a></h1>
  • Place your Ingredients , Directions and Nutrition Information properly onto the page, following the template structure.
    <h2>Ingredients</h2> <ul>....etc
  • Place your image in the img folder and place it into the <aside> section of the site.
  • Place your name in the footer

Anchor Links
You will be creating anchor links/bookmarks in your document to allow the navigation to jump to a section of the site.
* In your navigation, the link in your navigation for Ingredients should link to the Ingredients section of your site, Direction to the Direction section, Nutrition Information to the Nutrition Information of the site. How To Documentation: HTML Links - Create a Bookmark of the W3Schools Links Article HTML Bookmark Links

Style
You will be modifying the template styles to your liking. The following is the bare minimum to showcase your working knowledge of CSS.

  • Change the color of the header and footer and the header and footer borders.
  • Change the thickness of the header and footer borders
  • Change the color of the site background.
  • Change the sites font-family using a google webfonts. Use the Quickuse method. For more information check out [Google’s documentation.](https://developers.google.com/fonts/docs/getting_started?hl=en
  • Change the color of your table’s borders.
  • Add padding to your table. Look at Table Padding
  • Make sure your table is responsive ie width set to 100%, not a set pixel amount.

Submit
Upload to a folder called ex4” on your site. The URL should function everywhere at www.learning.yourdomain.com/exercises/ex4/
Once your link works, post it in Slack in #exercises