Mobile first approach

We talk about mobile first. Mobile first means that during our website planning, we plan the content and layout for the mobile first.

Planning for mobile first ensures us to consider the most important thing of our website.

Sketching for mobile web

For sketching the layout of the mobile web, we can use a draft paper with narrow boundary box. Zurb’s sketchsheet is one of my favorites. Zurb Sketch sheet is a collection of website sketching toolkit. It contains different kinds of sketch sheets that we can use.

For example, this one contains both wide and narrow boundary that we can draw our website layout in both wide and small screen.

Exercise time

Now, browse to the the Macao Gov Portal. Follow the website layout and draw a rough layout sketch in the wide screen on the left of the sketch sheet. What I want you to do is then think how you would layout the content in the narrow screen. Try to draw your design on the right side.

Here is a sketching example on NYtimes.com:

Now it’s your turn to work on the sketching of Macao Gov Portal. You may take a photo of your design and send me your design via email. Remember the mobile first approach? To maximize the usage of this sketch sheet, you’ll actually need to draw the right side first. Then you draw on the left side only after you’ve done your mobile first design.

What’s more? You can fold the the sketchsheet into 1/3 of the original one. Then hold it on your hand and feel your sketch. Are your buttons easy to tap? Are content too indense to read clearly?

A screenshot showing how mobile-friendly web makes use of large buttons and list view.

Exercise time

It’s time for some exercises. Now use your mobile device and explore some websites. Try to check if these websites provide a nice reading experience. Or can the system or service extract the content of the website.