Web design differs sharply from print design. Completed print designs are static. Websites are dynamic; we design them for change. Physical limits, starting with the size and number of pages, restrain print designs. Web content must scale dynamically to users’ chosen devices and must be expandable to grow with new content.
We design the user interface for a responsive website in order to display managed content optimally across screen sizes and user inputs. Such systems comprise parts that interact. Think of these elements as fluid modules that adapt to each other even as they adapt to changing contexts. Through all this, they must maintain a conceptual hierarchy, meaning, and consistent look and feel. Designs that succeed balance artfulness, usability and maintainability.
We must serve both content creators and administrators as we design the user experience in a new project. The goal is to ease the workflow for both types of users. Fortunately, these two objectives align. Repeatable patterns for content authors lead to consistency across the site and a better overall end-user experience.
We look ahead as we design a new web project. We consider not only the content contained at launch, but also future content. To accommodate varying amounts and types of dynamic content, page elements must have elastic dimensions. Font sizes must be flexible as users move from device to device. Our systems must handle many user inputs -- mouse, touch, voice, keyboard, etc. -- often more than one at a time.
This part of our process is a holdover from years past, when mock-ups moved from hand-drawn art to digital renderings, which are more realistic and created more quickly. At that time, web technologies were vastly different and responsive design was not a factor.
Static mock-ups, old-school as they are, still have merit. First, the web is a visual medium and mock-ups help clarify our vision and expectations. They also
While static design comps are a beneficial part of the design process, overly explicit renderings and expectations require customization for each page. If carried through to the finished site, content creators and editors would have to be skilled in writing code specific to each page or layout. Obviously, we don’t want that. The content management system should require no more than basic word processing skills of content creators and managers.
Likewise, design comps that mandate specific spacing and inflexible content arrangement to the level of the pixel look great with placeholder copy and FPO images. But they often fail to hold their design integrity when real content is entered. Initial designs created in Photoshop or Sketch often do not fully incorporate the requirements of the site’s end users and/or content editors. These unrealistic early designs result in lengthy building and revision cycles. Practical requirements have a way of changing everything. When those sites finally launch, they look very different from the initial comps.
Design patterns that prove challenging in an environment designed for dynamic and inconsistent content include:
Stakeholders should consider design comps as snapshots of how the project might look on a specific device, at a set screen-size, at a given point in time. They should not leap to the unreasonable expectation that the project will appear pixel-perfect to the comp across all environments and with changing content. Such an expectation will inhibit the overall success of the site as it evolves in a live environment. Robust and enduring sites are built to be flexible.
The fluid nature of the responsive web demands balance of all the variables of the end user’s environment. The design must adapt to provide the best experience across environments, even as it eases maintenance and content creation for non-developers. Web designs that meet these demands can certainly be beautiful, but the beauty must be more than skin-deep.