This is the first blog post in a series about Responsive Web Design (RWD) for the Enterprise. In this first post we will give a brief summary about the origins of the RWD pattern and its' core components. In the following posts, we will go into detail about each of the components that are used within the RWD pattern with examples of usage for an Enterprise web application.
RWD is an approach to building a functional experience on the web across a wide range of browsers and devices. In the past, web developers and designers worked to ensure the website they were building would behave consistently across a fixed set of browsers, which were mainly on desktop computers. This approach worked for the most part because the variety of different browsers and inherent differences amongst the screen dimensions of the devices the browsers ran on was relatively small. You would need to consider an odd small screen size or the opposite an overly large screen, but could generally target a certain width and satisfy your user base.
Since the release of the original iPhone and other similar smart phones, the proliferation of new browsers and device dimensions has grown at a steady pace. The expansion of different devices and browsers created a need to consider many more device sizes, browser inconsistencies and bandwidth constraints when developing for the web. Seeing the issue at hand and not having a good means of targeting all of these devices, Ethan Marcotte suggested a responsive design pattern on the blog A List Apart.
A responsive design consists of three core components: a fluid layout, media queries and responsive images. Both the fluid layout and media queries are the crucial core components as the two work together to build a responsive layout and site structure. While responsive images are not necessarily as important, they provide your user with a better overall browsing experience, especially when viewing your site on a device with smaller or larger than usual screen dimensions such as a mobile phone or on the new high resolution retina displays. We will dive deeper into how each of these three core components interact with each other to deliver a responsive website over the course of this series.
The most important thing to keep in mind throughout this series is that responsive design is a pattern and not a solution. Maintaining separate desktop and mobile sites could be a better approach as a responsive site may not provide you or your users any additional advantages or benefits. Your content should ultimately drive your decision whether to make your site responsive or to build dedicated mobile and desktop sites.
In the next post, we will begin our discussion of the core components of Responsive Web Design in earnest and show how these components can be leveraged for Enterprise web applications. The first component we will be discussing is the usage of fluid layouts. We hope to see you next time in Responsive Web Design for the Enterprise Part 2: Fluid Layouts.