My article about Responsive Design was recently published by the international trade publication, The Software Developers Journal. The SDJ is read by thousands of technical people around the world but my article was written from the perspective of a lay person in the industry. Here's my article, but everything in the issue is definitely worth a read if you are a techie! Drop me an email if you would like a copy of the entire publication at gary@lwebg.com!
I've posted the article on our website for you to review! It's not hypertechnical, so have a look and enjoy!
Responsive Design Trends
Louisville Web Group started in 1998 and, as the owner, what I do every day now is quite different than what I used to do every day in the early years of my work with the World Wide Web. Then, I wrote code, took photos, wrote copy and managed hosting servers. Today, I help clients develop their website’s Content Architecture plan and then come back later to do their SEO. But my most important job is sales, because without the sale, there is no work.
I’ve seen a lot of things change since my company started but the biggest change and the one with the most impact on my business and the industry at large is the rise of mobile computing. To make it clear, I am not a developer. I am a businessman with graphic and creative talents. So it was a big deal for me when I learned how to write a line of html! Since I am not focused 100% on the technical side, I had to hire those that were. And some of them, at least, had to be young with tousled hair, because that’s what everyone I called on expected to see, not some old man with a white beard.
After the sale, I work with clients to define strategies to meet their current online needs and look into the future to help them be prepared for the changes, both in technology and user tendencies, that are certain to come. I also serve as a communicator between my staff of developers and the conservative business mindset of our customers.
I’ve incurred lots of business-related bruises in the fifteen years since I first hung out my shingle as a Website Design Company. But one of the things I did right was when I quit slicing and dicing images and made the move to CSS based design. That was Good Decision 1, or GD 1. The second Good Decision, or
GD 2, that I made was to revise my strategy to adopt and recommend Content Management Systems for all new clients that came my way. The most recent good decision that I made – and this took place less than a year ago – was GD 3 when I decided to dedicate my company to Drupal CMS and GD 4, when I chose to push the company full tilt toward Mobile First Responsive Design, as opposed to playing the app game or continuing to build traditional multi-domain mobile Websites.
Responsive Web design is a website design technique employed by leading Web design and development firms that allows a website to function effectively on all browsers and on all screen sizes, including mobile devices and tablets. The term “Responsive design” was coined with an article by Ethan Marcotte of “A List Apart”, appropriately entitled Responsive Web Design.
Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Web sites. “Instead of responding to today’s needs for a desktop Web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen,” Marcotte said.
Technical features key to responsive Web design include a flexible grid-based layout that uses relative sizing and flexible images and media, through dynamic resizing or CSS. To me, the technology is totally amazing.
The Mobile Puzzle
The wonderful little Palm Pilot changed everything. Before the Palm Pilot came around, from time to time, my wife used to help me get organized by gathering up the dozens of Post-It notes, backs of business cards and pieces of scrap paper upon which I used to put notes and telephone numbers. When the Pilot came out, it meant that there would be no more piles of scrap paper filling my pockets. I no longer had to carry around a bulky schedule book and I didn’t have to keep a business card book. How marvelous!
But early during my Palm love affair, I started being bothered by the fact that I couldn’t just click on a phone number and have itdial and then connect with my family member or business associate. I was getting spoiled. All this great new technology at my fingertips, but the lack of dialing capabilities totally ruined it for me!
When Palm came out with the Treo and Blackberry came out with their 5810, I picked Treo because I could call from it without a handset and I could just slide all my old Palm Pilot addresses over to the new Treo without having to enter them all in manually. But Research in Motion made Blackberry better with its Model 6210. All my clients quickly started using the 6210 so that’s where I went as well and I dutifully went about manually entering in all my addresses from my old Treo and cast it unceremoniously aside when I finished.
I had heard about the iPhone but never considered buying one because of the cost. And, like Blackberry, I wasn’t paying attention to the amazing series of events that the iPhone sparked. That is, until one day a guy came to my office and asked us to build him a mobile website. We did. And suddenly everything changed. I started to care about the Mobile Web.
The rise in mobile computing has changed everything and there’s no question that Responsive Design is in the dawn of its development and the concepts, techniques and strategies used are still in their early evolutionary stages. Like virtually everything related to Web technology, trends come and go, but in our opinion, responsive design and its adaptive capability is the key to a great viewer experience both now and in the future. Content and design that is adaptive will soon define a new standard because we are totally dedicated to improving the user experience for our clients’ customers. And that experience must conform to the context in which it is being viewed.
The numbers tell the story. Today’s Google Analytics shows that almost 30% of my website’s viewers do so on some kind of mobile device, up almost 10% from last year. Wireless connectivity is exploding right now, with Internet access commonplace in cars, watches, TVs, etc. Adaptive designs are becoming more critical every day because without it, the Internet becomes accessible to some of the people, some of the time, instead of all the people, all the time.
Successful Responsive Design requires a blend of multiple programming skills and techniques that will result in a positive result. But it is no easy task. For example, consider the issue of screen size. How many screen sizes and resolutions are available today? And how many will be available tomorrow? Not long ago, 640 x 480 was the standard on desktop computers!
Controlling the Viewport
One of the basic issues is that your design will have to be able to control whatever viewport will be used to view the website. The viewport is defined as “any open browser window or a defined area in which webpages are viewed that is independent of the size of the screen.” To control the viewport, you can either set the meta tag viewport in the head section of the site or you can set the @viewport CSS rule in your CSS folder. The script can be placed anywhere you want, preferably at or near the top. The viewport meta tag is currently acceptable but @viewport CSS rule is gaining popularity and will likely become the standard as soon as browser support improves.
Clearly, Responsive Design presents a slew of major technical and artistic challenges. So why is the trend toward responsive instead of other development techniques?
