By: BW Ellis
Originally Published: July, 25th 2014
In the world of websites, blogs, social media, and everything else that comes with it, we have seen some really fantastic yet short-lived developments come and go. I mean, does anyone have a MySpace account anymore?
From evangelists for certain software types to the breathless accounts at how amazing the new phone app is, we hear about all these new things and wonder, “Is this really worth keeping around?”.
In the case of Responsive Design, the answer is an unequivocal Yes!
Responsive Design, What it is & Why it is So Important.
When the internet was originally established, the only way to access it was with a full-sized computer with a full-sized screen that hovered from 900px – 1200px in width. To accommodate the unlimited amount of information to be contained in this small piece of real estate, the developers used a vertical scroll function, and thus the web browser was born.
Version after version, the structure of the pages stayed the same because the real estate available on display stayed the same. If you were one of the more advanced users, you noticed the limitation on this but shrugged it off as being “one of those things.”
Instead of using the Internet Explorer window at the full-screen setting, you realized that if the window was floating on the desktop and you reduced the width of the browser, the information on the right side of the page got hidden, then you would have to side scroll to reveal it, and that sucked.
In several cases, the more adventurous web designers create a page that deliberately uses the horizontal slider rather than the vertical one, but that technique never really caught on in the marketplace of ideas. In point of fact, the only time you see that design is when you are on a page intended to show high art or fashion photography or to otherwise demonstrate a portfolio.
So we all looked at the World Wide Web via a window that only allowed for 1200px of width and effectively unlimited height. All of that started to change the moment Steve Jobs and Apple Computers introduced the iPhone.
Now we have devices that only allow for 320px of width for content. The size of the designer’s palette was slashed by 70% or more, and the designers grumbled.
Actually, they freaked out. I was freelancing for a design firm when the iPhone was released, and the Development Director called an emergency meeting to discuss and decide how the company would handle this.
All of a sudden, all the methods for tweaking and hacking designs to fit all the browsers, another nightmare of the web design world known as Browser Compatibility, was amplified with this pocket-sized device that could not only make phone calls but could surf the web.
After some hang wringing and much debate, the simple solution won out, and we left the meeting with a directive, let the web page shrink to the size of the display, and the user could “pinch and pull” their way through the design to get where they wanted.
None of us were convinced that this would be a long-term solution, yet the vast majority of websites online right now have this problem within their design. The idea that anyone would spend time on a site when they had to go through specialized movements in order to read the text was absurd on its face, but it was all we had to work with at the time.
So a few months later, I moved to the east coast and started working with a new group of designers who approached the problem from a different perspective. They started to target individual devices for their programming, and that seemed brilliant. I learned how to specify the programming for the device and make alterations that only loaded into the browser when it was called for, not as a blanket function.
Now, this technique had existed before, but I didn’t learn it because it really never came up, and I thought it was really smart. The only downside was that we had to design for every type of display out there, but that was not too big of a deal since the iPhone was the only game in town. I just had to plan for the two screen widths of the iPhone, landscape and portrait, and the size of the standard site, and all was good.
In classic technology fashion, that solution lasted about 10 minutes. Soon the market became inundated with devices of all sizes, from slightly larger cell phones to massive cell phones to medium devices to slightly larger devices to computers that wanted to be devices.
Quicker than I knew how to deal with it, I was making a Cascading Style Sheet (CSS) for every conceivable device out there, and the result was an amazing amount of work no matter how well I planned the writing of the markup language (HTML) the pages were built upon.
At this point, I took a detour and started to learn how to program displays for smart homes that used iPads and iPods along with some manufacturer-specific displays, and I was trapped in the same programming circumstance. I had to build the graphic user interface (GUI) separately for each touchscreen, build out the icons and artworks separately for each device, planned and executed the programming slightly differently for each device.
The process was extremely time-consuming for me and expensive for the client, and neither of us enjoyed the experience. I would have to explain that while the state-of-the-art control system could process more information than a 1970s-era battleship, it could not figure out a way to repurpose the same graphics on a smaller display.
The experience made me feel a little embarrassed for the designers and developers who shrugged their shoulders and tried desperately to avoid the question when I called them for tech support or met them in person at a trade show. It seemed that the entire industry forgot about this very simple part of the human equation when developing the method for building these interfaces.
Then the environment changed when HTML5 and CSS3 finally became a reality. While nowhere near perfect, the upgrades to the programming language allowed for a completely different approach to the challenge we faced when designing for the web.
If you think about it, the solution I was using at this point was similar to man-on-man coverage on a basketball court. I wrote a separate file (or section of code) for each type of device, assigning my design to each one the way a coach assigns players to cover each other player on the court.
What this new approach allowed for was a zone defense that could hand off the opposing player from one size to the other, allowing for a carpeted coverage of the appearance of the site.
The zones were ranges of pixel width as opposed to calling out each browser and display type. All the coding needs is the ranges of sizes and the way the internal objects flex and move around. This reinvention of the workspace changed how I coded items, but the new method would be stable no matter how many times the width of the window changed.
Sprinkle in a little AJAX coding, and the site dances to the different widths, a beautiful solution.
About 15 minutes into the instructional on building these Responsive Designs, I wanted to go outside and slam my head against a wall for not thinking of this earlier. The simplicity of the methodology was so obvious and elegant that I didn’t see it despite it being right in front of my face.
Immediately I wanted to do this with every website I designed and utilize it with every display I needed to program. It became that one direct thing that answered all the concerns by allowing me to program for every size, from the smallest 320px phone to the largest 2500px width display, and have the design look exactly the way I wanted it to.
Now all the sites I design and develop are built with Responsive Design in mind. When I create sketches of a site I only need to build them in 4 different sizes to demonstrate what they will look like as they shrink or expand to fit the width and height of the device the viewer is using.
Technology is always changing, and I expect the next problem to come up will once again challenge everything I have ever learned. That being said, the approach Responsive Design offers solves so many issues and makes the site look so incredibly good that I cannot help but think that it will endure far beyond anyone’s expectations.
It has become the new normal.
