23 February

The Sport of Responsive Web Design

I’ll admit – I occasionally listen to sports talk radio. It’s not the most intriguing form of entertainment but it can be entertaining nonetheless. This past week I was listening to sports talk while I was driving home and on this particular broadcast they were not talking about sports.

The two hosts were discussing their feelings about new technology and how, because of their difference in age, it made an impact on how they view and use it. One of the hosts was of the millennial generation and the other host said that he was born in 1980. However, even with as small as a 10-year generation gap between him and his colleague, he felt more connected to older technology and somewhat overwhelmed with the fast paced changes the world of new technology can bring. In contrast, the younger “millennial” host spoke of how he was very familiar with the most up-to-date communication and information technologies and chomps at the bit for the latest and greatest upgrades.

I thought this was an interesting exchange because these two hosts, again who were only 10 years apart, seemed to have very different feelings about the progress of technology. I am reminded of this exchange as I consider how responsive web design is making an impact on society and why it’s important in this day and age.

For those unfamiliar with the term responsive web design, let me paint a picture. Someone needs a website (for a business or otherwise), they contact a web designer to build them a site. Once that site is completed and launched anyone with web access can visit the site. In days of old, this site would only optimally be seen on a desktop or laptop computer. Today, that’s not the case. It is becoming more common for people to access information, entertainment, schedules, projects, finances, etc. on more than just a computer. Sites are accessed through smartphones, tablets, desktops, and laptops and even through video game consoles, Blu-ray players or “smart” televisions. The challenge is that all of the many types of devices prevalent today contain many different types of processors, memory capacities, and screen sizes.

The website that was built, most likely on a desktop, is also best experienced by the user on a desktop or laptop. However, the use of mobile devices to surf the web is increasing at a break-neck speed. But still much of the web isn’t optimized for use on a mobile device. The reason is that each type of mobile device has a different display size which affects how a website is laid out on that particular screen. Responsive web design is an approach aimed at crafting web sites so that they are viewable and interactive using all different types of devices. Responsive designed websites respond to their environment. They possess a more fluid design so that the content on the website automatically adjusts to fit and maintain interactivity and a quality experience while using any size screen.

Some developers still unfamiliar with this technology might be wondering how this works. While I am no expert developer, there’s a couple of interesting and forward thinking development practices that I’d like to point out. Many designers and developers are using an open source library called Bootstrap. According to its website, “Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web. It’s made for developers of all skill levels and makes front-end web development faster and easier.”

Bootstrap technology is built on what is called a responsive grid system. This design offers so many different options for how a webpage is laid out and reacts. The idea is that the website sets its content into grids on the page. These grids can then be formatted in any number of ways and can react to each other so that the page responds to all different formats and screen sizes. This grid system design allows the webpage to: have any number of columns, scale to any width, suit the content, enable fast and easy design, and plug in well with existing HTML and CSS.

Why does all of this matter to you or me? Well, I am big fan of the NBA. While following my favorite team, I don’t just use a computer to read articles, watch videos, get the latest trade news, or even watch an actual broadcast of a game. I have found myself using my laptop, my tablet and my smartphone. When I first started accessing the multiple sports sites that I use to follow my team, I noticed that the layout of the sites varied greatly when I would use my phone or tablet to access them. This was extremely annoying to me, not only because of the inconsistent design between the two versions of the site, but also because some of the content wasn’t capable of being displayed on my mobile device. Before responsive web design, websites would have two designs; the “full” site accessed through a computer and a mobile site that seemed like the “lite” version. Today, this isn’t the case as one site can now be built for both desktop and mobile viewing. Thankfully now I can stay current with my team’s information using any of my devices because those sites have all been upgraded with responsive web design.

Now let’s get a little more practical. As I touched on above, more and more people are using mobile devices for such things as banking and bill pay, shopping and money transfers, news and entertainment. If you are the one putting out the content on those sites, or advertising on those sites, the last thing you want is the consumer to not engage with your content or advertisement because the site does not work on their mobile device. Frankly put, sites without responsive web design run a larger risk of losing their audience than of building one. Like the older sports talk radio host above, it’s okay to cherish older technology as long as it’s understood that technology and the way we use it only moves forward. Our goal as advertisers in this technological age is to make a connection with the audience and consumer. But we need to be where the audience is, and mobile accessibility is where they are.

Responsive Design Infographic