...a design that can adapt to the constraints of the browser window or device that renders it…
In the beginning, web design just followed traditional print design formatting, where the viewer’s eye was drawn into a page, through vital information and lead to the Call-to-Action, usually contact info of some sort. But as we’ve discovered through the years, the web can do so much more to stimulate the audience’s need for visually rich, interactive and kinetic experiences.
With the advent of usability testing, mobile devices and innovative ideas, Responsive Web design has emerged. It is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.
The term “Responsive Design” was initially coined by Ethan Marcotte, a writer and web designer who is “passionate about web standards, gorgeous design and how they intersect”. Check out his blog to learn more about his ideas and the Responsive Design process.
Why should we be considering this change in our web design practices?
Fragmenting our content across different “device-optimized” experiences, with disconnected designs, each tailored to a particular device or browser is extremely inefficient. We should instead treat them as facets of the same experience. This really is just an extension of the old print design ideals of consistency across media within an integrated campaign. We just treat each device as a separate media element. The beauty with technology is that we can efficiently flow most of the same material into each different design as it is displayed; no need to replicate files.
What are some basics that a web designer needs to consider when creating a Responsive Design?
Since the nuts and bolts of Responsive Web Design are done by the CSS programmers, there is a lot of room for creativity. All the designer needs to do is understand the power of CSS and how it is used. The more you know, the more creative you can be. Examples: Responsive Design Samples
The best way to effectively translate these designs is to have a grid system in place. This grid will allow the developer to understand the relationship of the page elements to each other and how they are affected when the size and shape of the media changes. The needs of the content as well as the page dimensions should drive the grid. This grid will also map out the controlling elements such as alignment, spacing, margins and padding. Examples: The Grid System, Grid-based Web Design
Nothing should be static in Responsive Design. Flexibility is key.
Usually when going from one device to another, elements are going to reduce and enlarge proportionally within the minimum and maximum sizes set to prevent most media specific issues. Unfortunately, some typefaces, images, logos and charts don’t proportionately reduce well and may not work well for a particular device, so there needs to be alternative solutions in not only sizing, but in font face, cropping, alignment, and copy reflow. In the case of complex graphics and charts, there may even be a need for device specific images and alternative ways to display the information. Examples: Responsive Design Techniques
Within the general flexibility of Responsive Design, the relative output of each media option must be considered. Screen size, resolution, aspect ratio and format are all very important elements in a design. All desktop monitors are horizontal and many are now using a cinema display aspect ratio. Most modern mobile devices are both horizontal and vertical with a wide variety of resolutions. These must all be considered, so that no matter which of the hundreds of devices the site is viewed on, the design will flex to fit. One of the CSS customization tools used to achieve this is called a “Media Query.” This is a function of the device’s browser where it only uses the code for its specific device and ignores the rest. Some common queries are: Orientation, Aspect ratio, Color and color index, Resolution, Scan (if TV) and Grid. CSS Media Query types Mobile Resolutions & Screen Sizes
Responsive Design is a common-sense approach to web design, utilizing the core principles of design by maintaining visual and content consistency. A good responsive design should prevent the wasted hours of constantly recreating iterations of the same information for whatever new technology emerges. It should allow any web design to seamlessly flow into a new environment with minimal guidance and effort, while still maintaining its creativity, interactivity and purpose.
To this end, we are working towards incorporating responsive design into certain aspects of our site.