Objectives

Students will learn how to build a complete responsive web site from scratch. The course will focus on planning, workflow and implementation. By the end of the semester, students will have a responsive web site to add to their portfolio.

Required Text

• Implementing Responsive Design by Tim Kadlec
• Content Strategy for Mobile by Karen McGrane
• Mobile First by Luke Wroblewski

Prerequisites

Sufficient skills of HTML and CSS are required. If you need to catch up on HTML and CSS, read HTML5 for Web Designers by Jeremy Keith and The Book of CSS3 by Peter Gasston.

Requirements

• Access to a web server
• Text Editor such as Dreamweaver, Coda, BBEdit, Sublime Text or simple TextEdit for Mac or NotePad for PC.

Week 1: Why Responsive Design?

• History: “The Dao of Web Design”
• The rise of mobile devices
• Progressive enhancement
• Web standards
• The way forward

Week 2: Planning

• Context: Different devices; different environments
• Content negotiation: Structuring contents on various devices
• Time investment: Responsive design takes more time
• Content audit

Week 3: Web Site Proposal

Students will present their ideas to class on the responsive web site they would like to build. The presentation will take place on Google Hangout.

Week 4: Content Strategy

• Appropriate: Right for the user
• Useful: Specific purpose
• User-centered: Meet real user needs
• Clear: Easy for the user to understand
• Consistent: Consistency of language acts as a consistent interface.
• Concise: Omit needless content

Week 5: Workflow

• Wireframes
• Mockups
• Style guides
• Responsive structures

Week 6: Web Site Mockup

Students will present their mockup to the class using the browser. Students will also get feedback from their classmates and instructor. The presentation will take place on Google Hangout.

Week 7: Mobile First

• Why mobile first?
• Screen size
• Constraints
• Capabilities
• Touchscreen

Week 8: Layout

• Flexible grid
• Flexible typesetting
• Convert pixels to percentages
• Creating a flexible grid
• Flexible margins and paddings

Week 9: Media

• Flexible images
• Flexible SVG
• Flexible Video

Week 10: Media Queries

• Viewports
• Structure
• Order
• Breakpoints
• Navigation
• IE supports

Week 11: Design Critique

Students should have a working site that is closed to the final product for review and critique.

Week 12: Preprocessors

• Why preprocessors
• Sass
• Compass
• LESS

Week 13: Pollyfills

• Modernizr
• Response.js
• CSS3-mediaquery.js

Week 14: Performance

• Images
• JavaScript
• CSS

Week 15: Final Project Due

The following verbatim notes are from Luke Wroblewski’s Mobile First.

Chapter 1: Why Mobile First?

Designing for mobile first not only prepares you for the explosive growth and new opportunities on the mobile internet, it forces you to focus and enables you to innovate in ways you previously couldn’t.

Native vs. Web

Native mobile applications give you robust access to hardware capabilities that you currently can’t get through mobile web browsers. Core features like access to the address book, SMS, camera, audio inputs, and other built-in sensors are mostly unavailable.

Whether it’s through search, email, social networks, or on web pages, if you have content online, people will find and share links to it. Not having a mobile web solution means anyone that follows those links on a mobile device won’t have a great experience (if they can even access your content at all). Having a native mobile application won’t help.

Access might even be the biggest user benefit for a mobile web experience. Even if you build a native mobile application for one platform, chances are you won’t be able to create one for every platform.

Chapter 2: Embrace Constraints

Designing for mobile first forces you to embrace these constraints to develop an elegant mobile-ap- propriate solution. But the benefits go well beyond mobile.

Chapter 3: Capabilities

When you design and develop for mobile first, you can use exciting new capabilities on the web to create innovative ways of meeting people’s needs. Technical capabilities like location detection, device orientation, and touch are available on many mobile web browsers today.

Chapter 4: Align With Mobile Behaviors

• Lookup/Find (urgent info, local): I need an answer to something now—frequently related to my current location in the world.
• Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions.
• Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it.
• Edit/Create (urgent change/micro-tasking): I need to get something done now that can’t wait.

Content Over Navigation

As a general rule, content takes precedence over navigation on mobile. Focusing on content first, navigation second gets people to the information and tasks they want quickly.

Pivot and Explore

A simple anchor link in the site’s header jumps people to navigation options at the bottom of the page. Having this list present at the bottom of content pages allows people to pivot and explore other parts of the site.

Chapter 5: Ready, Set, Actions

As more touch-screen mobile devices get into people’s hands, we need to make sure they can use our websites with their hands. To do so:

• Go big with appropriately sized and positioned touch targets.
• Learn the language of touch by familiarizing yourself with common touch gestures and how they are used to navigate and interact with objects and screens.
• Don’t be afraid to push toward natural user interfaces (NUIs) that make content (not chrome) the focus of people’s actions.
• Transition your on-hover menus to mobile using the most appropriate solution for your site.
• Remember to consider non-touch and hybrid devices when designing your mobile web interactions.

Chapter 6: Input

• Actively encourage input and allow people to contribute and create using their mobile devices.
• Make sure your questions are clearly presented with mobile-optimized labels.
• Get rid of the pain associated with accurate mobile inputs by using input types, attributes, and masks in your designs where possible.

Chapter 7: Layouts

Through the application of fluid layouts, flexible media, CSS3 media queries, and (sometimes) a bit of JavaScript, re- sponsive web design allows you to adapt to devices more sig- nificantly. With responsive web design, you can set a baseline (mobile) experience first, then progressively enhance or adapt your layout as device capabilities change.

Device Experiences

different device experiences may require different user interface design solu- tions. The relative importance of primary tasks can differ between device experiences (because of user posture), as can the layout and interaction design needed to accommodate dif- ferent input modes and average display sizes.

Reduce

Not only will reduction make putting mobile layouts to- gether easier, it will also give people focused ways to get things done.

Conclusion

And last but not least, don’t be afraid to start small. Some of the biggest successes in mobile today came from small experiments and teams of passionate web designers and developers. You don’t need to know everything about mobile—just take what you do know and go.

I started learning Sass a while back but it never caught on. Not that the process is intimidating, but over the years I have developed a practice of keeping my CSS as simplified as possible. I wanted to see everything on one page and combine or eliminate repeated elements as much as I could.

I could continue to work with straight CSS, but Sass is gaining so much ground in the CSS pre-processor world that it is hard to ignore. Even Dan Cederholm is converted and I was going to wait for his book, Sass for Web Designers, to pick up Sass again, but I just wanted to dive in again.

Yesterday I spent a couple of hours converting this site CSS into SCSS. Panic 2’s native support with color code makes working in Sass easy. The set up through command line is a breeze. Import is a very handy feature to keep SCSS clean. It helps me make updates to the latest version of HTML5 Boilerplate. I still have much more to learn in Sass, but I am now converted as well.

I am testing out CloudFlare with Visualgui. I run the free option and it looks promising in term of performance. So far I like the way CloudFlare optimize my site for delivery, but security is the main component that makes me interested in taking my site to CloudFlare. The set up is quite easy as well. I am going to let it run for a few weeks to see how it goes. I might make the recommendation for the Law School.

Two new podcasts added to my listening list: “Design Matters” with Debbie Millman and “Unfinished Business” with Andy Clarke and Anna Debenham.

In “Design Matters,” Ms. Millman interviews top designers including Steve Heller, Erik Spiekermann and Khoi Vinh. Ms. Millman has a raspy, sultry voice for podcast and her questions are direct and intriguing. Apparently Ms. Millman have always done her homework before an interview. The episode with Erik Spiekermann is my favorite so far even though the German typographer uses quite a bit of flowery language. Eventually I’ll get to all of the episodes on “Design Matters,” but I am going through all the names that I am familiar with. Each piece runs about half an hour to 40 minutes with no sponsor, which is a nice, uninterrupted listening experience. Podcasting is no easy task and I completely understand that sponsors help paid for the hard work, but they do get a bit annoying, especially when an episode has three sponsors.

“Unfinished Business” is a new podcast (only three episodes so far) on the business side of design. I really appreciate the honesty Andy and Anna shared on how they price their works. They help me to rethink about own business practice, which, I must admit, I am not very good at. The good thing is that it’s never too late to learn. Right now I don’t rely on freelance as my main source of income; therefore, I still have the luxury of picking and choosing the clients I would like to work with. Mad kudos to Andy and Anna.

Paul Rand, 1996:

It means integrity; it means honesty; it means the absence of sentimentality and the absence of nostalgia; it means simplicity; it means clarity. That’s what modernism means to me.

To see examples, check out Steve Heller and Gail Anderson’s New Modernist Type.

Dan spends most of his daytime with grandma and his cousin who is four months younger than him. His cousin has a very soft cry. Even when he screams the loudest, his volume is quite modest. On the other hand, Dan cries crazy loud and his tone is quite piercing like Mariah Carey reaching her high notes. It’s unbelievably uncomfortable, especially in the wee hour.

Even Dao is nothing in comparison. When Dao screams, I can tell that he uses tremendous strength. Dan’s scream is effortless. At night when he wakes up, I stick the bottle into his mouth as quick as I can to prevent his scream. One time he screamed in my ear, I almost dropped him off my arms. Just kidding. He’s still my sweet baboo.

Man, that kid is growing fast and I am starting to see see his personality. He likes to take toys from Dao and his cousin rather than picking out his own. Yesterday, Dao sneezed so I pulled a tissue and wiped his nose. Dan did the same thing that I did. Whenever I tell him to go to bed, he would head toward the stairs.

Not sure what he’s saying yet, but sounds like he either says “Wuzzup” or “What’s that?” We enrolled him into the Jewish Community Center as well in June. It’s gonna be at least $2,500 a month for both kids. If we have a third child, one of us would have to quit our job. It ain’t gonna be me though. I definitely can’t take on that challenge.

Hôm qua nói chuyện điện thoại với mẹ, “Má ghé chị Phương gởi tiền về cho ba ăn tết. Má ứng trước cho con nhé. Chừng nào về Lancaster con trả lại.” Mẹ hởi, “Mầy muốn gửi bao nhiêu?” Tôi trả lời, “Chừng 20 đô để ba mua trà uống chơi cho vui.” Má cười cười không nói vì biết tôi nói đùa. Tôi nói tiếp, “Thì má ứng trước má muốn gởi bau nhiêu thì gởi. Nhiều quá thì kể như má gởi chứ không phải con.” Má nói OK để má gửi.

Một tiếng sau má gọi lại nói, “Sẳng mày gửi cho cô ba luôn.” Tôi nói ok cũng được thì cứ gửi bằng số tiền má gửi cho ba. Má lai nói, “Nếu vậy thì mầy chia ra làm hai cho cô ba và chị Mai luôn.” Tôi cũng đồng ý.

Má nhắt đến cô ba va chị Mai làm tôi nhớ lại thuở ấu thơ. Cô ba tôi rất hiền và thương tôi rất nhiều nên tôi rất quý cô. Ngày xưa lúc hè tôi thường qua nhà cô chơi. Lúc xưa tuy nhà cô không xa nhà tôi lắm nhưng tôi ở gần siêu thì còn cô thì ở thôn quê chỉ cách nhau một con sông.

Lúc xưa anh Hiệp rủ tôi đi bắn chim sau vườn rồi về nhặc lông rô ti. Ăn cũng phê lắm. Vào buổi trưa tôi nằm trên vỏng kế chổ chi Mai đan mùng. Chị Mai bị bệnh bẳm sinh không đi lại được nên hằng ngày chị ngồi đan mùng vừa đở chán vừa kiếm thêm tiền.

Lúc ấy tôi ghét nhất là trưa vì ai cũng đi ngủ còn tôi thì không thích ngủ. Nằm vỏng mà nghe tiếng ve kêu sầu thảm làm sao đó. Tôi nhìn chị đan mà cảm thấy xót xa cho chị nhưng chị không bao giờ than phận cả ngược lại chị lúc nào cũng cười tươi và cởi mở. Bây giờ nghỉ lại tôi thấy cuộc sống đó thật nhẹ nhàng và êm ái.

A couple months ago, a new Dunkin’ Donut opened in my area and gave out medium coffee for free. I took one and converted since. I have never been a big fan of DD’s coffee, but it must be this new place with the new machines. The coffee is light, sweet and fresh, but something about its finish that gets me hooked. Now I can not go back to drink Starbucks’s bold. Now I understand why people say Starbuck coffee tastes like burnt. I am not really a coffee snob. I just need sugar and caffeine to get me through the day.

Lately Dao wears nothing but his one-piece pajamas to sleep. The good thing is that he has four identical ones to change daily.

Every time he goes pee-pee I always warn him about zipping up and down. I don’t want him to have that There’s Something About Mary‘s zipper moment. Unfortunately his mom didn’t alert him about it last night. The zipper caught his thing when he zipped up. Ouch! Poor thang. See? Only daddy pays attention of those kind of things.

Later on he asked her, “Mommy, can you make my cu feel better?” I splat out my juice when she told me that. He took the words out of my mouth. I have always wanted to ask her the same question, but I never have the audacity to.