Responsive Web Design

Responsive Web design is a combination of fluid grids and images with media queries to change layout based on the size of a device viewport. It uses feature detection (mostly on the client) to determine available device capabilities and adapt accordingly. With responsive Web design one code-base, deployment, and URL provides you with access to many devices including future ones you haven’t encountered yet. But optimizing images, video, third party widgets and more using client-only solutions can be challenging.

Luke Wroblewski

Responsive Web Design

At its core, Responsive Web Design is about serving the same HTML to every device and adapting its presentation (mostly through CSS) based on the specific capabilities of the device being used to access it.

Luke Wroblewski: Why Separate Mobile & Desktop Web Pages?

Links

Use links meaningfully:

• Deliver users to their desired objective.
• Give them links that communicate scent in a meaningful way (e.g. with meaningful trigger words)
• Make the real estate reflect the user’s desires.

‘A more accurate name for the search box would be B.Y.O.L.: Bring Your Own Link. What do people type into this box: trigger words! … The key thing to understand is that people don’t want to search. There’s a myth that some people prefer to search. It’s the design of the site that forces them to search. The failure rate for search is 70%.’

Essence of a talk given by Jared Spool on ‘An event apart’, Boston MA, 2011
From Jeremy Keith’s notes

BBC News site redesign

Mother BBC has launched its redesigned News site a few days ago. I want to actually use the site on a day-to-day basis before I express my user opinion. So no comment yet.

I’m however interested in ‘The-making-of’. Paul Sissons, the creative director of this project, explains. His view on the site’s redesign appears rather presumptuous to me. It sounds a biit like ‘You may not realise or not even appreciate it, but rest assured: we spent your money doing the right thing’. And indeed, there are some interesting design considerations, like the new homepage template that allows controlling the ‘volume’ of a topic or story. In other instances, the BBC appears to adapt standards that other news sites already have put into practice a while ago, such as horizontal top navigation, bold typo, and vertical depth (prime example for this site style is the Swedish newspaper Dagens Nyheter).

Some nuggets:

‘The gradients and textures of “Web 2.0″ are gone, and everything is pared down to the minimum required for delivering news.’

‘With an incentive, users will scroll. If that proves a positive interaction, it’s something that could become habitual. So rather than design our indexes and front page with everything at the top of the page, we are encouraging scrolling by putting richer content within stories and towards the bottom.’

‘With Top Stories prominently visible to every user, we allow for more sideways navigation. People won’t have to click back and forth from Front Page to story in order to read the stories of the day.’

Kurt Schwitters: Gesetze der Bildform

Visiting the exhibition Van Doesburg and the International Avant-Garde at the Tate Modern, I was struck to see something like a website wireframe in a small book from 1930, ‘Gesetze der Bildform’, by the modernist artist Kurt Schwitters.

Kurt Schwitters: Gesetze der Bildform, 1930

On these two pages he compares / contrasts orientation with advertising.

Orientation / Advertising … (Orientierung / Werbung)

1. Static / Dynamic … (Ruhend / Bewegt )
2. No center, balanced, hence stable / Distinct center, hence radiating … (Ohne Mitte, daher ausgeglichen / Betonte Mitte, daher austrahlend)
3. Passiv / Aktive … (Passiv / aktiv)
4. Objektiv / Subjective … (Objektiv / Subjectiv)
5. Vertical, horizontal, rectangular forms / Parallel, any shape … (Senkrecht, waagerecht, Vierecke / Parallel oder schraeg, jede beliebige Form)
6. Parts of the same type; the negative of each part is essentially the same as its positive / Parts of different types. Negative and positive are essentially different, like conkave and convex … (Teile gleichartig; das Negativ jedes Teiles ist im Wesen gleich seinem positiv / Teile verschiedenartig; Negativ und Positiv sind wesentlich verschieden, wie konkav und konvex)
7. hence – providing orientation / hence – advertising, aggressive … (also – orientierend / also – werbend, aggressiv)

Rule of Thirds

The rule of thirds (aka Golden Ratio, going back to what is known in mathematics and architecture as Phi) is a common guideline in photography. It states that if you divide a panel (screen) into thirds, horizontollay and vertically, thereby creating nine equal parts, the viewer’s attention will fall on objects placed near the line’s four points of intersection.

Anthony T. Holdener (2008) Ajax: The Definitive Guide, Sebastopol: O’Really

User centred design: consistent, predictable, controllable

1. Consistent designs use orderly layouts that align labels and group related items. They include appropriate color-coding to show relationships among components, provide warnings where needed, and highlight special cases. Consistent designs stick with meaningful terminology and present understandable sequences of InstructIons. Consistency is often invisible, because keeping the corporate logo in the upper left-hand corner or using the same color scheme seems natural. Only when the logo jumps to the right or the colors change do you notice.
2. Predictable designs enable you to gain familiarity and confidence in using your computers because you have a clear model of what will happen after each selection. You expect, after putting a book in an electronic shopping cart, that you can remove it or return to it a week later. Predictable designs apply meaningful metaphors, such as a shopping basket or e-mail in-box, and familiar conventions, such as the use of Save, Print, Open, and Close.
3. Controllable interfaces give you the power to do what you want. You can combine a photo with text to make a wedding invitation or copy part of a spreadsheet into an e-mail document. When you change your mind, you can revert to a previous version of your invitation or reformat the spreadsheet to provide input for a simulation program. Controllable interfaces are adaptable by users so that they can customize their screens and avoid unneeded features.”

From: Shneiderman, B. (2002), Leonardo’s Laptop: Human Needs and the New Computing Technologies, Cambridge, MA: MIT Press, p. 64-5

Web: Structuralists v Designers

“This was the great, almost religious difference between the Structuralists and the designers. The Structuralists were separatists, believing that form and content could and should be separated. For them, a Web site is a pipe through which content flows to the user. They opposed elaborate visual design, which they thought impeded the flow of information. The Designers, on the other hand, were unitarians, who believed that form and content could not be separated: that a Web page communicates its message through the careful interplay of words and images. For the Designers, a Web page is an experience, and they wanted complete control over it, just as they had enjoyed (more or less) complete control in print. So the Designers kept pressing for more html tags that would give them that control.”

From: Bolter, Jay David and Gromala, Diane (2003), Windows and Mirrors: Interaction Design, Digital Art, and the Myth of Transparency, Cambridge, MA: MIT Press, p.4

From: Bolter, Jay David and Gromala, Diane (2003), Windows and Mirrors: Interaction Design, Digital Art, and the Myth of Transparency, Cambridge, MA: MIT Press

Page hierarchy

“We use visual relationships to add more or less visual weight to
our elements. Visual weight can be loosely defined as the degree
to which an element demands our attention and keeps our
interest.” (aka visual hierarchy)

Content

1. page title
2. subsection title
3. embedded link
4. supplementary info

Navigation

1. Location indicator
2. top level menu options
3. subnavigation options
4. trace route (breadcrumbs)

Supportive

1. Site identifier
2. site-wide utilities
3. footer information (poracy, security, content and
   copyright info)

From: Wroblewski, Luke (2002), Site-Seeing: A Visual Approach to Web-Usability, New York: Hungry Minds, p.160

Gestaltpsychology

Gestaltpsychology is a range of design principles about how elements group together. The principles go back to the seminal work by Max Wertheimer “Untersuchungen zur Lehre von der Gestalt” in Psychologische Forschung, 1923, vol.4, and are based on the law of ‘Prägnanz’ (pithiness), which proposes that a set of ambiguous elements (elements that can be interpreted in different ways), will most probably be interpreted in the simplest way.
1. Proximity: Elements that are closer together are perceived to be more related than elements that are farther apart.
2. Similarity: Elements that are similar are perceived to be more related than elements that are dissimilar
3. Enclosure: Elements that are enclosed by anything (line, colour or alike) are perceived as belonging together
4. Continuity: The mind contines visual, auditory, and kinetic patterns.
5. Closure: A tendency to perceive a set of individual elements as a single, recognizible pattern
6. Figure-ground: Elements are perceived as either figures (objects of focus) or ground (the rest of the perceptual field).
7. Connection: Elements that are connected (e.g. by a line) are perceived as a group.