Responsive Design

The world exists in many dimensions…

It is important to remember this: be accessible. Now that the internet has permeated every corner of our lives, potential viewers and customers have a lot of data to sift through. Creating a website is exciting and can lead to tremendous profits but a website is only profitable when it is accessible. Optimization and responsiveness across multiple device sizes and data plans are critical, especially in a time when media is so pervasive and service providers are needlessly expensive. Creating a website with a responsive design that is optimized for a society in motion is the most important step in increasing the conversion rate of your website. One mistake that is still seen on countless websites is a lack of responsive design and optimized file structure.

What is responsive design?

A website that is built responsively is created with mobile platforms as its focus. Frameworks like Skeleton or Bootstrap aid designers when they are designing a ‘mobile first’ theme. Ideally, a responsive theme will adjust content to fit smaller devices and remain readable within the device viewport. Additionally, buttons on mobile devices should be easy to tap on and font should be legible without the need for pinch zooming.

A mobile first design can mean the difference between ten conversions a month and a thousand. The average consumer of media is agitated by ‘slowness’. A slow website is a dead website.

While rebuilding their website, Financial Times noted that, “The [slow] speed of the site negatively impacts a user’s session depth, no matter how small the delay.”

There is a direct correlation between load speed of a web page and bounce rate of that web page. In plain English, if your site loads quickly then the visitors tend to stay longer and are more willing to delve further into your content.

Similarly, a website that is hard to use will often be skipped for a website that loads easily and fits the viewport correctly. Not only should a website load well on a mobile device but it should also scale well.

Consider a device that can change its orientation. A responsive website will adjust properly and create a smooth user experience. In order to ensure a great user experience, your website layout should be able to load and present its content on a variety of screen sizes.

What is optimization?

In order for a website to load, your browser has to complete four steps. These steps are request, response, build and render.

First, when a link is clicked or a URL is typed into the address bar your browser sends an HTTP request to a server and asks ‘do you have any content?’ The server then responds by sending a text file to the browser. The file is often an HTML document but can be another file type, it doesn’t really matter. All that matters is that a text file is returned from the server and a response is triggered at this point.

The response is just the browser signaling to the server that it indeed received the text file that it requested. But before a web page can render it must download all of the other resources. Web pages are full of resources such as CSS, Javascript, and images.

In order for the browser to know that it is done loading resources, it must parse, or read, the text file. Any of these resources that are referenced in the text file will be downloaded.

Now that the browser has downloaded the text file and all of the resources it must begin building the page. To build a page the browser must build the DOM, CSSOM, and Render Tree. Essentially, the “Document Object Map” creates a relational map of the HTML elements, the “CSS Object Map” maps out how the elements should be styled and the Render Tree combines the two into a full map that ties the whole web page together.

The rendering of the page is done in two steps, Layout/Reflow, and painting. The layout and reflow set the instructions for the size of the browser window. At this point, any styles that are percentages or estimated measurements can now have a reference to work from. Once this reference is created the web page can be “painted” and finally stylized.

Time for a breather, grab a bathroom break.

Optimization is a constant analysis of this process and the moving parts therein. When a website utilizes too many separate CSS or Javascript files it has to send multiple requests to the server in order to obtain each of these files. This blocks the page from rendering because the page won’t be built or rendered till all of the files are requested.

Imagine loading a web page is like baking a cake, but you don’t have any ingredients yet. You go to the store to retrieve your ingredients. While browsing you pull out your recipe (HTML) and begin looking for the ingredients (CSS, Javascript & images). Unfortunately, you only brought part of the recipe with you. You grab the flour and head home to retrieve the rest of the recipe. Now let’s pretend that you are very careless and only have sections of this recipe. At this point, you face going back and forth to the grocery store in order to bake just one cake!

Just like baking this cake, not concatenating your recipe ingredient list into one large list creates a delay in the baking process.

Concatenating, or combining, resources into fewer files can reduce the number of server requests that your web page needs to make in order to render, thus reducing the build and render time.

Besides the issue of multiple server requests we also have large files like Javascript and CSS libraries. We also have images, and images can be huge. Compressing images and libraries can help save vital kilobytes but you still have the issue of serving them. And what if your server is on the other side of the country, or perhaps on another continent?

Hosting content on a Cloud Delivery Network like Google Hosted library can be a great way to load commonly used files such as jQuery or font icons because a user’s browser may cache these files. Taking advantage of large CDN’s can help serve your content faster because these CDN’s have incredibly fast servers throughout the world.

Optimization is an endless struggle but it can be done efficiently given the correct methods and tools. We will discuss these topics in more depth at a later time. For now, you should begin to see that there is a lot of emphases placed on user experience.

Wrap it up!

How does all of this run together? In our modern society content may be king but responsive design and optimization are the foundations of his castle. And what is a king without a castle? In order to deliver your great content, you need to provide a great user experience. A user that has to wait for over three seconds to see a website rendered will most certainly move onto more modern websites, especially if that content is easier to comprehend. By utilizing this knowledge of responsive design and optimization we can begin to speed up our sites and ensure that our content is delivered correctly, no matter what device a user is accessing it from.