In this series, we will help you to be prepared for this ever evolving, rapidly changing digital landscape.

Part 02

Responsive web design is a way of making websites that are sympathetic to the device that is being used to browser the web – simply, it makes the most of the available screen size – and it is going to explode in 2012.

 Why? Mass adoption of the web continues to move away from the desktop. The browser landscape is becoming increasingly untethered from the desktop, with devices becoming smaller and larger simultaneously. Small-screened devices are estimated to become the dominant form of web access in a matter of years, while modern game consoles have made a widescreen, television-centric web more readily accessible. Surfing on tablets is becoming widely popular, which provides us with web access that is neither fully “mobile” nor “desktop”. It’s somewhere in between.

The result is that we’re designing for more devices, more input types, more resolutions than ever before. The web has moved beyond the desktop, and it’s not turning back.

What do I do?

My budgets don’t allow for all these various devices and browsers! Enter Responsive Web Design. We embrace the flexibility inherent to the web, without surrendering the control we require as designers and developers. So what does it take to create a responsive design? Speaking from a a front-end layout, it take three core ingredients:

1. A flexible, grid-based layout
2. Flexible images, media and typography
3. Media queries

By working with our flexible grid, using fluid images and media combined with CSS3 media queries – we can create a design that can adapt to the constraints of the browser window or device that renders it, creating a design that almost responds to the user’s needs. This way visitors get the most from your site or content no matter what device they visit on.

Why mobile first?

As more users visit sites on their phones and tablets, we must start thinking mobile first. By starting for mobile, we insure that the site will look well in all larger environments, which certainly makes sense because mobile is the most restricted medium that designers/developers need to work at.

Therefore, as the medium becomes larger and offers better support for most media queries and options, we can include additional features. This described as Progressive Enhancement, which is build for the lowest common denominator and enhance for visitors with the technology that is capable of rendering these enhancements.

Where to now?

Give us a call and we can talk about your next project and building it on our responsive platform.

In this series, we will help you to be prepared for this ever evolving, rapidly changing digital landscape.

Part 01

I’m going to start with something that’s not actually a technique but rather a methodology. You may have heard the term progressive enhancement (or its friend graceful degradation) floating around, but in 2012 it is going to become more important than ever due to the number and range of new devices that will be used to access the websites we build.

Progressive Enhancement

This is a powerful methodology that allows Web developers to concentrate on build the best possible websites while balancing the issues that are inherent in websites being access by multiple unknown user-agents. Progressive Enhancement is the principle of starting with a rock solid foundation and then adding enhancements to it if you know certain visiting user-agents can handle the improved experience. Progressive Enhancement is the journey from simplicity to complexity.

Graceful Degradation

Graceful Degradation differs from Progressive Enhancement in that it is the journey from complexity to simplicity. Progressive Enhancement is considered a better methodology than Graceful Degradation because it covers a greater range of potential issues as a baseline. It is an older methodology and predecessor to Progressive Enhancement.

So what does this mean? Why would I want to use it?

Part of the appeal of Progressive Enhancement is the strength of the end result. It forces you to initially plan out your project as a functional system using only the most basic of Web technologies. This means that you know you’ll always have a strong foundation to fall back on as complexity is introduced to the project.

By starting with a strong and sound foundation, we are able to release projects that work on all platforms and then concentrate on adding the bells and whistles.

Progressive Enhancement is good for your users. It gives them the security of knowing they can visit your website using any of the thousands of user-agents and devices available to them and still interact with your content as that agent allows.

Where to now?

With Progressive Enhancement, your clients will be happy with the rock-solid results, more accurate time-frame estimates and the easier maintenance, and you will be happy knowing you have provided a better, stronger product that benefits more users. Contact us to find out how Promodem Bridge makes it easy for you to be progressive.