Responsive Web Design simplified and 3 reasons why your site should support it

/in , /by

Responsive Web Design: You may have heard the term in passing, or have come across it while looking into updating your website – but what is it, exactly?

Responsive Web Design, often abbreviated RWB, is a method of designing and coding Web content in a way that allows it to automatically configure its layout to provide the best experience possible based on the type of device it is being viewed on.

Think of your website like a unique restaurant that requires its patrons to use keys to enter; in order to enter the restaurant, you must have a functioning key – but if you don’t have the right key, you can’t gain access. By limiting the number of keys that work, the restaurant has limited its potential customers and revenue.

By slightly changing its design scenario to use a lock that responds to all keys, the restaurant can keep its unique novelty approach, while also opening its services to all potential clientele; they use whatever key they have accessible to them.

Responsive Web Design is like the master lock that makes all keys work – it “unlocks” a website to all mobile devices. In short, it is a way of designing a website so that visitors can easily read it, regardless of the device they are using to access the internet.

How do we Make a Site Responsive?

We won’t go into too much detail; however, the basic premise begins with us making the layout of the pages conform to a fluid grid – this grid bases the size of each content container on a percentage of the view size. By using a fluid grid, the site then adapts to allow the content to flow around each other based on the width of the browser – rather than on a static grid size. Think of this grid as a belt that can adapt to various screens.

Another core technology we use involves Cascading Stylesheets (the latest of this technology is often called CSS3), which allow the browser to load different layouts, or even completely different designs, based on the type of media the page is currently being rendered on. We can even specify a print stylesheet to alter your website for those printing a Web page. This means that the sizes, positions, and colors of elements on a Web page – and, more importantly, their visibility can be changed based on criteria we decide.

The site you are on now is responsive; you can test it out by resizing the browser from full screen to very small. As you resize your browser, the website will adapt – you will likely see a couple of different “jumps” in which the screen adjusts its layout to the perceived target medium.

During the “jumps,” certain aspects of the page may disappear as the content area shrinks and you will most likely see how, as the rows in the grid system start to shorten, the blocks of content flow around one another; they make the content longer to account for the lack of width.

These are just a few of the things we do to adapt a website design to make it responsive. Often the changes go deeper – more to come on that as we explain why your site should support this technology.

A Deeper Look Into What Makes a Site Responsive

In our above analogy, the restaurant owners essentially made their restaurant unaccessible to you; by making their restaurant flexible, they expanded accessibility for all; this flexibility and adaptability is the heart of Responsive Web Design. Accessibility entails quite a bit more than simply ensuring your content is readable, though – let’s take a deeper look.

1. Not just mobile friendly; universally device friendly

The internet isn’t just about designing for a computer screen or even just for mobile anymore (the hot must-have of yesterday); today’s world finds a multitude of different types of devices (iPads, Android tablets, e-readers, xbox, etc.) with different screen sizes, Web browsers, and hardware visiting your website.

Remember a website is the window into your business – and to best set yourself up for success, you need to make sure that your customers have a good view no matter what device they are using to visit your site. The solution to being device friendly is a Responsive Web Design that adapts based on the browser, screen size, and even based on the hardware itself.

2. If you are a business selling goods or services, a Responsive Design opens your company to a large market.

Not only are people using a mobile device to visit websites, but many are buying from the same device. A recent Google study found that 67% of customers were more likely to buy if the website they visited was mobile friendly.

Mobile friendly doesn’t just mean that the content scales to the screen size, but that the right content is easily accessible to the user. This navigability and smart coding is where Responsive Web Design comes in…

With standard design, Web designers used to design an entirely different website for mobile devices – but, thankfully, gone are the days of requiring a separate site for mobile – and having to potentially deal with duplicate content and strange back end configurations. Now, with RWD, your website can maintain the same content adapting it across desktop, tablet, mobile, and other form factors – without duplication or formatting issues. It’s a huge time and money saver – not to mention sanity saver.

3. Improved performance.

Web and mobile users are fickle; if loading the site via cellular service, there is a likelihood that the site will take some time to load – and the longer it takes to load, the less likely that visitor is to actually make it to your site (they’ll go back and look elsewhere).

Your website may have image sliders that showcase your products or some other visual effect that requires large amounts of content to be downloaded and then loaded into the browser. This all takes time, and can often use a good chunk of a device’s hardware.

Responsive Web Design improves the image load time, minimizing the load time for your full site, improving your site’s performance as a whole and enhancing your visitor’s experience.

How I Came to Love Iteration During Product Development

/in , /by

You have developed the perfect product development plan. You have drawn the numbers, looked at every possible flaw, examined the audience. Yet, things go awry; your perfect plan goes unnoticed by the intended audience or, worse yet, there is a glitch in the actual product itself.

It happens to the even the best at some point – and it will happen to you. Count on it.

Help! The Sky is Falling!

Even some of the biggest, most well-known companies have their share of flops and internal or customer-led resistance – and without them, they may not have risen to the top or maintained their tenure – for in every moment of reluctance and in every flop, there is a lesson to be learned.

For example, consider Apple’s iPod – a device common place today. But in 2001, this technology which boasted the abilty to store 1,000 songs digitally – a feat unheard of at the time – was met with some resistance.

Or how about the Boeing 787 Dreamliner, a game changer for the commercial airline industry? Once promising huge savings in fuel and maintenance costs, this dreamboat became a bit of a nightmare for the company after huge delays and a series of unfortunate mishaps.

Of course it feels different when it happens to you – and when you first feel it happening, it may seem like the pending apocalypse of your success. However, dealing with challenges in your product’s development is often a matter of poise and perspective.

What would the consumer music industry be today had Apple not pushed past the initial criticism in 2001? There are countless stories out there of product development flops and champions… take it upon yourself to learn from others’ experiences and mistakes to glean hard-won lessons without paying the price, but also to put your own situation into perspective and gain a boost in confidence. Though many of those companies may have had to adjust Version 1.0 of their product, they did push through to successfully get their product to the marketplace.

Product Development is an Iterative Process

If, despite your product’s shortcomings, the market wants to invest their hard earned dollars into your innovative product, you are on the right track. The lesson is that you have to push past the initial sting of negative feedback to get to the end zone, for you will get there if and only IF you are willing to move the ball down the field every day as you adjust your game plan. Sometimes it is a First and 10, sometimes it is a 1/2 yard run, sometimes your plane catches on fire…but move the ball because at the end lies a touchdown.

Steven R. Covey famously coined, “BEGIN with the END in Mind.” Though this is true throughout many facets of our lives, I can’t think of a more perfect way to summarize product development. It isn’t about the failures along the way and it isn’t about the countless hours invested – while these are all important pieces along the way and you shouldn’t forget them, don’t tie your ego to an anchor that can pull you down with the ship. Make a plan to appreciate the real world feedback and to adjust the course as needed – negative feedback is just as important as positive feedback. This is your road to success.

The quickest way to failure in product development is to fear criticism and to let it cripple you. Though that product may be your “baby,” almost all ideas have room for improvement and enhancement. Feedback – positive or negative – is essential to making each product the best it can be. Don’t take it personally – use it as an opportunity: iteration is a beautiful thing.

Understanding from the beginning what your end goal is, but recognize that the route to reaching that goal is paved with uncertainty and calculated risk. As Mr. Covey said, “begin with the end in mind.”

Fail, but Fail Fast

At some point, if you stick with product development long enough, you’re bound to have a flop.

Understand the narrative of the product that you are creating.  If the narrative is not being met by the product, you may have to recognize that your product is not the solution – in which case, fail, but fail fast.

Not every product can be a home run – some times, a bad idea is just that; a bad idea. So how do you know if this is the case? For starters, go to the market and let people vote with their dollars: this is the only true measurement of your success or failure.

Understand the metrics of success but also understand and acknowledge that, despite the potential blow to your ego, you may not be a winner this round.  But there is always tomorrow…

You are far from alone in this one flop. I leave you with examples of from the dustbin of innovation history (hint: Furby made the list), compliments of CNET.

Embrace the iterative process, believe in yourself, and remember that it’s all about perspective.