Chapter 4: Design and Layout

Article
08/28/2012

Introduction | Design is a Worthwhile Investment | Web Project Designer Roles | Focus on the User | Design Prototyping | User Experience Design Considerations - Consistency, Responsiveness, Familiar Metaphors, Streamlining the Experience, Anticipate Usability Issues, Limit the Choices | User Interface Design Considerations - Color, Typography, Balance and Symmetry, Consistency, Simplicity | Other Design Considerations | Designing the Mileage Stats Reference Implementation - Identifying User Stories, Mileage Stats User Story, Using Flow Diagrams to Prototype the UX, Using Wireframes to Prototype the UI, Creating Site Mockups, Implementing the Design, Converting a Mockup to HTML, CSS Organization, Vendor-Prefixed Attributes, Debugging | Summary | Useful Design Tools | Further Reading

Introduction

The development of rich, responsive web applications requires an iterative design process to create applications that result in a user interface (UI) design that harmonizes beauty, simplicity, symmetry, and consistency. The combination of new web technologies and innovations in web browsers makes it possible for designers and developers to complement their UI with an engaging and intuitive user experience (UX).

The design process includes the collaboration of stakeholders and team members with different skills and perspectives. If your team invests in a design process, you are more likely to create an application that users enjoy, find useful, and continue to use. A goal of this chapter is to illustrate the importance of the design process, and UI and UX designer roles. If you are not able to have dedicated designers on your team, then think about the concepts discussed here as you plan and build your own site.

Many books have been written on UI and UX design. This chapter does not attempt to provide comprehensive UI and UX guidance, nor is it a primer on web technologies such as HTML5 or CSS3. Instead, this chapter explains the design process and considerations the team applied when building the Mileage Stats application.

In this chapter you will learn:

The importance of the designer roles and the design process.
UX and UI design artifacts and considerations.
How the design of Mileage Stats evolved.

Technologies discussed in this chapter are HTML and CSS.

Design is a Worthwhile Investment

We cannot overstate the value of a high-quality design. Design may easily be the determining factor between a successful website and a website that does not get the expected traffic, repeat visitors, or recognition from its users. Design is beauty and function.

Design invokes the correct emotion. A successful design helps users feel confident that they are visiting a credible site. A high-quality design makes users feel valued and encourages them to explore the site.

Design communicates ideas that resonate with users and enriches the user experience. Design brings clarity to the presented information. But a successful design does more than that. It provides the user with an experience that naturally flows and is enjoyable. Effective design results in websites that are easier and faster to use. It helps users achieve a result and save time by making fewer mistakes and knowing what to do in case of an error.

Design improves the process and ensures the right result. Design is hard work. It takes time and effort, and there is a cost to working with one or more designers. However, investing in design early in the project will likely reduce the overall development costs and provide many other benefits as well. The design process helps to focus the project and set its priorities. It determines what the site will accomplish. The design artifacts facilitate communication with stakeholders. The iterative prototyping process allows the design to quickly and easily change and gives team members the freedom to be creative because they are not constrained by working code. Defining the user experience and user interface early clarifies scope. This facilitates the identification and prioritization of features and the technical requirements to deliver these features.

Web Project Designer Roles

Developing modern web applications requires a broad range of skills. Depending on your application requirements, your team will need expertise to fill the following roles: user experience designer, information architect, user interface designer, graphic designer, user interface and user interaction developer, production designer, integrator, producer, and server-side developers and testers. The UI designer and information architect are more focused on the audience and the consumption of the website than they are concerned about how the website is implemented. On the other hand, integrators are more concerned with how the design is implemented.

Designers don't necessarily care about how it gets done; they just assume that developers can do it. Developers may be frustrated at how difficult the design can be to implement. Designers may get frustrated that developers don't understand the importance of the design.

The composition of the web project team will vary from project to project based on the application's requirements and the team's resources. Depending on the size of the team, you may have a number of specialized people or one person filling multiple roles. A large project will typically include two or three designers, an information architect, a producer, and two integrators. A medium-sized project will probably have one designer and one integrator. A small team typically has a single integrator/designer who can do CSS, JavaScript, and visual design. The tradeoff is that this individual is probably not as strong in all areas because his or her skills are spread across many areas rather than having expertise in only one of these roles.

Teams that value the UX and UI roles receive a significant return on investment. This is illustrated by looking at websites that invested in UX; these sites exhibit a polished UI that is intuitive, responsive, and facilitates the easy completion of tasks. UX and UI designers positively impact the team by being the customer advocate, providing a user-centric perspective on what the site offers and how the site is used.

In this chapter, designer is an umbrella term that covers the above designer roles.

Focus on the User

When you are starting a project, the first thing you should focus on is the user. You should start by defining who the user is, what their characteristics are, and identify scenarios for each persona, which is a user in a particular context. A persona embodies work style, role, motivation, skills, and goals. If you have a complicated or large application, some features might target different personas. The process of identifying users and scenarios helps drive the design of both the experience and the branding of the application.

As your design evolves, continue to think about the user's characteristics and intentions. Think about creating the flow through the application that provides a path that is natural and makes sense to the user. Don't be afraid to reduce features or start over again.

Companies that research user behavior are able to evolve their applications to reduce failure rates and increase adoption. Many companies have dedicated user research teams for this purpose. They instrument their websites to track, for example, how long people take to navigate from page to page. This helps identify areas of confusion and difficulty. This is important because in a large company, even a very small percentage of people abandoning the order pipeline could cost millions of dollars.

Design Prototyping

Design prototyping begins after the application requirements, user scenarios, and user stories have been identified. Design prototyping provides structured time for stakeholders and team members to iterate on the application design. It is much cheaper to add and remove pages to the site earlier in the design, and it is cheaper to change paper diagrams than code. The iterative process of creating the following artifacts allows design decisions to be made at the right time with the right level of effort.

Mood board. A mood board is a visual collage that can include words representing the concepts you want the application to convey, along with colors and images that would appeal to your users from a variety of sources. A mood board is created early in the project because you want everyone on the team to be on the same page about what you are building and to be inspired. The mood board allows you to set direction about the feel of the application and about your design principles, and allows you to eliminate unnecessary elements and ideas. It doesn't represent the end product, but helps you establish the personality of the product. If you are following a style guide or have an established experience, skip this step. If you are creating a new experience, this is a common first step. This is a low-cost, fast exercise that provides high value in establishing your brand.
Flow diagram. Based on application requirements, the UX designer defines the pages in the site, actions available on those pages, and navigation between pages. These decisions need to consider the user stories identified in the requirements. The result of this work is a flow diagram, typically drawn on paper.
Wireframe. The UX and UI designers collaborate to create wireframe models that depict rough placement of the text, data, and basic controls. These models are used to help organize the page's information. The wireframes can be hand drawn or created using an application such as SketchFlow or Balsamiq. Wireframes intentionally lack detail such as color, images, drop shadows, and finished controls.
Image-based Mockups. UI and graphic designers work together to create images that show what the application will eventually look like. These mockups contain details such as typography, color, gradients, images, and transparency. Mockups should communicate all necessary details of the UI. Multiple mockups for a single page may be required to effectively convey details of the different states. Mockups can be created using a tool like Adobe PhotoShop or Illustrator.
Functional mockups. The designers and UI developer build functioning HTML pages that include CSS and possibly JavaScript. These pages are autonomous and don't yet interact with the server, and use fake data when needed. It's during this phase that the team makes decisions about implementation details and balances browser capabilities with HTML, CSS, images, and JavaScript.

Note

Depending on the project scope and the team's resources or preferences, image-based mockups may be skipped. Note that it's cheaper to modify and iterate the design using a graphical image than HTML and CSS.

User Experience Design Considerations

A UX design specifies the site's structure, the web pages it uses, what actions users can perform on each page, and the transitions that can occur once a user performs an action. A well-designed site has a short learning curve, makes the user feel successful, saves them time, is intuitive, and presents clear, useful information. The following sections discuss UX design considerations.

Consistency

User success is the primary motivation for consistency. User gestures, colors, metaphors, navigation, and similar concepts should be consistent across your application. Keep your navigation model consistent across your site and be sure that you don't change the way users do things on different pages. Make sure the user always knows the context they are in so they don't have to think about it.

The degree of consistency in your application is directly related to user success. When your users encounter inconsistency, it causes them to question their understanding. They are forced to determine whether this was an oversight in the application or whether they misunderstood how the application works. Regardless of the degree of the inconsistency or how much additional time it takes, the user has been taken out of the flow of what they were trying to accomplish.

An example of consistency in Mileage Stats is the use of vehicle tiles in both the dashboard and details layouts. Because the vehicle list animates the transitions between these layouts, the user sees the relationship, understands why some are collapsed, and never loses sight of the vehicle they selected. Animations should provide feedback or direct the user's attention but not be a distraction or be irritating to your users.

Responsiveness

Users appreciate a site that is responsive. The goal of a responsive website is to never leave the user wondering what is going on. Responsiveness means the site provides feedback when the user takes an action, and the site loads content quickly.

Feedback can be a visual cue such as a confirmation graphic that appears when the user clicks a Submit button or a progress bar displayed during a long-running task. Another example of immediate feedback is an error message that appears as soon as the user makes a mistake in a form rather than after the form has been submitted.

When loading content, you can improve a user's perception of responsiveness even if the actual load time is slow. Text, images, data, and scripts can be downloaded in the background. Mileage Stats demonstrates a responsive UI by prefetching chart data when the Dashboard loads, so that when the Charts page is accessed, the chart displays immediately. Data is also loaded asynchronously during UI transitions.

You can optimize page rendering times by putting script tags for JavaScript files at the bottom of the HTML page or by using a JavaScript loader so the JavaScript files are loaded in parallel to rendering the HTML page. Doing this allows the majority of the page content to be loaded and rendered first. When a script tag is found by the browser, all rendering stops until the script is downloaded and evaluated, so if the scripts are on the top, the user may see a white screen for a few moments.

Familiar Metaphors

People naturally associate new concepts with what they already know, so familiarity shortens the user's learning curve. The canonical metaphor is the shopping cart. People know what a shopping cart is, so you don't need to explain the virtual equivalent.

Streamlining the Experience

Streamlining is about optimizing the navigational flow through the site. Users should not have to spend time searching for information they care about most or reading about how to navigate the site.

One of the most important things in site design is global navigation. This is the top-level channel for how users get into your site and accomplish the tasks that are most important to them. Navigation should feel natural and familiar to users. If you want to innovate, innovate by building upon the familiar. Designers and developers should work together to create a prioritized list of the top-level actions based on your user scenarios.

Consider ways to improve the use of the site. Evaluate how easy it is for users to locate information or complete a task. Logically place features where users need them. An example of this is placing a reset password button next to the password field on a sign-in page. Additional examples of streamlining the experience are setting focus to the first field in an input form, and designing the UX so that the user does not have to use a mouse.

Think about how to get people to willingly do what you want them to do without feeling like they are being forced. For example, think about form registration. Don't ask the user for any more information than you will actually use. You can help the user progressively fill out the form by breaking the input process into multiple steps that build on each other based on the user's input. This will require less of the user's time, but you need to be clear about the number of steps it will take to complete the process. You can use a progress bar to communicate to the user where they are in the process. Save users as much time as you can by automatically filling in form fields whenever possible. For example, when given a zip code, fill in the city and state. Use a country field to control the display of address input fields, or a credit card type to change the security code prompt. Sites that take shipping and billing information should provide the option to use the same address for both.

Mileage Stats demonstrates a streamlined experience in a number of ways. It provides a simple site navigation experience, as shown below.

Navigation in Mileage Stats

Hh404087.939f01f8-30d4-497f-8c92-a8886652cd12(en-us,PandP.10).png

It also has a Complete Registration form that is optional, asks for the minimum amount of information, and can easily be dismissed.

The Mileage Stats vehicle tiles on the Dashboard prominently display commonly used vehicle performance metrics. The vehicle tiles are easy to read and provide the user with the ability to drill down for more detail.

Example Mileage Stats vehicle tile

Hh404087.d8adc7f2-7815-44c8-b388-5ff921eaa37a(en-us,PandP.10).png

Design for desirability and usability. Think about how you progressively disclose information and options. You don't necessarily want everything to be at the same level of discoverability. You should think about what items you are putting above the fold, which means that they are immediately visible on the web page without scrolling.

Anticipate Usability Issues

When possible, account for user actions that that can lead to frustration. For example, saving form data as the user completes a form prevents them from having to reenter data if they accidently press the backspace key and navigate to the previous page. Prompting the user to save unsaved form data when they close the browser is another technique for preventing unintended data loss. Another feature to help users be successful is to prevent data loss through the use of a trash can or by providing an undo action that is available after the user completes a destructive action. You can evaluate the impact of your design and reduce risk by gathering data through user research.

Limit the Choices

UX designers encourage focused applications. These applications perform a limited number of tasks very well, rather than overwhelming the user with choices. Iterate on your design, reducing it down to its essence. Focus fiercely on the core scenarios and spend less effort on the edge cases that won't affect the majority of users. Elegance, usability, and desirability are easier to achieve with fewer concepts and less complexity. It is easier to limit the choices if you have a very clear understanding of who the user is.

User Interface Design Considerations

Users visiting your site get their first impressions from the visual elements and layout. You need to think about the visual aspects that will resonate with your users. Look at websites, applications, books, magazines, and anything that might help you gain inspiration for creating something new. Of course, you don't want to copy someone else's ideas. At the same time, however, you don't necessarily want to be different just for the sake of being different. Designing for the web is no different than designing clothing or anything else; you need to understand what the current trends are and what appeals to your user base.

One tool that you can use to convey ideas, personality, and emotion is a mood board, mentioned earlier. For more information about mood boards and to see an example, see the following resources:

"Website Mood Boards: A Successful Precursor to Visual Prototyping" by Kevin Flahaut
http://weblog.404creative.com/2007/02/14/website-mood-boards-a-successful-precursor-to-visual-prototyping/
"Why Mood Boards Matter" by Mindy Wagner
http://www.webdesignerdepot.com/2008/12/why-mood-boards-matter/

As we mentioned, a mood board should be created early in the design process. It helps get the whole team on the same page, facilitates important conversations between team members, and helps establish principles and direction for the project.

Focusing on the user can drive everything in the UI from the color palette to the design elements and typography. When you feel like your visual design is jelling, bounce your ideas off other designers, potential users, and customers to validate your ideas and help you focus.

Your UI design should be unified and provide a visual signal to your audience that all your elements belong together. The following sections provide some thoughts about the website's UI in terms of color, typography, symmetry, consistency, and simplicity.

Color

Color can be used effectively to communicate an idea or to focus a user's attention. Color discloses a mood, creates images, and highlights items. For example, the various shades of gray can create the illusion of depth or add drama. Be aware that many individuals perceive colors differently and so you should not rely solely on color to communicate information.

People tend to have a strong reaction to color. Color also has specific connotations in different cultures. Blue is one of the colors most commonly seen as neutral. When working on the branding and personality of the product, you should focus on your color palette early. There are many tools, such as Kuler, to help you select your color palette. The key to color is that it needs to evoke the correct emotion for your targeted users and/or your brand. Color contrast is also important. Make sure that there is enough contrast between your foreground and background colors.

For example, Mileage Stats uses red to indicate that a maintenance reminder is overdue.

Example overdue vehicle maintenance reminder

Hh404087.beeb54da-4879-498e-9be1-51a8d2f12cb0(en-us,PandP.10).png

Typography

The font you choose greatly influences the emotion your website conveys. In general, you don't want to use more than three typefaces across your application. However, certain typefaces, especially similar typefaces, don't work well together. Certain fonts are designed specifically for headlines and some fonts can be used anywhere in your application. There are tools such as Typekit that you can use to choose a web font and font stack.

Font size, font weight, and the spacing between letters, words, and paragraphs are also important. You should avoid sizes that are too large or too small. It is often helpful to make the font size of a text field slightly larger than the surrounding text, but you need to take into consideration the size of the page and avoid forcing the user to scroll down if possible. Designers often set the font smaller than the 16 pixels that the browser uses as its default. You may want to adjust the line height as well.

Use a CSS reset file so that you can set the base font sizes explicitly and not depend on the default browser settings. A CSS reset file is also helpful in establishing default values for padding, margins, and borders to ensure consistency across browsers. These defaults are typically set to zero so other CSS rules can provide values on top of a known baseline. For an example of a CSS reset, see the reset.css file in Mileage Stat's Web\Content folder.

Balance and Symmetry

Balance refers to the distribution of visual weight and whether it is symmetrical or asymmetrical. Symmetry can communicate stability and strength, which may be appropriate for a traditional audience. Asymmetry is a more informal balance that may be more appropriate for a modern audience or an entertaining website.

Studies have shown that there are certain proportions of a physical page layout that intrinsically feel better to users. You can use a grid system to help you set the width of the site navigation and the content of the page with the proper proportions. One example is the 960 Grid System.

You should also think about using the rule of thirds in your layout. This is a rule of thumb for visual composition that states that an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines. Important compositional elements should be placed along these lines or their intersections. The Mileage Stats landing page illustrates this idea by placing the title, description and login form on these intersections.

Mileage Stats landing page

Hh404087.e569d819-6d20-46eb-8c86-b4022bb8e402(en-us,PandP.10).png

Consistency

Page layout, branding, color, and typography should be consistent across the site. You can use master pages and CSS to help drive consistency. You should follow established conventions for UI elements so that users can quickly understand and use your site. You should think about your UI control choices and keep them consistent across your application. Don't confuse the use of radio buttons and check boxes. Don't interchangeably use links and buttons to do the same thing on different pages. Be aware that because of touch interfaces, people assume that everything is clickable.

Simplicity

Lay out the page logically to help users accomplish the most important features or tasks. Don't put crucial elements in areas that usually contain ancillary information. Avoid technical jargon that users won't understand. Limit the number of animations, special effects, colors, gradients, fonts, and other design options.

Other Design Considerations

In addition to the considerations mentioned above, you should think about designing for accessibility, globalization, and localization. An accessible design is one that can be used by as many people as possible, with varying abilities. Globalization ensures that your application can be translated to another language and culture. Localization is the act of translating your application into another language.

Designing the Mileage Stats Reference Implementation

This section walks through the design process and decision points that influenced the design of the Mileage Stats application. Coverage includes UX and UI design prototyping, creating mockups, and integrating design assets with the application code.

Identifying User Stories

The team created a prioritized list of user stories identified from the application requirements and user scenarios. The user stories are a tool used by the designer to drive the creation of the flow diagrams and prototypes. Developers use the user stories to drive their weekly backlog task items and to validate the completed work. The user story below was used to describe the requirements for displaying the dashboard.

Mileage Stats User Story

The team wrote their acceptance criteria using the given-when-then template. This provides for clear and concise documentation that can be understood by all team members and can be used to generate both manual and automated test scripts. For more information, see the "Introducing Behavior Driven Design" in the "Further Reading" section below.

User Story: As an authenticated user, I want to see my dashboard so I can use the site.

Acceptance Criteria:

Given an authenticated user

when they navigate to the dashboard page

then the user name

and the word "Dashboard" are displayed.

Given an authenticated user

when they are redirected to the dashboard page

then the user name

and the word "Dashboard" are displayed.

Using Flow Diagrams to Prototype the UX

Based on the user stories, the UX design came to life on paper in the form of flow diagrams. The early diagrams were rough and only pictured main features of the application. These flow diagrams outlined the primary pages and how the pages would link to each other. The following figure illustrates an early application flow diagram.

Early UX flow diagram

Hh404087.4261c772-690c-4d6f-8b1f-72b2c1a970ab(en-us,PandP.10).png

The flow diagram was then expanded to show data placement and the available actions for users, as pictured below. The flow diagram evolved through an iterative process with the team and stakeholders. As features were added or removed, the flow diagram was updated to reflect the current user stories, ensuring that no important functionality was left out.

Additional details for the flow diagram

Hh404087.0e72a33f-da5d-439a-8c0b-8e1be62a71ff(en-us,PandP.10).png

Using Wireframes to Prototype the UI

Based on the flow diagrams, each section of the UI had multiple wireframes created for it. The wireframe was drawn on paper, with some pieces on sticky notes. The team tested each variation against user stories, moving the pieces around to decide what worked best. The following figure illustrates one of the wireframes.

Early wireframe

Hh404087.ecd03551-07d9-42c7-a3f6-3dca557457ab(en-us,PandP.10).png

Wireframes can also be used to illustrate animations and interesting transition effects. In Mileage Stats the vehicle tiles animate into position when transitioning between the Dashboard and Details layouts. The vehicle tiles also expand and collapse based on the selected vehicle, and allow you to change the ordering of your vehicles. Using the wireframes allowed the team to easily iterate on the details of these animations. The following figure is a hand-drawn wireframe of a vehicle tile and its associated animations.

Early animation wireframe

Hh404087.618ace08-7828-431a-b144-136ec1a5be30(en-us,PandP.10).png

Creating Site Mockups

Once everyone agreed on the wireframes, the designer began to create site mockups of the actual pages. As you would expect, there were several iterations before the final version. This section highlights a few things that we learned that led to changes in the design.

Note

You can conduct usability testing during the process of refining your design. During usability testing, users walk through the scenarios, using the interface, while you watch them. Let them do what they would normally do. Ask them to think out loud about what they are looking for, and what they expect to be available on any page. Be sure not to give them any clues or ask them leading questions. It's best if you can remain silent and just observe. After every walkthrough, refine the site based on the feedback.

You can see how the Mileage Stats UI and UX evolved in the following images. The first image illustrates an early version of the Fill Up page. It gave the developers a good sense of what the end product would look like. The next image shows the final screenshot of the same page.

Early mockup of Fill Up page

Hh404087.e08173bf-1743-4ea1-8317-3462d30528e1(en-us,PandP.10).png

Final screenshot of Fill Up page

Hh404087.a41e3a1f-501e-4f4f-b956-8d5ebf3b2ecf(en-us,PandP.10).png

We wanted consistency in navigating between the pages. We also wanted users to realize that on some pages they are viewing information specific to a particular vehicle and on other pages they are viewing aggregate information about all vehicles. The links in the top, right corner in the final version of Mileage Stats provide a unified, consistent, and understandable way to navigate between the Dashboard, Profile, Sign In/Out, and Charts pages. The Dashboard and Chart pages show information pertaining to multiple vehicles, so it made sense to include those links with the more general Sign In/Out and Profile links. Adding the Details, Fill ups, and Reminders buttons on the vehicle tiles made it clear that those pages were only relevant to the individual vehicle.

User registration brought up several interesting questions: Should a user have to register in order to use the site? Will users be discouraged from using the site if they have to register? We decided that anyone should be able to use the site but it would be best if users signed in so that they could track their metrics, and this would allow us to build up an interesting database over time. We wanted to strike the right balance between encouraging the user to complete their registration and not annoying the user. The screenshot below shows user registration in Mileage Stats.

User registration in Mileage Stats

Hh404087.5983ee3c-e77d-4309-958c-5d921ef96b88(en-us,PandP.10).png

Once the team was satisfied with the Mileage Stats mockups, the developers began to code the site's infrastructure. They created static pages and basic forms that implemented the user actions. In the meantime, the designer started work on the final UI and graphics.

Implementing the Design

A functional mockup can consist of a single HTML and CSS file, while the run-time rendering of the page is composed from multiple code fragments, files, and data sources that come from the client and/or server. This section explains some of the considerations for converting a mockup to HTML, organizing CSS styles, adopting new standards, and debugging.

Converting a Mockup to HTML

You can convert mockups to HTML by breaking down areas into component div block elements. Usually, the div blocks group together related elements, or they represent single text blocks, or single interactive elements. Once you decide how to lay out the divs, you can use different CSS styles to position and size them correctly. The following figure shows the boundaries of some of the elements that make up the vehicle tile and the classes applied to those elements. Not all elements are shown because it would have made the image too complicated, but this gives you the idea of how the tile is constructed.

Vehicle tile construction

Hh404087.614a668a-015c-41d9-b5c6-c1a71033a5bf(en-us,PandP.10).png

These tiles are meant to look exactly like the mockup, to the pixel, so absolute positioning is used. There are div groups for the header, navigation, and statistics in order to facilitate the animation that collapses the tiles. Depending on what vehicle a user selects, a tile can collapse into a more condensed version of itself, omitting some divs that represent information that is not relevant. For example, the currently selected vehicle is "Hot Rod" so the "Soccer Mom's Ride" vehicle tile is collapsed as shown below:

Collapsed and expanded vehicle tiles

Hh404087.ee227454-2148-4395-b532-4816c785c73b(en-us,PandP.10).png

For aesthetic reasons, there are extra layers of divs on the vehicle tile. For example, the semi-transparent outer border of the tile was created with CSS, so it required another nested div to hold the contents of the tile. In situations like this, it can be easier to use parent > child selectors and other relational selectors to style them rather than to create CSS classes for all the divs.

The following example shows portions of the template used when rendering the vehicle list.

<!-- Contained in _TemplateVehicleList.cshtml -->
<script id="mstats-vehicle-list-template" type="text/x-jquery-tmpl">
...
    <div class="wrapper">
        <div class="vehicle" data-vehicle-id="${VehicleId}"> 
            <div class="content">
                <div class="header">...</div>
                <div class="actions">...</div>
                <div class="statistics footer">...</div>
            </div>
        </div>
    </div>
</script>

The following CSS shows the rules applied to the vehicle and content classes. The CSS3 Color Module defines a color value that includes a parameter for the alpha channel. The form of this value is rgba(red, green, blue, alpha) where the red, green, and blue values are integers or percentages and the alpha value is between 0.0 (completely transparent) and 1.0 (completely opaque).

/* Contained in stylesheet.css */
.vehicle
{
    position: relative;
    width: 220px;
    
    overflow: hidden;
    padding: 9px;
    
    background-color: #bbb;
    background: rgba( 233, 233, 233, 0.6 );
    border: 1px solid #bababa;
    border: 1px solid rgba( 233, 233, 233, 0.8 );

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    
    -webkit-box-shadow: 0px 0px 12px rgba( 0, 0, 0, 0.4 ), 
                        inset 0px 0px 10px rgba( 233, 233, 233, 0.4 );
    -moz-box-shadow: 0px 0px 12px rgba( 0, 0, 0, 0.4 ), 
                     inset 0px 0px 10px rgba( 233, 233, 233, 0.4 );
    -o-box-shadow: 0px 0px 12px rgba( 0, 0, 0, 0.4 ), 
                   inset 0px 0px 10px rgba( 233, 233, 233, 0.4 );
    box-shadow: 0px 0px 12px rgba( 0, 0, 0, 0.4 ), 
                inset 0px 0px 10px rgba( 233, 233, 233, 0.4 );
    
    z-index: 0;
}

.vehicle .content
{
    width: 220px;    
    
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    
    -webkit-box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.5 );
    -moz-box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.5 );
    -o-box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.5 )
    box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.5 );
}

The above CSS code also illustrates other new CSS3 features such as box-shadow and border-radius.

Given some practice, the process of converting a mockup to HTML will become easier and more straightforward. It's a good idea to look at various websites and see how they construct their HTML and CSS structures. You can use the techniques in the "Debugging" section below to inspect other websites.

CSS Organization

You need to structure your CSS so that you know where things are and what you are changing. At the beginning, it is easiest to create a style for every element. When you start consolidating styles, it's a cost/benefit tradeoff. On the one hand, there is more to figure out. For example, you need to keep track of styles that you can override and styles that should cascade down. In the long run, if you group common styles together, it will be easier to maintain these centralized styles. It can be hard to know what common styles you need at the beginning of a project but easier to understand at the end. This is an exercise similar to refactoring code.

Good naming helps organization, and there aren't many restrictions to naming. In general, you should think about whether you know what CSS style is being applied to each element on the page and whether you can identify each element by looking at the HTML.

Here are some guidelines for assigning IDs to elements and naming CSS classes:

Apply IDs only to elements unique to the page. Classes should be used for repeating elements.
Use IDs and classes to apply style to elements using CSS. Do not use data- attributes to apply style to elements; data- attributes should only be used by developers.
Use logical names in the domain. For example, Mileage Stats uses vehicle and chart. This is in contrast to naming the CSS rule based on its location on the page, for example, column2.
Group logical elements together in the CSS file. For example, all navigation buttons should be together, and all elements in the header should be together. In Mileage Stats, there is only one place where there are tiles.
Elements should be styled consistently across pages. Forms should all be styled the same.

In the Mileage Stats stylesheet.css file there are common elements for lists and forms and page-specific styles for elements such as vehicle tiles and panels.

Vendor-Prefixed Attributes

The standards that govern web technologies are always evolving, and CSS is not immune to this evolution. In order to maintain progress, new proposals should be implemented and tested soon and often by browser makers and the web-building community. Traditionally, the use of cutting-edge standards means more work in the future when the standard is approved. Vendor-prefixed attributes provide a way for the browser makers to implement early specifications so designers can use them right away. Browsers use the last attribute they understand. By placing the final attribute after the vendor-prefixed attributes, browsers will use the most appropriate one given their level of standards support. The following example shows this technique being applied to the box-shadow attribute.

/* contained in stylesheet.css */
-webkit-box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.50 );
-moz-box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.50 );
-o-box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.50 );
box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.80 );

Debugging

You should understand how to debug styles using the browser tools for each of the common browsers. The Internet Explorer 9 F12 developer tools allow you to view the style stack of any DOM (document object model) element. It is very convenient to test style changes in the browser because you get instant feedback. Using the F12 tools you can also disable or enable specific styles for a selector, or add a style to an individual DOM element. This allows you to determine if the properties of one style override the properties of another. You can click on any of the styles and edit them in place. You can also check or uncheck the check box and it will enable or disable the value.

HTML styles shown in Internet Explorer 9 F12 developer tools

Hh404087.83451368-099e-41ef-b26e-40428ad60b72(en-us,PandP.10).png

Summary

A UX design that empowers users to quickly accomplish tasks via a UI that resonates with them does not happen without a great deal of effort. Rely on a web designer to help you create a beautiful, useful website. Consider the designer to be the voice of the customer. Together with the designer, establish a design process for iteratively creating your UX and UI artifacts before you begin implementing any features of the application. As you create your design, remember the design considerations outlined in this chapter. Your customers will appreciate your responsive and easily understood site.

Useful Design Tools

Microsoft Expression® Web
https://www.microsoft.com/expression/

Balsamiq:
http://balsamiq.com/

SketchFlow:
https://www.microsoft.com/expression/products/Sketchflow_Overview.aspx

PhotoShop:
http://www.photoshop.com/

Typekit:
http://typekit.com/

Kuler:
http://www.adobe.com/products/kuler/

Image compression tools:

OptiPNG:
http://optipng.sourceforge.net/
Pngcrush:
http://pmt.sourceforge.net/pngcrush/
jpegtran:
http://sylvana.net/jpegcrop/jpegtran/
CSS Compressor on CSSDrive.com:
http://www.cssdrive.com/index.php/main/csscompressor/
CSS Optimizer:
http://www.cssoptimiser.com/
Code Beautifer:
http://www.codebeautifier.com/
CSS Tidy:
http://csstidy.sourceforge.net/

Share via

Chapter 4: Design and Layout

Introduction

Design is a Worthwhile Investment

Web Project Designer Roles

Focus on the User

Design Prototyping

User Experience Design Considerations

Consistency

Responsiveness

Familiar Metaphors

Streamlining the Experience

Anticipate Usability Issues

Limit the Choices

User Interface Design Considerations

Color

Typography

Balance and Symmetry

Consistency

Simplicity

Other Design Considerations

Designing the Mileage Stats Reference Implementation

Identifying User Stories

Mileage Stats User Story

Using Flow Diagrams to Prototype the UX

Using Wireframes to Prototype the UI

Creating Site Mockups

Implementing the Design

Converting a Mockup to HTML

CSS Organization

Vendor-Prefixed Attributes

Debugging

Summary

Useful Design Tools

Further Reading

Additional resources