8 months ago


42 The Principles of

42 The Principles of Beautiful Web Design Frameworks After working with responsive web design for a while, we’ve begun to understand the process better and streamline it. We’ve started creating our own responsive frameworks and can target common elements that are found on most websites, setting up common structures that work well in most circumstances. This is great, because we no longer have to reinvent the wheel each time we design a new site. These frameworks are a workable base that we can use to create a consistent design across all devices, but that can equally be used to customize designs however we like to create beautiful, responsive websites. Many web development frameworks exist to help create beautiful, consistent, responsive websites, but there are two, in particular, that stand shoulder-to-shoulder in popularity and usefulness. Foundation 38 , shown in Figure 1.43, is a mobile framework by Zurb that’s packed with tons of web development features. Foundation seeks to simplify web development. It does this via a modular system featuring CSS classes that enable different features. With very little effort, Foundation enables you to create well-structured layouts. It also makes it relatively simple to implement a host of features including responsive navigation menus, image sliders, accordion menus, validated forms, buttons, model popups, panels, tooltips, progress bars, and responsive tables. Figure 1.43. The Foundation framework Bootstrap 39 , shown in Figure 1.44, is the other framework battling for the number one spot as the responsive framework of choice. Much like Foundation, Bootstrap has a number of its own builtin components that allow you to quickly create well-structured, mobile-first websites. Bootstrap has plenty of integrated features that are comparable to Foundation. With Bootstrap, you can create jumbotrons, panels, wells, navigation bars, progress bars, dropdowns, badges, alerts, tooltips, 38 39

Layout and Composition 43 popups, tabs, carousels, and much more. Bootstrap also integrates the use of glyphicons, which is an embedded font for use with the framework. Figure 1.44. The Bootstrap framework The primary reason people love Foundation and Bootstrap is that they’re highly customizable. You don’t have to download or even include the JavaScript files for components you aren’t using. Simply click the checkboxes corresponding to the components you need, and leave the ones you don’t. And once you’ve made your selections, Foundation and Bootstrap can compile them into custom downloads. They essentially take all the hard work out of compiling the components of your web development project. With developers keen to create the leanest websites possible, with the least amount of JavaScript, and the smallest file sizes, it’s easy to see why this approach is so popular. One issue that’s arisen with responsive web design is that traditional navigation menus don’t always work the same way they do on a mobile device as they do on a desktop screen; when there isn’t enough screen real estate things can become jumbled. The solution that’s been universally adopted is the mobile menu. It’s an icon of three lines stacked vertically, as shown in the top-right of the figure below, that represents an expandable menu, only available when the icon is tapped. The menu contents then appear as an overlay on top of the site’s content. Figure 1.45. A Foundation menu on a desktop screen The menu shown in Figure 1.45 is how the menu in Foundation looks on the desktop. On a mobile device, such as a phone or a tablet, the menu collapses, until you interact with it like in the examples shown in Figure 1.46.

Layout and Design - In Easy Steps
Boot Camp
The Complete Guide to a High Converting Website
Web Site Design & Usability Testing - HIPNet
30 ways to create amazing web experiences on tablets
Download PDF -
How to build a department web site (starter pack) - University of ...
Creative Services - Keiger Graphic Communications
Visual Design for Library Websites - WebJunction
Responsive Email Design Guide - e-Dialog
slides - HTML5 Developer Conference