Responsive Web Design

Responsive Web Design Example

As you move about in your every day life, you can’t help but notice one thing that is almost a standard now in our modern culture: smart devices. Whether it’s a phone, a tablet or some crazy device currently in development that someone left in a bar, most of our culture spends a good amount of time with their heads tilted down, gazing into an Internet-capable device. Now the question you should ask yourself as a website designer or website owner is: How does my website look to these people? Are they annoyed? Frustrated? Confused? Bored? If you think any of these are true, I have a way we might be able to fix that.

Here’s what we do.

Mobile First

There’s somewhat of a movement starting in the web design industry and it involves designing for these smart devices before thinking about how it will work on a desktop. This is especially important for companies that depend a lot on their mobile presence or getting attention from consumers on the go. If you nail the mobile design, you can guarantee (mostly) that these visitors will have a solid experience on your website. Then, you can use that to construct a version of the website for desktop users and all your bases are covered, right? Well, not exactly.
Browser Blues

One of the issues of building a mobile version of your website is that the structure depends on which mobile device a person is using. You have to decide if the visitor is using an iPhone, Android, Blackberry or tablet, then figure out if it should be used in portrait or landscape mode, and finally, are you including touch controls or specific effects? Because those are probably device specific as well. On top of all these coding issues, you may run into the problem when you enter the URL on your mobile device, if there is a redirection and loading process while switching to the mobile version of the site. And most likely, the mobile site will be missing some features of the desktop site due to being cost prohibitive or simply unusable.

The Future Response

The future of web design is here and it involves developing for all devices at the same time. This is done by making your website responsive, or having it adapt to the user based on how they are viewing it. This means that your site will be able to change size and shape to allow the best user experience whether the visitor is using a phone, tablet or desktop computer.

As a designer, I find this really beneficial because when using responsive design, you don’t need to worry about which handset or what monitor size is being used and although it requires more planning and organization at the beginning of production, it will save so many headaches in the end. As a website owner, responsive design allows you to reach the broadest audience without sacrificing features and content because of a smaller viewing screen.

Conclusion

Since everyone is walking around with their nose buried in a glowing computer anyway, why not play to your audience and make your website friendly to those users. Responsive design is a hot topic in the web design industry, and for good reason. The accessibility it provides is much greater than that of mobile versions or even some dedicated apps (and most likely it’s friendlier on the wallet as well). The next time you’re looking to update your existing site, or design and build your next project, think responsively.

Responsive Design Sources

There are some great resources online for getting started with responsive web design: