Why responsive web design is bad

That brings us to Responsive Web Design. When done correctly, there are few drawbacks to this style of web design. At MORAD, we have been aware of the industry shift to responsive web design for years which is why we exclusively design responsive websites. We do responsiveness testing on all of our websites as a standard practice and even include live previews so you can see how your website will appear on mobile, tablet, and desktop.

Send us a message to get a free web design quote! Categories: Web Design ,. We can also use feature detection, such as with Modernizr , to make smarter decisions about the UI and functionality based not only on screen dimension. While we can rely on a single HTML base and responsive design for all screens when dealing with simple documents, delivering the same HTML to desktops and smartphones is not always the best solution.

Again, because of performance on mobile. Even if we store the same document server-side, we can deliver differences to the client based on the device group. For example, we could deliver a big floating menu to screens 6 inches and bigger and a small hamburger menu to screens smaller than 6 inches.

Within each group, we could use responsive techniques to adapt to different scenarios, such as switching between portrait and landscape mode or varying between iPhones pixels wide , 5-inch Android devices pixels and phablets pixels and up.

The last optional part of a smarter responsive solution is the server. Server-side feature detection and decisions are not new to the mobile web. Mixing responsive design with server-side components is not new. Known sometimes as responsive design and server-side components RESS and sometimes as adaptive design, it improves responsive design in speed and usability, while keeping a single code base for everyone server-side.

I know the feeling. In this new layer, the front-end engineer would be in charge of decisions based on the current context that would make the experience fast, responsive and usable on all the devices, without touching the back-end architecture. You might have some doubts by this point in the article. Responsive design usually entails delivering the same HTML document to all devices and using media queries to load different CSS and image files.

You might have a slightly different idea of what it means, but that is usually how it is implemented. You might also think that mobile networks today are fast enough to deliver a great experience. After all, 4G is fast, and devices are getting faster. We usually think of mobile network speeds in terms of bandwidth. With 3G, we get up to 5 Mbps; with 4G, we get up to 50 Mbps.

Latency is the round-trip time that the first byte of every package takes to get to a device after a request. Cellular networks have more latency than other connections. While the latency on a DSL connection in a US home is between 20 and 45 milliseconds, on 3G it can be between and milliseconds, and on 4G between and In other words, latency is 5 to 10 times higher on a cellular connection than on a home network.

Other issues include the latency when there is a change in radio state, the dead time when a phone turns on the radio to get more data after having been asleep, the lower available memory on average devices and, of course, battery and CPU usage. Consider a real case. Keynote, a company that offers performance solutions, has published data on the website performance of top Super Bowl advertisers. The data speaks for itself: On a wired or Wi-Fi connection, the loading times range from 1 to 10 seconds, while on a cellular connection, the loading times range from 5 to 60 seconds.

To ignore this would be to ignore the usage trends of mobile devices and how they bypassing PCs. I think the problem is bad responsive design.

Not too long ago we were allowed to have one, and a choice. I build desktop and mobile-viewable websites if the client wants both, and have no problem with that. Yeah, voice of reason. I just upgraded to a Note 3, Three years ago everyone was saying there is an app for that.

So I went to find out what an App was. A highly paid option in ITunes to let you use a skinned Web interface. I was lucky enough to have HTC phones which have always supported text reflow until recently. Now on full p phone only rare mobile browsers support that feature. So no hit to the folks at Zerb because their Foundation product is amazing but I always thought that Responsive design was an artists concept, not a practicality.

Firefox emulation plugin I guess. Thank you for a very helpful post! Thank you for such a clear and precise post while I still have some hair left. This website is responsive. Why would you have not been able to read this so easily? Do you have a really old phone and cannot pinch and zoom? I run Chrome on my LG phone and i really prefer the nytimes website view non-responsive over the bostenglobe.

Fully agree. While I feel you raise a few good points and responsive may in fact not be ideal for all websites. If the developer writes code with a user perspective in mind then menus should stay in generally their same location just revert to a dropdown menus which aid in navigation, not detract. It does cost more and take more time. If your a restaurant and know people who are searching from a mobile device are only looking for either location, phone number or menu then responsive may be overkill when a mobile site would due just fine.

Well, i learn a lot from this post and i personally think the responsive layout ruins the design layout totally and accor to me it creates more problem for mobile users than to offer ease.

And those which still buy a pix mobile — wont use it for internet! And what abut convertion? Splittesting and your mobile visitors will see something complete else? Youtube in the mobile version is a PAIN — just to give you a example.. Great points, and of course through CSS one can simply make the type display larger on mobile devices. Thank you for this explosive account. I recently did a web design job and went without a responsive design so that I could achieve the design look that I wanted, and the preferred desktop experience.

I am glad, you agree that responsive design is good, but not a must. What an eye opener to anyone obsessing over responsive design for content-driven sites lately i.

Good read. The focus in using Responsive Design techniques are the same as Accessibility and Usability techniques. That focus being the End User. The goal is to make your website or application accessible and end user friendly on any device effectively. I believe Responsive Web Design techniques can help insure our website or applications are accessible and end user friendly when designed properly. Buggy navigation, overflow issues, poor switching from portrait to landscape, slow loading.

The idea of responsive designs seems to be to eliminate horizontal scrolling, yet there always seems to be some weird margin bugs that allow me to scroll a few invisible pixels to the right. Making things correctly, responsive design is much better than what you say about using same interface for mobile devices. We recommend that one follows the 7 principles of universal design — a well documented and well researched approach to making all things accessible to the largest number of people.

These 5 reasons mentioned in the article makes it clear that the responsive web design is the necessity and it is the future of web design. It is needful if your are into the business and it takes it price. Responsive design is a relatively new term in web design.

It was only coined three years ago in May of Now its a renowned term in designing field. I tend to agree with you and I think there is another reason responsive design is not a must: mobile navigation speed. With 3G and 4G now and wi-fi connection there is decent speed to show up your website on a mobile device.

The difference with responsive vs. In this article, you can explain situations where you think RWD is the appropriate solution and where you think its not. Then everyone will quit using mobile websites and responsive websites completely and designers can just go back to making normal websites.

My android user agent is always set to desktop. I prefer consistency myself. Even if that means I might have to zoom a little. Oooh noo, I have to not move my body at all and be really lazy and pinch my fingers! Maybe double tap? End my life. Mobile devices — why they need a responsive site: What happens when pictures are very small, words are very small, check boxes and entry fields are very small, and menus have cool features but they get lost because of a poorly designed and implemented theme?

The end user cannot easily navigate the site, enter information, or purchase a product. The reason responsive themes are popular out of the box? The workflow for both visitors and site managers needs to be planned from the beginning.

Google predicts that mobile searching will surpass desktop and laptop searching. People rely on technology more and more. They want to be informed, be able to easily access information, and have all of this easily accessible. To make this happen, you must reach their mobile devices.

You must take care of the client. Responsive Web Design also means that it is not only a technique, but a way of thinking and prioritizing content. And this is one of the most important points towards good design, I believe.

Just like in the rest of the world, there will be someone with negative bland opinions about something that is meant for good and does only good. Nigel, I completely agree. This person is so uninformed that I feel silly reading it. I usually never take the time to respond, but this person is ridiculous. If your budget is tight and your site satisfying your users needs, you may get better returns on your dollar by improving your marketing, customer care, etc….

A sister mobile site may satisfying all the needs of your mobile users needs. Google and others proved free mobile platforms. Make sure to basics are being taken care of — your business and web site are running well — before you think about spending time and money on go fast stripes!

Recently I was asked to build a site responsively with fallbacks for IE7. A desktop design was supplied, and I was asked to make sure it collapsed down. I got it to collapse in a way that worked well. The resulting desktop and tablet versions were very similar. Mobile was quite different. I then ended up in a game of email and basecamp football as infinite changes were requested for every single break point….

The designer and client insisted I should cater for this scenario. I had to educate the designer in the problems of forcing line breaks at set widths… and how the content may change as its a cms based system etc etc…. Responsive did not give the designer the level of control that she desired…. A ton of further changes were requested none of which they had any desire to pay for.

Ultimately, they only had their iphone and ipad as reference. The reality is: clients typically want iphone only…. Designers are jumping on the band wagon without understanding the tech… making promises to their clients without any consultation, and then expecting developers to deliver. Responsive does have its place — however, its far from a panacea or magic bullet. So its more work — but I think in the end it will be easier to maintain, and will force the designer to think….

For those who say you can mitigate the above by buying a ready made theme. Too many people doing WordPress — so I aim for a different market where bespoke functionality is the norm. Truly terrible and full of misinformation. Overall, responsive web design solves these problems. With 67 percent search market share, when Google speaks, search marketers listen. Google states that responsive web design is its recommended mobile configuration , and even goes so far as to refer to responsive web design as the industry best practice.

Fluid grid layouts are the worst type of responsive layout. They force users into having one type of layout only. Why would anyone want a side bar on a mobile device where screen space in limited? That argument makes no sense at all.

Put a small ad in your header or above the main content. Just have to zoom sorry if I have to zoom at all on a mobile. The site is useless in my eyes. I still see developers designing websites in tables for example. The end customer gets as a result a site from Face the facts. But to think that a desktop version of the site is what people want. Responsive Web Design as a whole makes sense but not using percentages for fluid grid layout. I do not recommend using fluid grid layouts at all. They are the devil and will soon be scrapped.

Great post but I have to disagree for the most part.. I think in the next 5 years every major website will become responsive, and everyone else will follow. Why not get ahead of the pack and get on it before then? This will add more difficulty to the user that he needs to remember it now and adjust himself based on the device that he is using for viewing. I will be running with responsive designs this year for all new clients.

Ill find out in but for now its a POD in my market. Following on from my previous comment I have done some testing with tablet devices, especially the BB Playbook. The results are more favourable for responsive fluid layouts than fixed-width. Basically, using fixed-width does not display correctly at all on the browser and it gets even worse when you switch to portrait mode.

The most common resolution at the moment is x , so you think you can safely create a wrapper with a width of px right?

This does not display correctly on the BB Playbook and god knows how many other devices. No weird removal or replacement of key elements such as sidebars. Whoever solves this is onto something. I found a thread on another forum where a webmaster found that using a responsive theme drastically cut down on sales conversions and email opt-ins from mobile devices, phones especially, and the site owners complained that images could not be zoomed, some buttons were too small.

When he switched to a non-responsive theme his results went back up to good levels immediately. I totally agree with everything said.

In fact a website designed with media queries is as far as responsive design needs to go. There is no need for percentage-based fluid grids. Waste of time and resources. Author mentions his blog looks fine on phone Only mentions iPhone Most of the world runs Android on less capable hardware.

So people running on Android phones put them down and use an Iphone for searching? If only I had the luxury of two phones…. The moment you have one person using another system, that produces a need to cater to that system. Makes a lot of sense, and as each minute passes, mobile is getting faster CPUs, faster cell connections, better screens. I think if you unto a business, you might need a responsive layout.

Sure, Responsive sites work for e-commerce or B2B — but are a lazy approach to the grand marketing opportunity of other business models. Why would a customer want the entire contents of a site available when they are clearly in ACTION mode on a mobile phone? More work?

Fat finger buttons, tap-to-call, tap-to-map, simple social media integration. Lean forward vs. Thinking responsive makes you think in the right track! Before I agree with you — your site is broke on mobile:P I see that you have some responsiveness going on with your site as the sidebar drops under the content on mobile.

However, your content overflows off to the right of the phone and your navigation is only partly viewable. Now, I absolutely agree with you on all 5 points. Glad to see somehow else challenging the default stance! Non-responsive design cost more, but also brings in alot more benefits.

The major problems with responsive designs is that they do not consider accesibility. You show an exemple of a site that hide navigation in the footer… but fails to provide a link to it in the header. I agree. Most modern non responsive websites look great on phones and tablets. It is a ton of additional work. Adaptive design is much better.

I definately agree that a lot of compromises are needed for a responsive site. I visit a website and I want a rich experience. I pay to have a big bandwidth. Yes, please create full content websites. A lot of mobiles are being sold, and the number is increasing but its just a trend. I want a big screen. And that is not something a mobile can have. Running a facebook app or having your favorite chat messenger may count as internet use, but its a specific use. I agree and feel that responsive design is merely responsive to the device.

How about responsive to content or the user? It would seem apple, the kings of brillian design and usability would agree. Having my website responsive has lowered my bounce rate in regards to mobile visitors. A huge improvement since changing from a fixed layout. I get what you mean about the dramatic changes from the desktop version and mobile versions of some RWD sites, but believe me implement the best practices and your mobile site using RWD layout will be very very user-friendly.

If you want to show us that ur website is the best example for responsive, then you are a huge joke. I too think that responsive design is not worth because 1st media queries does not supported by Internet explorer. How many css class will you adjust…mainly where inner divs may be calculated in px. Can any one make yahoo. I wonder…. Does everyone need responsive? Therefore would it make sense for people who answered no above to have a responsive website?

Are there sites that could benefit from responsive design? Are there people who can afford responsive? Therefore responsive is useful to some people and sites. Why was it a good choice for you? It just shows you really do not understand responsive web design. Certainly your critique of the shortcomings of what everyone says is a great example of RWD is as valid as any critique of any design. Very few designs, desktop or mobile, achieve actual perfection. That does not take away from the fact that it is a great design.

There are many RWD that suck, just as there are many desktop designs that suck. The cost and time of RWD is definitely better then developing separate experiences and maintaining separate code for mobile and desktop. Ignoring the fact that users will use your site from any potential device and the terrible experience that forcing a desktop view into a variety of view ports will cost you one way or the other sooner than later. The only case for not using RWD is if you do not care about users on other devices or you are already invested in one of the other approaches of providing separate experiences.

I agree, responsive design is an asset that we should be pleased to have at our disposal. Even just the smallest bit of changes based on screen size can make the user experience a million times better.

Developing separate experiences for desktop and mobile is all your left with for web these days. Every time JQuery is downloaded its a huge performance hit for mobile. Heck new calls to separate CSS files is not the way to build mobile sites. So I fond the whole idea of RWD as going down the wrong path. It is a buzz word but is actually not worth the time to even bother with just make a super simple version of your website for mobile.

Hi, responsive design Is so important. Look at your conversion rations go down with regular website on a mobile device. Twitter bootstrap makes it easy too.

Responsive design works fine IF the site is a simple site that is highly minimalistic in design. With responsive design content compression you also get into forever scrolling unless you figure out a conditional point to cut off the content. The Boston Globe is a perfect example of a responsive design that forever scrolls and takes forever to load on a smartphone. The underlying code for what works great on a phone vs. The other issue is content updating and trying to avoid updating two separate web sites… well, have you ever heard of dynamic pages?

I think web designers have the loudest voice here as they are often more focused on saving their world with design and less about using dynamic code to solve problems in content updating. It is going to be several more years before desktop usage declines. So the question is, do you develop a highly simple web site that sacrifices real estate on a desktop to accommodate a more simple phone experience… or do you develop a highly functional desktop and a highly functional mobile site both managed by one intelligent and efficient CMS..?

In too many instances, this leads to a desktop design that is compromised because mobile receives priority number one and desktop gets priority three. So my argument is against poor responsive design AND the cost of it. If I was designing a site today and my designer wanted to make it responsive, I would consider two things: 1 Is my desktop design going to suffer in any way?

If yes, then that needs to be fixed. Now, if the design firm does all of these things incredibly well, meaning the desktop design is awesome and flawless and the site is responsive making the mobile design useful and gorgeous, then I have no problem going responsive, as long as I can afford it at the time. The question is not if your desktop design is going to suffer. The question is… Are your users going to suffer? If I was to design a new website I would first check how my current site is actually doing in terms of usability.

If you have a website that works just fine on an Ipad and mobile phone, why the hell change to a new look? In the IT world a new technology mostly means more features and possibilities adding in complexity instead of improving current situations.

My brains were trying hard to find consistency and flow in the overwhelming responsiveness of some designs. The author of the article obviously considers it to be fine. My only comment is that there are a bunch of existing responsive WP frameworks that look great on desktop and mobile. This article only shows a few examples hand-picked to show what bad responsive design can look like. There are plenty of options for people on a budget who want a good looking responsive site.

They revolve around blogs, which are consumed in high quantities on mobile devices. Example: what about news sites, ecommerce sites, etc.? Looking at it from a larger perspective, a perspective with much larger audiences, I find your arguments a bit lacking.

I would love to see you expand your arguments and relate it a larger business sense. Blogs are one thing and only part of the overall discussion when it comes to the web.

Your article and criticism on Responsive Design is very genuine and agree with you on many of these points. Simply surf the internet and check out some responsive websites. They can make you go crazy. Hey Tom — The title attracts readers, but I think you wrote it thus to provoke discussion. This has nothing to do with responsiveness.

It has to do with UX-design. Bad design is bad design no matter if responsive or not. It costs more than not having any mobile adaptiveness at all. But is that a viable solution to most of the sites we make?

Read header 3. Totally disagree. If you check out rapp. True — and here we developers need to do a good job to make sure there actually is a load benefit — which the author also agrees on.

Adaptiveness is not about mobile phones but about device screen independence. Responsive sucks. A sidebar in mobile? I try to argue:. If the sidebar should be more important or not, or the navigation should be at the top of the web are design issues, not responsive technique issues.

Welcome to a multidispositive environment. The main weight of a web are the images. Since you can change the design images with css media queries, even the content images with some new techniques, you can reduce the load time. For those designers that take these things seriously responsive design means that you literally have to do several variations on your original design.

Which is ok, but very few clients are willing to pay for this largely because of the design hacks are fixated on how the design responds to different devices and screensize and not how it looks and feels on each of them. Look to your users for the answer. If you have a blog about web design your users probably know how to double-tap to zoom, and to rotate their devices for landscape, etc.

Exporting image assets from Sketch 2x for responsive web design. Wireframing can help to iron out the creases early in the design process, and this works well when taking a mobile-first approach to responsive web design. Modern design tools like Adobe XD , Marvel , and InVision enable teams to test prototypes on real devices, discuss feedback in context, and generally collaborate as a team until the layout works in all scenarios.

Employing a lean UX workflow where responsive design is driven by internal testing and feedback will ensure that the user experience works seamlessly across all platforms and screen resolutions before being presented to a real user for the first time.

Breakpoints are the key moments when a design is adapted to a new screen size; for example, a breakpoint could be defined at px, which is the horizontal size of most mobile device viewports. Responsive web design entails the process of designing websites that adapt to all devices, platforms, and screen sizes in terms of both form and function.

Designing mobile friendly websites means to adapt websites to mobile devices. Google defines mobile friendliness by whether or not tap targets meet the minimum requirements of being at least 44x44px, whether fonts are large enough to read, and whether or not content is cut off by the viewport, among other things. Subscription implies consent to our privacy policy. Thank you! Check out your inbox to confirm your invite.

Design All Blogs Icon Chevron. Filter by. View all results. Mobile Design. Author Daniel Schwarz. Daniel is a designer and developer by background, an author, and a collaborator with Adobe and InVision.