TechEd 2012 CD208 (Chapter 2/6) – Responsive UI (Step 2)
After we’ve mocked the backend with just a few lines of code, our next step is the frontend. Responsive web design? You might wonder WHAT on earth is responsive web design and WHY you should care? @johnpolacek compiled a very nice presentation on exactly this question, so why repeat? Enjoy his lovely scrolldeck.js presentation. If you can’t wait, here are his WHAT and WHY:
WHAT on earth are responsive websites?
“Websites that respond to their environment” [(i.e. from mobile devices to desktop) in such a way that they provide the optimal user experience]; I added the part in brackets for clarification. Source: Wikipedia.
WHY should you care?
“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” Originally from Jeffrey Veen.
Stop, enough theory! Let’s see how responsive web design looks in action and HOW you can build a responsive web page. Have you ever visited the webpage of The Boston Globe”? No? You should and don’t forget to play with your browser window size. It’s a very good example (and often quoted one) for responsive web design. Figure 1 shows what I mean (from mobile to desktop)… and that’s just one example, the number of responsive webpages is growing daily; http://mediaqueri.es/ tries to keep track of the most beautiful ones.
Now, let’s get real and let’s focus on HOW to build a responsive web application. You should be familiar with HTML and CSS for this step since I don’t explain the HTML and CSS markup used in detail. If you need a refresher, you might like to start here. Figure 1 serves as a visual guide and highlights the four key building blocks of our application: the menu, the content area, the dashboard, and the footer.
Figure 1. The four building blocks of our application.
Now you might ask: do I have to develop all of that from scratch? Well, it depends on your taste; but you don’t really have to. There are several frameworks out there to make your life easier. Plenty of blog posts (e.g. post) compare the different frameworks and highlight their strengths and weaknesses. Almost every developer has his/her preferred framework. I personally like Twitter Bootstrap quite a lot; but that’s my personal taste. You have loads of options.
For this application, we’ll use Twitter Bootstrap. So let’s create a new folder called step02_bootstrap, download the latest version of Bootstrap (v.2.1.0), extract it and rename the files, i.e. adding the version number. In addition, copy file jquery-1.7.2.js from step01_fake_server/ to the js/ folder and create file style.css under folder css/. Your folder structure should now look as follows:
step02_bootstrap/
├── assets/
│ ├── css/
│ │ ├── bootstrap-2.1.0.css
│ │ ├── bootstrap-2.1.0.min.css
│ │ ├── bootstrap-responsive-2.1.0.css
│ │ └── bootstrap-responsive-2.1.0.min.css
│ ├── img/
│ │ ├── glyphicons-halflings-white.png
│ │ └── glyphicons-halflings.png
│ └── js/
│ ├── bootstrap-2.1.0.js
│ ├── bootstrap-2.1.0.min.js
│ └── jquery-1.7.2.js
└── css/
└── style.css
Next, download Bootstrap’s starter template, copy it into the root folder step02_bootstrap/ and rename it to mockup.html. We use the template as the foundation for our application. Let’s adjust the template to our needs. Open mockup.html and update the following parts:
- Remove all links under <!– Le fav and touch icons –>
- Remove all bootstrap-*.js scripts
- Update all paths and scripts names (by adding the version number)
- Add link to boostrap-2.1.0.js
- Copy the style from mockup.html to style.css (see styles-01.css) and add style.css to mockup.html.
- Change title to “Session supplements”
Mockup-01.html shows you how the file should look like after you’ve performed all steps.
Now, let’s focus on building block number one and design the navigation of our application, the menu bar (part 1 in the source code). We have six chapters, and a home and an about screen; so we need to replace the existing menu (Twitter Bootstrap uses the term nav bar). Mockup-02.html shows the updates, but wait, if we open the file in the browser (and resize it), it doesn’t look nice nor is it really responsive. Let’s fix it and update the styles. Styles-02.css contains the necessary adjustments (I always provide a corresponding style file for each mockup-*.html file, so that you can test it right away.). As you can see, I use media queries to adjust the layout to the screen size; but it’s only a very small glimpse into media queries. For highly sophisticated responsive design, you must consider much more. Learn more on media queries by continue reading e.g. here, here or here.
It looks much better now, but we still have some issues with the size of the content area. Since we anyway want to work on the content-header (part 2), we don’t deal with it at the moment. Instead we design the content header for our application. For this application, we use several icons from Glyphicons Free, licensed under CC BY 3.0. In addition, we rely on three icons from The Noun Project: The “home” symbol by the noun project itself (licensed under CC BY 3), the “book” symbol by Foomandoonian (licensed under CC0), and the information” symbol by Sven Hofmann (licensed under CC BY 3), from The Noun Project collection.
I’ve already resized and converted them for you. You can find them in the Github repository. Download and copy them to the img/ folder:
step02_bootstrap/
├── assets/
│ ├── css/
│ │ ├── bootstrap-2.1.0.css
│ │ ├── bootstrap-2.1.0.min.css
│ │ ├── bootstrap-responsive-2.1.0.css
│ │ └── bootstrap-responsive-2.1.0.min.css
│ ├── img/
│ │ ├── glyphicons-halflings-white.png
│ │ └── glyphicons-halflings.png
│ └── js/
│ ├── bootstrap-2.1.0.js
│ ├── bootstrap-2.1.0.min.js
│ └── jquery-1.7.2.js
├── css/
│ └── style.css
└── img/
└── icon_book.png
Mockup-03.html and styles-03.css contain the necessary adjustments. Now it looks really nice; responsive and colorful.
Next, we need a nice footer (part 3). We just reuse the nav-bar styling; maybe that’s not the best way, but I have to stay in the 18 minutes limits for my TechEd demo… Done! See mockup-04.html and styles-04.css.
But hey, wait; wouldn’t it be cool to have more color in our life? How about having one distinct color for each tab of the menu bar (part 4)? So, if we select another one, the color should change as well. Sounds like a good idea. Just see how easy it is by using some advanced CSS selectors (learn more on them here) and just three lines of JavaScript. I used color lovers to compile my color palette. Don’t forget to create file styles.js under js/ and include it in mockup.html. Play with the class=”active” style and see how the color changes. Again, see mockup-05.html, styles-05.css (styles-05.css doesn’t contain any new coding, we only included it for completeness) and style.js.
Now it’s time to work on the content area (part 5). The content area will be later filled by content e.g. stored in a content management system. So, our design is more a generic template that is later filled with real content. See mockup-06.html and styles-06.css for the changes I made.
Great, just one building block left: the dashboard (part 6). It consists of four parts: the leaderboard, the hottest tweets area, the latest tweets area and the statistics. Some months ago, I attended the GSummit 2012 in San Francisco. They came up with memecube, a Twitter client especially tailored for use in conference settings. Very nice piece of software, I really liked it and drew from it some inspiration for the dashboard.
See mockup.html and styles.css for the end result: Figure 2 shows the mock-up of our application. We can reuse in the next step. Indeed, I’m a big fan of using HTML, CSS and JavaScript for building the mockups. By doing so, I don’t produce much waste and often can reuse most parts.
Figure 2. Final mockup.
So, what’s with the styles? I’m not 100% happy with them. They surely need some clean up … maybe it’s something you would like to do? For me, it’s time to move on and get ready for step 3.