Responsive Design Core Concepts

The core concept behind "responsive web design" is to implement a single website that looks great on every device. If your visitor is using a mobile phone, tablet, laptop or desktop computer, a well done responsive design will function and provide a positive user experience. Mobile devices are used more than traditional computers for web browsing, as smartphone and tablet use overtook desktop for the first time in October of 2016. The challenge is that mobile devices have a much smaller screen than a laptop or desktop computer. Many outdated sites have no concept of screens this small resulting in a mobile user pinching, zooming and scrolling. This is a terrible user experience and given the number of sites that are mobile friendly, the visitor is likely to move on.

Responsive design fixes this problem!

The diagram above is a simplistic view of each device. A traditional smart phone, a large screen smart phone, a tablet and a laptop/desktop. Within each device there are even more resolution differences. With the magic of stylesheets (css) and mobile css frameworks like Bootstrap, we're able to account for each of these major screen sizes while providing a positive user experience with just one code base! This is a huge victory for any business because maintaining multiple websites for each device would be very costly and very frustrating.

Breakpoints

As shown above, there are really three categories of devices we want to support for a friendly experience on a mobile device, tablet or traditional computer. The stylesheet or css is the secret sauce. Using what are known as media queries, the web browser is able to determine the capabilities of the device, especially screen resolution. If you're reading this from a traditional computer, resize your browser now and notice how our mobile friendly website responds as the screen gets larger or smaller.

Scaling Media

A number of the responsive frameworks handle scaling images and videos for you by applying responsive tags around the media. Without a responsive framework, this can still be accomplished with relative ease with css.

img { width: 100%; height: auto; }

Applying this simple style to your image tag will scale the image to look good on each device. If you're on a desktop or laptop, resize your web browser and notice the image above is resizing. Our designers have used the popular Boostrap framework and applied the img-responsive class.

You may want to tackle this yourself, but if you decide to go with the experts and tap into our experience, we're here to help. We've been helping Atlanta companies of all sizes convert their websites to responsive, mobile friendly websites since 2012. Please give us a call or contact us for a free consultation.