Responsive Web Design

What is Responsive Web Design and why should you consider it for the design of your website?

The Future Of The Web: The Case For Responsive Design
Responsive Web design is a new design approach that enables Web designers and developers to build and maintain a single website to serve to all kinds of devices: smartphones, tablets, laptops and more.
Mobile adoption is skyrocketing, as is the diversity of mobile devices on the market – smartphones and tablets are currently leading multi-screen customer experiences. Today’s multi-device environment is bolstering mindshare and profile for responsive design because it offers a compelling promise to both website visitors and to those who build the Web: a single website that works on all devices. (read more)

Why You Should Redo Your Company Website With Responsive Design
If your brand relies on a web presence and your website is not optimized for the latest mobile devices, you might be doing yourself a great disservice. As the popularity, affordability and ubiquity of mobile devices continues to rise, more and more people are using these devices to access the web.

As website standards and browsers continue to improve, however, it’s becoming easier to build mobile-optimized websites — as opposed to purpose-built apps — to accommodate users who are visiting your website through their mobile phones. Since it’s no longer an option to just have a desktop version of your site, and if creating a mobile app is simply out of your reach, consider building your website with responsive design instead.

Let’s take a detailed look at exactly what responsive design is, what it entails to build your site in accordance with its design principles, and why you should seriously consider this option when formatting your website for the growing number of mobile-enabled users who are visiting your website. (read more)

Why Responsive Design?

responsive-websiteBefore we get neck deep, let’s dip our toes a little. Simply put, responsive design (RD) is a method of creating a site that allows it to expand and contract to fit the frame it’s given without sacrificing readability or usability. Here’s a fantastic example photo to visualize the concept courtesy of wikipedia.

An important distinction to make here is these are not different versions of the site. There is no ‘mobile theme’ or ‘device detection’ voodoo here. Every device you see above is served the exact same website, and it’s up to the website to display in a way that makes sense for each screen size. (read more)

Why Responsive Web Design Has To Win Out
When considering a mobile Web strategy and weighing responsive Web design against a separate mobile website, the most important metric is how functional the website is for the user. This goes beyond better content organization for smaller screens. Mobile (and desktop) websites should be easily found, easily shared, fast loading, easy to maintain and easy to build on. (read more)

The SEO of Responsive Web Design
Sounds too good to be true, doesn’t it? It all started with a fairly simple theory from Ethan Marcotte in a 2010 article titled “Responsive Web Design.” Rather than creating a single webpage that is 800px across and centers itself on the screen, responsive webpages are composed of elements that size, shape, and place themselves based on the width of the browser screen. Elements determine the screen size using CSS media queries.

Let’s start with a simple example on a grid, using 9 rectangular elements labeled A–I. On a small screen, like a tablet or an older computer with fewer pixels, the elements would display themselves in a 3 x 3 grid: (read more)

Why responsive web design is good for SEO
One of the most exciting changes in website design has been the introduction of responsive design, a mechanism that allows a website to react to the size of the users screen and to adapt to the best fit.

This is used to allow websites to fit the varied screen sizes that users have on desktop or laptops, but the real benefit has been its use for creating mobile friendly sites.

Using responsive design to build a mobile site takes less time than creating a stand-alone mobile site, it’s easier for the client to manage and maintain, and the user has a seamless experience without need for redirection. Whatever the screen size of the user they’ll be served from the same database and same page, meaning that you have one solution to fit all devices. (read more)

Why 2013 Is the Year of Responsive Web Design
2012 has been a very unusual year in the PC market. For the first time since 2001, PC sales are projected to be lower than they were in the previous year.

So which devices are consumers buying? Tablets, for one thing. Tablet sales are expected to exceed 100 million this year.

Tablet sales are expected to exceed 100 million this year. Their sales numbers may top notebooks next year. Smartphones, of course, are also a hot commodity — according to Nielsen, the majority of U.S. mobile subscribers now own smartphones, not feature phones.

Meanwhile, the shift to mobile is happening at an extraordinary speed. Today, 30% of Mashable’s traffic is mobile. By the end of next year, this may exceed 50%. (read more)

Here are reasons why some people should NOT have a responsive website.

5 Reasons Why Responsive Design is Wrong for Your Business
Responsive Web Design (RWD) is an approach to web design where the site is crafted to be optimally viewed regardless of screen size…no matter whether your visitor arrives by desktop, mobile device or tablet…now or any device in the future.

While RWD offers a lot of potential benefits, the idea that it’s right for all web projects is ludicrous.

There’s no one calling plan, diet or religion that’s right for everyone, so why do we believe that there’s a one-size-fits-all approach to redesigning your website? (read more)

Responsive Web Design Makes It Hard To Be Fast
I like Responsive Design. Heck, I LOVE Responsive Design. I think it’s a brilliant methodology, which address true challenges in a very good way. But no matter how fond you are of RWD, I think you have to face the music – RWD makes it very hard to write a fast website.

I’m not saying you can’t write a high performance responsive website. I’m not saying you shouldn’t use RWD (Responsive Web Design) – I would actually recommend it to most organizations. However, RWD makes pages inherently more complicated, and all in all would make the mobile web slower. (read more)

5 Reasons Why Responsive Design Is Not Worth It
After the huge debate this original post created, we decided to refine and build upon the original article, bearing in mind the thoughts of some very insightful feedback left by some commenters. You can find the new article here.

“We’re just now starting to think about mobile first and desktop second for a lot of our products.” ~ Kate Aronowitz, Design Director, Facebook

“[The shift to mobile design] is even bigger than the PC revolution.” ~ Kevin Lynch, CTO, Adobe

In 2014, more people will be using mobile devices to access the internet than desktop PCs. Accessibility for mobile devices has become a huge priority for web developers.

Responsive design is seemingly universally accepted as the way forward, but I am far from convinced. Today I am going to explain why I believe that responsive design is not always the optimal solution for web design. (read more)

11 Reasons Why Responsive Design Isn’t That Cool!
Since Ethan Marcotte published his seminal article on Responsive Web Design there’s been an explosion of articles related to this topic. The guy truly made a good work also publishing a book about it, deepening on what many consider, since then, should be a standard for web design. If you have no idea of what this thing is, this Responsive Web Design thing, but simultaneously you’ve been thinking and working on a way for your web projects to be viewable in multiple devices, then you are instinctively working on responsive web design. Here’s a little insight: The main objective of responsive web design is the inherent flexibility a website can acquire through the application of fluid grids, images and CSS Media Queries to adapt the content and design of the website to any device, even if it is a desktop computer, a laptop, an iPad or a Smartphone. You do not have to create a mobile version of your website; you do not have to create an application for every popular device on earth. Just one and it will adapt to everything. (read more)

In Summary

I provided articles arguing for and against RWD (Responsive Web Design). I believe in providing as much accurate information and facts so that people can make the best choice. In my opinion, most people and small/medium sized businesses will benefit from RWD. Unless you are serving massive amounts of content and worried about serving bandwidth, the pageload issue is one you don’t have to worry about. First there are various responsive codes out there and some are lean while other’s are bloated. It’s important for the web developer to understand the difference when choosing the platform, site layout, and hosting plan for their website. Secondly, there are ways to speed up page load, such as through the use of caching plugins and services like Cloudflare. Third, most users will appreciate the ease of use and maintenance when it comes to their website. Having to update a PC display and a mobile display is just more work to do in the backend. So unless you are a large company who has to worry about serving massive amounts of content and bandwidth, or if you just wish to have to displays, one for PC/tablet and one for mobile, then RWD is probably the best choice for you. – Steve Kim