What Is a Responsive Web Design: Understanding the Basics

What Is a Responsive Web Design: Understanding the Basics

Today, as users, we’re constantly on-the-go. The majority of website visits start on mobile devices, and according to eMarketer, Mcommerce sales for US retail will be increasing with each coming year. As a result, optimizing website accessibility and user experience on tablets, smartphones, and every device imaginable is becoming increasingly important in order for all businesses to stay relevant. To accommodate users, websites that are designed responsively are typically the best option available.

Responsive design is an approach to web development by which a website is planned, designed, and developed to appear optimally in a range of devices. The phrase “appear optimally” refers to a page being readable, easy-to-navigate, and usable with minimal panning and scrolling. Responsive Design is not just a method or technique – it is a fundamental ideology about how a site is designed and built.

What Is A Responsive Web Design?

Responsive design is a front-end development process intended for molding website design and user experience to the user’s device, whether desktop, tablet, or mobile.

In responsive, a cascading style sheet (CSS)—essentially what defines the format and layout of a web page, is leveraged to permit a website to scale to the width of a browser, independent of device type. Javascript and js libraries such as JQuery and Modernizr are also used to accompany this behavior for resizing more dynamic objects like masonry galleries as well as converting mouse activities to touch activities.

Unlike adaptive design or mobile detection, responsive design does not leverage device detection, so rather than querying the device with backend logic, CSS media queries are used to determine things like the width and orientation of the device screen—your browser.

Basics of Responsive Design

Two basic principles exist in responsive design, the use of breakpoints and fluid scaling:

Breakpoints

CSS3 media queries create conditional boundaries at which the width of a specific device type’s browser will then trigger alternate styles. Here at Wishtree, we generally use maximum-width breakpoint, to create a desktop-first (scale down) build versus a minimum-width boundary, for a mobile-first (scale up) build. Queries can also be used to determine height and even device orientation.

Breakpoint sizes (we’ll use widths from here on out) can be set in px or em. The differentiation in modern browsers is negligible, though, compared to a few years back. Breakpoints can be set at any size but they tend to align with the most common dimensions of each Desktop, Tablet Portrait, Mobile Landscape, and Mobile Portrait. Generally speaking, these tend to be 1200/960px, 768px, 480px, and 320px, wide respectively, though industry standards are constantly changing as new devices are released.

Over the years, these types of devices have begun to blend into one another, especially with the introduction of retina displays. As a result, you might find two devices can match the same breakpoint (ie. tablet landscape and laptop) but might also find that a particular device has a unique size, so that’s where the next principle comes into play.

Fluidity

Fluid scaling can be achieved in a few different ways, but it will always involve percentage or em values to permit a container to scale within the bounds of its parent elements, and ultimately the browser. Fluid scaling is necessary to achieve responsiveness between breakpoints, to maximize your real estate, as well as to maintain the flow of columns in a responsive grid.

A simple example of a fluidly scaling object would be an HTML page consisting of one block with width of 100% and a height of “auto”. As the browser changes width, the block scales with it, proportionally. Where you choose to apply this scaling at the granular level is up to you but fluidity should always exist at the top level of any responsive container.

Another popular example of fluidity is a grid layout. In a grid layout, virtual blocks are aligned and evenly distributed over the width of the body of a site or container. These blocks are fixed in width, aligned as inline-blocks, with a parent container which is fluidly scaling. By doing tis, when the browser (and ultimately, the container) reaches the point at which the sum of all blocks exceeds its parent container, the blocks break to the next line. These blocks are referred to as columns and each block could also represent a number of columns.

For instance, if you have 3 blocks, they could represent 9 columns, at 3 columns each. Once you’ve scaled down to a width that fits 2 blocks, at 3 columns each, with the 3rd on the next row, you’re now looking at an 8 column layout, with 2 columns of margin. Scale down further to close out the margin and you’re looking at a 6 column layout with no margin.

Design

Grid layouts may also be used across an entire website, including sidebars and body content. As a result, many websites are designed on grids, flowing from left to right, top to bottom (just like germanic and latin-based written languages).

In order to present the optimally responsive layout for a grid, we start by selecting the known device widths from our knowledge of breakpoints. Using these figures, we calculate the nearest figure of the site width and number of columns, which divide into the greatest number of whole factors. We must do this without compromising the content’s real estate much (so don’t go overboard). One of the most popular systems is the 960grid system, which is often used in 12 columns. Two side-by-side blocks taking up the full width of a page is therefore each 6 and 6 columns respectively, in a 12 column grid.

When designing and developing for responsive, we place emphasis on retaining the structure and order of elements from desktop through mobile. This permits fluid scaling while also reducing unnecessary load of duplicate elements that are hidden or shown at specific breakpoints.

Responsive Design at Wishtree Infosolutions

At Wishtree Infosolutions, our 2015 standards for responsive design include options for a standard 960 grid, requiring designs for desktop and mobile, as well as a widescreen 1200px or 1280px grid requiring designs for widescreen, tablet or 960, and mobile. All interim stages are either snapped via breakpoints, to the next breakpoint size, or fluidly scaling – the complexity of the design and scope of the project will dictate that decision.

Our talented development team includes full stack developers as well as frontend specialists, all of whom are trained in responsive practices and are evaluated on a quarterly basis. We perform quality checks of all the major browsers and aforementioned breakpoint widths both manually and using a proprietary screenshotting service built off of PhantomJs, as well as with manual device testing with our in-house QA engineers.

Optimizing User-Experience

Regardless of your industry or the products and services your company offers, user-experience on your website should be of the utmost importance. With responsive design, your audience will always be able to engage seamlessly with your site on each of their devices, at any given time. Mobile and tablet use is becoming more and more prevalent, and to succeed with your online presence, your website should be optimized for those devices and their users.