Responsive Website Design and Page Load Speed

In the last several years website design has taken on a new and more challenging development.  Fueled by the vast collection of internet enabled portable devices such as tablets, convertible computers and the ever-present smartphone, an entirely new way of creating online content has taken shape and become a necessity for successful website design.

People today expect to experience a website that is easy to read and navigate no matter what device they are using.  If your site is not optimized to their device, requiring the individual to zoom in and out, scroll horizontally you may quickly lose their attention and business.

Responsive website design and page load times for smartphones

Lots of Options for Responsive Website Design

Just a couple of years ago there were significantly fewer options for creating responsive content.   Today, just about every development environment and content management system (CMS) provides some means of creating online content that is responsive to the viewport.  There are an abundance of resources available to create a fully responsive website out there no matter what your choice of framework.  You get professionally designed special theme, templates and plugins designed for WordPress, Joomla and Drupal that are fully responsive.  Most of these are fully HTML 5 compatible and use the latest CSS-3 standards for layout and design.  There are still many non-responsive resources out there, so you want to make sure that you read the theme or resource description prior to downloading and that the words responsive design are in the description.

Some Code Examples of Responsive Design

We will give you a little technical code details below in order for you to understand what is happening in the background.  If you are using a predesigned template or theme for a CMS, you most likely don’t need to understand all of this.  However, it is always best to have a background understanding in order to be better equipped to deal with possible issues were you’ll have to dig into the code a bit.

Designing for a multitude of devices relies on what are called media queries.  These are CSS implementations and allow for the changing of a page layout and design or possible the elimination of certain elements of a page dependent on the page width or viewport size. The elimination of certain page elements is useful for mobile phone screens where the real estate is very limited.  Media queries typically start some variation of the following: @media only screen and (max-width: 640px).  This is known as the condition.  Following the condition you’ll typically find the rule or CSS parameters that a viewport max-width of 640px will change, such as body { width: 75%; } or any of a multitude of CSS properties.

In the “head” section of the page, most responsive designs add this bit of meta code: <meta name=”viewport” content=”width=device-width, initial-scale=1″>.  This tells the browser to render the width of the page at the width of its own screen.  So if that screen is 360px wide, the browser window will be 360px wide, rather than at the zoomed out full page value of 1160px or whatever the default is if the responsive Meta tag were not present.  Additionally, the images need to scale along with the size of the viewport. To accomplish this make sure there are no image size attributes listed in image URLs such as width=”600″ height=”400″.  This constricts images to a certain size and does not allow them to scale.

Google and Responsive Design

As far as Google considers the matter, they are very concerned about responsive design parameters and give you plus points in their algorithm if your site is responsive and able to load content correctly on a wide variety of platforms. They are also looking at page load speed, and consider that in their algorithm also, in order to ensure their user’s experience as flowing as possible. On April 21st 2015, Google rolled out their Mobile Friendly algorithm update. Read about Google’s Mobile Friendly Update. Google has a special mobile sites guide and test tool as part of their Developer Tools/Webmasters site.  Read about Google’s Mobile Developer Tool.

The Smartphone Revolution and Page Load Times

More and more people look for information on their smartphones. The utter convenience of this while they are out and about going shopping, at work or doing other things is undisputable.  While the average webpages content continues to climb to a load of over 1500 kB, at smartphone bandwidth speeds, particularly when the network is not running 4G or LTE and has reverted to the 3G network, will render these pages at significantly longer load times than a home, office DSL or cable connection.   This once again results in loss of viewers and clientele.

We are in a continual state of technology flux.  It’s important that today’s website designers don’t discount the fact that more searches and done on smartphones and consider page load times as still an important factor in the design of their sites.  Just because most people have broadband service at their fixed locations does not mean you can add unlimited fancy features, slow loading graphics and movie content up on a page as you will.  This is especially important for the index page which is generally considered the landing page.  But it is also an important consideration for internal pages as they may also be landing pages as a result of searches that contain page content pertinent to the searching party’s keywords.  Images and content should continue to be refined and minimized whenever possible if you want to maximize smartphone traffic.

Google’s Consideration of Page Load Times

As noted in this Google article from 2010, page load times have been an important consideration for ranking and search engine page return position by Google for a long time.  It’s important to remember that Google’s two main concerns are providing relevant results for their users and the best user experience possible. The speed at which a website loads is considered part of the users experience and Google has added this metric to their algorithm.

Conclusion

While there continues to be a significant number of non-responsive and slow loading websites in cyberspace, the truth of the matter is, if they don’t keep up, those who procrastinate may suffer losses in the traffic, resulting in a loss of business and profits.  It is best that you consider these very important aspects prior to creating your new website project.