Web Application Development: User interface design and implementation

We present some ideas on user interface design and implementation in Web applications, in particular using Smarty and CSS.

References

• Robin Williams, The non-designer's design book, third edition, Peachpit Press and Amazon (2008‐9), Paperback and Kindle versions, and related texts.
• Ethan Marcotte, Responsive Web Design, A Book Apart (2011), and related texts.

User interface design principles

Here are some notes based on Marilyn Ford's old (PowerPoint) slides for 2505ICT User Interface Design. (I don't guarantee that my links are correct.)

Prototypes

• Start by designing a prototype for the application.
• A prototype consists of a storyboard and a set of wireframes for the application.
• A storyboard is the sequence of pages a user will view in performing some task. We represent storyboards by transition diagrams (restricted to page view nodes).
• A wireframe is an outline or mockup or layout or high level description of a single page view. A wireframe thus adds to our page view content by providing an abstract representation.
• Prototypes should be developed collaboratively and should be tested on users (usability testing) before subsequent implementation. Prototypes should be prepared on paper initially, even for usability testing.

See 2505ICT Lesson 5 - Prototypes - PowerPoint slides.

Layouts

• Different pages in the same application should share a common visual appearance wrt layout, colour, font, content and so on.
• Layouts for single pages should be based on grids (horizontal and vertical separators should line up).
• Layouts for single pages should be based on the PARC principles:
  • Proximity. Related elements should be grouped together on the page and physically separated from unrelated elements.
  • Alignment. Elements (even unrelated elements, even elements far apart on a page) should be horizontally or vertically aligned. This is another way of saying page designs should be based on grids.
  • Repetition. Repeat the same design elements within pages and across pages of your application. Don't use random variation. Be predictable.
  • Contrast. Use contrast, or variation, to emphasise differences on a single page or across pages of your application.
• These PARC principles apply to both textual elements and graphical elements on a page.

See 2505ICT Lesson 6 - Layouts - PowerPoint slides.

Colour and typography

• Colour and typography should be used carefully.
• Colour is an important design element that characterises your site.
• Colours used should conform to some systematic colour scheme.
• Colours used with text should be carefully chosen to be easily readable (a common failing in student submissions). Dark text on a very light background works best.
• Font sizes, styles and colours also characterise your site.
• Serif fonts (e.g., Times) are best for printed text, Sans serif fonts (e.g., Arial) are best for online text.
• Don't use many different fonts or different font styles.
• Use background images very sparingly.

See 2505ICT Lesson 7 - Colour and Typography - PowerPoint slides.

Usability testing

When performing usability testing, consider the following issues:

• What should be tested? Usability.
• What is usability?

  ISO 13407: "The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with which specified users can achieve specified goals in a particular environment with that interface."

• Who should be the subjects? Potential users.
• Who should conduct the test? Not necessarily the developer.
• How should you conduct the test? Neutrally.
• How should you report the results of the tests? Briefly, positively, logically.

See 2505ICT Lesson 8 - Usability testing - PowerPoint slides.

Web interface design practice

There is widespread agreement between popular Web site developers about page layout. See, e.g., amazon.com, apple.com, ebay.com, facebook.com, flickr.com, google.com, microsoft.com, nab.com.au, telstra.com, twitter.com, wikipedia.com, yahoo.com. They all have the following structure:

• A simple full-width header containing site and user identification on the left, and search and login and help links on the right, and sometimes a second row containing links to common operations.
• A left column (typically) containing links to common operations.
• A centre column (typically) containing the main text or body of the page.
• An optional right column containing additional site-dependent information.
• A full-width footer containing "fine print": information about the organisation, policies, site map, etc.

Look again at examples of popular Web sites to convince yourself of the ubiquity of this practice.

All developers should therefore follow this standard practice for page layout.

Common practice is different on small screens, particularly on smartphones. There, the practice is single column, one-line header, content, then navigation and footer.

Layouts may be fixed-width or fluid. Many popular Web sites use fixed-width layouts, some use fluid layouts, but I believe fluid layouts should be used whenever possible.

User interface implementation using Smarty

There are two possible approaches to providing a uniform appearance across different pages using Smarty.

Including common headers, footers and side-bars in different pages

Each page view in the application should be a template of the following form:

<!DOCTYPE html>
<html>
<head>
<title>Title of this particular page</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
...
</head>

<body>
{include file="header.tpl"}

{include file="navigation.tpl"}

<section class="content"}
Content of this particular page...
</section>

{include file="footer.tpl"}
</body>
</html>

This approach has the advantage that every template is a complete HTML document, with inclusions. It ensures that the common elements (header, sidebar and footer) are identical on every page.

It has the disadvantage that all templates contain some common content.

(The included templates, header.tpl, etc., should be in the same templates directory as the main templates.)

Template inheritance

All modern template systems allow one template to inherit content from a parent page in an object-oriented fashion. This allows us to put all common elements into a single page, and to provide child pages that only contain content specific to that particular page.

So, from Smarty 3, we can write a parent template, template.tpl, say, that contains the text of the common header, footer and navigational elements as follows:

<!DOCTYPE html>
<html>
<head>
<title>{block name=title}Generic title{/block}</title>
<link rel="stylesheet" type="text/css" href="style.css">
...
</head>

<body>
...Common header elements...

...Common navigational elements...

<section class="content">
{block name=body}{/block} {* Placeholder for content of different pages *}
</section>

...Common footer elements...
</body>
</html>

The parent template does not have to be called template.tpl; it can be called layout.tpl, root.tpl, or whatever (sensible name) you like.

Any particular page, say index.tpl will then extend the parent page as follows:

{extends file="template.tpl"}
{block name=title}Title of this particular page{/block}
{block name=body}
Content of this particular page...
{/block}

Each named block overrides the block with the same name (which must be present) in the parent page. Note that each particular page only contains content specific to that page.

PHP scripts should display the child pages, e.g., index.tpl, and never the common parent page.

Note that child pages may themselves be extended by their children and so on.

Stylesheets are used to specify how headers, navigational elements, content blocks, footers, and their contained elements are displayed.

User interface implementation

The two most challenging aspects of page layout using CSS are:

• Implementing multicolumn page layouts. This relies on the text positioning elements of CSS.
• Displaying the same content on different sizes of screens in a form that is appropriate for each size of screen. This relies on media queries in CSS.

Multicolumn layouts may be implemented using tables (semantically inappropriate and inefficient), frames (deprecated) and style sheets (recommended and standard practice).

Frames

Here is an example (zipped archive) of a two-column layout using nested framesets (from week 2). Note that the height (or width) of frames in a frameset may be specified in pixels (130px), in percentages (75%), or automatically (*).

Framesets have the advantage of being simple and efficient, but have the huge disadvantage that individual pages can not be bookmarked and that they are deprecated (if not obsolete).

Style sheets

Here is a simple example of the same two-column layout as above using CSS floating and positioning. In this case, you must study both the page source and the external CSS file to understand the example.

Here is a more complex example. Again, you need to study both the page source and the external CSS file.

For precise, grid-based layout it's important to be familiar with the CSS box model as summarised at w3schools.com. This model distinguishes between an element's content (specified by height and width attributes) and surrounding padding, border and margin spacing.

Another good introduction to the CSS box model and positioning is in this HTML and CSS guide.

Specification of two- and three-column layouts using style sheets requires a good understanding of CSS positioning.

This is described in Chapter 24 of Web Design in a Nutshell, 3rd edition by Neiderst Robbins and also at w3schools.com.

The best online description of CSS positioning that I know is CSS Positioning 101 by Noah Stokes on the excellent A List Apart Web site. It very carefully describes the difference between static, relative, absolute, fixed and inherit positioning.

Here is simple example from this article that illustrates a fixed footer and here is a more complex example.

Exercise. Write a page with a fixed left column and a scrolling right column. Hint. The left column should have fixed position and the right column should have relative position.

It's also important to understand CSS float. The best online description of this topic that I know is CSS FLoats 101 on A List Apart. Again, see also w3schools.com.

Other older, more complex, online descriptions of CSS layout are In Search of the Holy Grail and The Holy Grail Refactored.

Multicolumn layout approaches can be combined with the use of Smarty templates as described above.

Don't forget to review earlier material on CSS, including the use of classes (.alert) and ids (#content), the use of nested patterns (body .special li), etc.

Managing different media and screen sizes

With the growth of Web access from mobile phones and tablets (as well as laptops and desktops), this problem has become more important than ever. How can a developer design a site for such a range of screen sizes?

First, in CSS 2, one can specify alternative style sheets in a document head, and distinguish them by the media atttribute, with values all, handheld, print, projection, screen, and others.

<link rel="stylesheet" type="text/css" media="all" href="styles/basic.css">
<link rel="stylesheet" type="text/css" media="handheld" href="styles/handheld.css">
<link rel="stylesheet" type="text/css" media="screen" href="styles/screen.css">
<link rel="stylesheet" type="text/css" media="print" href="styles/print.css">

Only the stylesheet that matches the media of the client will be loaded.

Now, in CSS 3 (becoming widely implemented), media queries allow finer grained distinctions based on the physical characteristics (e.g., screen size) of the client.

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />
<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
  href="orkney.css" />

This allows us to use different stylesheets depending on the physical characteristics of the client.

Designing Web pages that are attractive and usable on devices with very different physical characteristics is very challenging, even if different stylesheets are used for different devices. The technique for achieving this is called (misleadingly?) responsive design. The article Responsive Web Design at A List Part introduces this topic.

Some of the main principles of responsive Web design are:

• Relative units in all layouts (%s and ems and exs, not cms or pxs).
• Resizable images!
• Media queries.

The book by Marcotte cited above gives a more detailed description.

When specifying layouts for small screens (e.g., mobile phones), the fundamental principle is Content first! I.e., content first, navigation second. This contrasts with the normal layout for large screens, which is to put navigational elements at the top or on the side.

Some developers find this task too difficult, and simply return different documents to the client depending on the properties of the client as expressed in the HTTP request. Hence, you may see URLs on your mobile phone, e.g., of the form m.ebay.com and m.facebook.com. This has the disadvantage of requiring the developer to maintain essentially two (or more) different Web sites (as opposed to two different style sheets).

Other implementation principles

Users are more important than developers. Therefore:

• The design should continue to work even if users change the window size and geometry.
• The design should continue to work even if users change the font sizes.
• The design should continue to work even if users turn JavaScript off.
• The design should continue to work even if users turn background images off.
• Etc.