Responsive Design and Framework Architecture

Responsive web design is the method of designing a website interface that responds or adapts to different screen sizes. A successful web application needs to be responsive for optimal viewing on any device.

There are variances across mobile devices in terms of screen size. Therefore, you should be considerate of how an application transforms across screens. Application flows may need to be different depending on how application components are rendered and how users tend to use the application in that context.

What is Responsive Design?

Responsive design was created to improve the user experience of today’s multitude of devices.

With a responsive design, your website content will adapt based on the screen size or viewport it is viewed on.

If you pulled up a website on your phone and got the desktop version, chances are you are going to have a tough time navigating the website to find the information you want and you are going to leave or “bounce” to another site that offers a better mobile website experience.

Responsive Web Design vs Adaptive Web Design

It is important to not confuse responsive website design with adaptive web design. There is a difference between having a mobile version of your site and having a truly responsive experience for mobile users. The adaptive design model offers mobile friendliness, but not responsiveness.

A few key differences set responsive web design apart from adaptive web design, thus making it the superior choice for web design.

When using adaptive web design, if someone accesses your website, the browser detects the max-width of the device and applies the appropriate layout. The problem with this approach is that the design requires multiple static layouts. Typically, these layouts are created for six different screen widths. When a user goes to your website, they are served a different version depending on the type of device they use. As you can imagine, this scenario gets quite time-consuming for even the smallest changes. One must make the change on each version.

Responsive web design has a fluid design that adjusts according to the screen size, eliminating the need to update each version of the screen individually. It does this using:

• Media Queries: a critical part of responsive web design, these Cascading Style Sheets (CSS) techniquest that allow web developers to apply different styles or layouts to web pages based on various device characteristics, such as screen width, height, orientation, and more.
• Flexible Grids: are a type of layout system in web design and development that allows web designers and developers to create responsive and adaptive web page layouts.
• Responsive Imagery: is a web design and development technique involving optimizing and delivering images on websites in a way that adapts to the user’s device and screen size. The goal is to ensure that images look good, load quickly, and do not negatively impact the experience on a variety of devices.
• Scalable Vector Graphics: otherwise known as SVG is an XML-based vector image format used in web design and development. SVG images are unique because they are resolution independent and can be scaled or resized without loss of quality, making them ideal for a wide range of applications.

Together these elements respond to different screen dimensions no matter if the viewer is using a desktop browser or mobile device.

Responsive website designs are easier to update and maintain because you update the site once and it adjusts for all screen sizes.

There is no separation between the mobile site and the desktop website. The only difference between the smaller and larger versions of your site is found in the CSS.

Cascading Style Sheet (CSS) and Responsive Frameworks

CSS is a fundamental technology used in web design and development to control the presentation and layout of web pages. It provides a set of rules and properties that define how HTML elements should be displayed, specifying aspects such as fonts, colors, spacing, positioning, and responsiveness.

It operates on a cascading principle, where multiple style rules can be applied to an element, with specificity and order determining which styles take precedence.

Web designers use CSS to separate the content (HTML) of a webpage from its visual styling. This enables consistent and visually appealing designs across various devices and screen sizes.

There are several types of CSS responsive frameworks available in the web ecosystem. The following are three of the most popular examples.

Bootstrap – Known for its extensive documentation, rich component library, and ease of use. The grid system allows developers to create responsive layouts quickly. Designers can create a responsive website without having to write a single line of CSS.

Foundation – Offers a robust collection of responsive components that make it easy for designers to create layouts that can easily transform and adapt to whatever screen. Customizability is a core feature and allows for unique designs to flourish.

Materialize – An offering from Google that seeks to modernize the responsive design ecosystem. Built upon Google’s Material Design principles, which focus on creating a consistent user experience across all devices with a wide range of components to choose from.

One aspect of a responsive framework is that they offer prebuilt components, templates, and even image assets like icons. These elements (and how they are implemented under the hood) are what set each framework apart from one another.

Many of these plug-and-play components are straight forward and allow for the creation of prototype applications to get a glimpse at a framework’s user experience.

Several frameworks also provide documentation and demo pages to show off each individual component without having to create a prototype. Even further, some frameworks maintain a marketplace to download and install extra components for a fee.

Considerations for Responsive Framework

Any of the above frameworks will provide a solid base to create responsive designs. However, you should also consider the following factors when choosing a framework:

Extensibility: Depending on the extensibility that a design requires, one framework may be a better choice over another to customize provided components. If there is a lot of customization required, choose a framework that has better options for customization.

Dependencies: The more dependencies used, the larger the final compiled applications may be which could increase initial load times for users. Bootstrap for example had a dependency on jQuery in the past which may or may not have turned off developers who wanted to keep their application jQuery-free. How many dependencies should be considered too.

Development Flow & Implementation: Lastly, some frameworks look to be more customizable and thus more complex to develop while others look to provide an all-in-one solution where components are not as customizable but are easier to plug-and-play with.

Even with these considerations, a responsive framework is not a shortcut to good development practices and architecture. A successful application architecture still hinges on the designer/architect. However, these resources do make it easier to implement a responsive design.