The what and why of web design

Desktops, laptops, tablets, televisions, mobile phones, phablets and now even watches. There are more internet enabled devices in the market today, than ever before. And a gag these days is:

So you want to be a web designer? This is what you will be dealing with:

The viewport landscape
Image Source: Gareth Williams

From 300 pixels to a whopping 2000 pixels — that’s the range over which web content can be viewed today. Making sure all users get an optimum experience on their devices is by far the biggest challenge designers and developers face. And if there is one buzzword that has been floating around to combat this challenge, it is ‘Responsive Web Design’.

A single site that magically adjusts to whatever device screen is used to hit it.

Responsive frameworks. Media Queries. JavaScript Hacks.

Ever since Ethan Marcotte first coined the term Responsive Web Design in his now very famous article, a plethora of tools have sprung up, to make the process of creating a responsive website less painful.

But do we really understand what is responsive design, and why we are talking about it? All too often web designers & developers have tended to look at a responsive website as a chore, or worse — an afterthought. Define a few break-points and apply a few readily available tools to make sure everything looks okay.

The fundamental purpose of a website has always been about communication and interaction. But somewhere along the way, reusable code has killed the craft of true designers. This is not to say that reusable code is bad. What matters is that content is accessible, and interfaces are usable. That is what web design has always been about.

In his article A Dao of Web Design*, John Allsopp wrote:

Make pages which are accessible, regardless of the browser, platform or screen that your reader chooses or must use to access your pages. This means pages which are legible regardless of screen resolution or size, or number of colors (and remember too that pages may be printed, or read aloud by reading software, or read using braille browsers). This means pages which adapt to the needs of a reader, whose eyesight is less than perfect, and who wishes to read pages with a very large font size.

To call ourselves designers, it is imperative to internalize the why, and what of web design, before diving into the how aspect of it. To address this within our organisation, we organised a workshop with a live case study on the meaning of ‘Responsive Web Design’.

It was an interesting session, with lots of insights being shared. And we like to share our discussion with you. So here’s the accompanying presentation for our workshop. We hope you find as much value in it, as we did.


* A Dao of Web Design is a must read for all web designers. If web design was a religion, this article would probably qualify as a scripture.

A quick summary from Navteq Developer’s Day

Back from attending the Navteq Developer’s Day with my colleagues Pranav and Ashish, this post summarises some of the points that stood out for me during the entire event.

Location-based Advertising

First things first –

  1. The grub was amazing.
  2. I won a USB stick during the developer’s special part of the event, while (ahem) my “techie” colleagues looked on. And you don’t want to know for which question but it was a very proud moment for me. I would like to thank my mother, my father…

Alright I will come back to the real deal. So Navteq is an organisation which supports application developers in building ‘Location-based Applications’ by supplying Maps data and also helps them in bringing their apps to market. They are currently expanding their reach with Indian Map data and thus the event. During the course of the day, they touched upon the type of services that they provide of which what stood out for me was:

  1. They will be providing Destination Maps – which will cover Map information beyond the final Destination. Destination Maps can actually provide information for how a market place or mall is laid out and which shop is on which floor. This definitely opens up opportunities for a number of interesting app ideas.
  2. 3D Map views.
  3. By the end of 2011, they may also be providing traffic information.

I can already think of a few Augmented Reality app ideas just by combining the last two points.

The most interesting part came during the later part of the day when a panel of industry experts discussed the trends and future for location based applications. Some very interesting trends and ideas were discussed during this session like-

  1. Applications should be able to learn from a user’s habits and provide him location-based services accordingly.
  2. In the future there may be an app that is able to study a person’s appoinment calendar and map it to the traffic conditions to alert the user in case he needs to reschedule or plan an alternate route.
  3. In the Indian context, the routes and timings for DTC buses are already being mapped to be able to provide real-time information to commuters. A gentleman in the panel raised an interesting point that real-time information for the Indian Railways would also be helpful for commuters and which doesn’t exist presently.
  4. One of the questions raised during the discussion was, which are the existing services which could be enhanced with the use of LBS.
  5. Location as well as context/POI based advertising was touted to be a big thing in the future.
  6. Enterprise level Location Based Services is an area which probably needs attention and could have a lot of potential. Anyone else thinking logistics here?

All in all, it was an informative event. As a side note, what stood out for me the most was the ease and humor with which Steven Citron-Pousty (the presentor from DeCarta during the developer’s hour and the giver of the free USBs) presented. He kept the audience engaged the entire time, even non-techies like me. Oh and the grub of course ;-).

Enhanced by Zemanta

Balance and symmetry

This workshop is one of a six-part series of Basic Design workshops,

Balance and Symmetry are essential components of design that can often be overlooked.  When designing a logo, webpage or product it is important to keep these concepts in mind. Ideafarms recently held a workshop for its employees that explained the concepts of balance and symmetry down to their simplest level. The goal of the workshop was to have the team leave with a better understanding of the concepts and an orientation to applying them to daily work.

Participants voted on which composition best portrayed balance and which depicted symmetry.The participants then entered into a lengthy discussion on how and why the pieces were successful.

 

After a round of discussions, examples were presented to the group on how Balance and Symmetry work at their best and how they can be used to make attractive compositions.
Enhanced by Zemanta

The Marshmallow Challenge

20 spaghetti sticks, 1 yard of tape, 1 yard of string, 1 marshmallow and 4 teams with diverse areas of expertise competing to build the tallest free standing structure in 18 minutes with an entire marshmallow on top. Sounds simple?? We had thought so too.

The marshmallow challenge was first introduced by Peter Skillman, but we came to know about it from Tom Wujec.

It may sound easy but we were surprised by the complexity we experienced in those 18 minutes – Planning, designing and building, deciding the approach, making up our minds and then changing it when peeked at another team’s strategy.

The moment of truth was when the marshmallow was placed on top of the structure that each team had created and the teams were asked to let go of their structures and let it stand free. Not too many spaghetti towers stayed standing beyond a few second.

One’s approach to the marshmallow challenge can easily be compared to how they would go about approaching any task. This activity was a fun way for the team to learn the importance of creative thinking, planning and teamwork.

 

Every project is a metaphorical marshmallow which looks soft, weightless; harmless and mostly goes invisible until its actual weight makes the whole project crumble. This exercise brought back to us some fundamentals of project planning and design – Plan before you proceed, keep material properties and constraints in mind and improvise as you go along.

Enhanced by Zemanta