Responsive design has totally ruined desktop web experience (rant)

I don’t want to seem mean, or rude, but essentially…yes :wink: .

Edit @cpradio error upon posting. Nothing descriptive. No errors in console. These are the same errors I told you about a month agoish.

2 Likes

C’mon now… I said “I never done RWD at work”. I’m not sure how much credit I’ll get for learning Bootstrap as a hobby.

Bootstrap, and other frameworks, do not do RWD ideally. They do it so 99.999% of people will have no issues. They overcomplicate the process.

I do not equate using frameworks, with knowing how to properly do RWD. I acknowledge there are many ways to RWD, but using frameworks like that gets no point in my book :slight_smile: . They are good for getting the job done, though, so I can understand why they exist.

I thought that was the #1 (at least in popularity) way of doing it. Would be great if you can write up on how you do it. I’ve witness amazing RWD that was designed using bootstrap. For example, check this ‘paid’ (around $20) bootstrap theme. If that’s not RWD than I’m not sure what is. Still, I would like to see how others dow RWD.

http://webapplayers.com/inspinia_admin-v2.1/

It’s most popular because many people use frameworks :slight_smile: . Frameworks have their own benefits (standardized code, features, etc etc). It’s not ideal in terms of …what’s the word…Ok there is the easy way and there’s the “good” way. Frameworks are the “easy” way.

Frameworks don’t restrict design though. Well, they do slightly, but you can generall work around it, or add in your own code. I can completely understand how you could see amazing RWD via frameworks. Looking under the hood though, it’s a bit underwhelming.

As far as writing it up, I’ll do that sometime in the future. The essential thing is that you really just do a fluid website. I can make a almost fully RWD website with almost no media queries. However, I’ll throw in a media query to stack columns (when it gets to a width I deem stackable), or perhaps start the hamburger. I end up (99% of the time) having one media query that only has a handful of rules on it. Due to how I made it fluid from the getgo, and planned (in advance) for how this would go in mobile/tablet, I now need no tablet/mobile queries! I need ONE (maybe two) queries tops that just help it become fluid.

I’m working on a personal project. Great design (imo) so far. Love it. Guess how many queries I’ve used so far? One. And I have a perfect display in every device, every browser (that I’ve gotten around to testing so far.)

If I had used bootstrap for this, or another framework, I wouldn’t have that query “middleground”. I’d have to sort of change it for tablet, and sort of change it again for mobile. You get restrictive “preset” widths for media queries.

RWD basically involves you taking yoru browser, and moving it wider/smaller. Making sure it looks fine. Sound familiar? Yeah, that’s fluid. However, RWD also incorporates the idea of using media queries to change the display as needed. SO yes, that involves media queries to stack columns, hamburger at a certain width, etc. But ideally you shouldn’t need a lot. If you find yourself using a lot, you are definitely doing something wrong.

Again, that is RWD. Bootstrap DOES do RWD. They restrict your different views for mobile/tablet into specified widths. Your media queries should be fluid. They might be 500px on one site (for a certain element display), while on another website, maybe you need to change it up at 580! 600! Boostrap and other frameworks provide the preset media query sizes. Which is restrictive.

Unless you design your own templates, your own webpage, you won’t really see why sticking to those predefined media queries are restrictive. Each website is unique. You shouldn’t know what media queries you need b eforehand. They provide specific mobile/tablet sizes because it’s easiest to explain to people (and yes, no experienced developer willingly uses frameworks when going solo) how to get different tablet/mobile views. They see “medium” (the beginners) and equate that with tablet (as the framework docs explain). They equate “small” with mobile. Frameworks don’t teach the idea that it can vary site-to-site.

They need a way to give effective media queries for 99% of the population. That is why they do small/medium/large, etc.

Bit longer post than I wanted. I hope this makes sense.

As far as the media queries for stacking c olumns…with flexbox, I have a 3/2/1 column setup using only flexbox. No queries needed. Stacks as needed. That removes even more code that I need with media queries. Frameworks stick to prehistoric floats though. They need to cater to 99% of the population/browsers so they stick to archaic methods to make sure users don’t have to do anything else to make it work. They don’t care about code quality. They just want it to work.

I imagine a future where we probably won’t need media queries. Or if we do, it’s for VERY minor things.

On a very basic level, its mostly a case of creating css using lots of width: x%; rather than fixed px or em values. Then throw in the odd media query when needed to adjust layout or content. Its not rocket science.
There is a bit more to it of course, but that’s a start. I’m sure Ryan can give you better, more detailed info for specific issues.
RWD does not force people to use big images, big fonts, flat metro icons, smile at salad or what ever design trend you care to mention. You have the freedom to design any way you see fit.
Do try it, it’s not scary.

Or even just do max-width and let it auto size ;).

I get your point but I have to respectfully disagree on how using framework is the ‘easy’ way and rebuilding a wheel is the ‘good’ way. Framework is made to restrict design because it’s already built in w/ the developer’s opinion on how thing should be done… Example, pick any MVC framework and you’ll find many designs that’s prebuilt. Obviously, if you want true freedom in design that there’s only one way to go. I’m willing to bet that once you wrote 100 apps and made a re-usable framework, I am sure others say the same for your ‘framework’. As said, framework is purely made based on developer’s opinion… saying it that’s the ‘easy’ way and… own opinion is ‘good’ way… just seem… a bit… I for one are thankful there are frameworks :smile:

I’m glad they exist as well. They do have benefits. I have mentioned that in this thread :slight_smile: . They have their uses. Many people benefit from it.

However, I will be firm with this: I don’t really see how frameworks can’t be considered the bloated / obsolete way. They provide poor code, and restricted media queries.

I don’t see how they can’t be considered bloated/obsolete. Users still use them because it works. They just write HTML. They don’t understand how RWD works. They just don’t have the skill. And that’s fine. I understand that. Many businesses SHOULD be using frameworks. The standardized code they provide is so useful.

However, any developer who is experienced with RWD will tell you that frameworks should be avoided, if you care at all about code quality.

Frameworks provide a pretty sh** wheel. That is no exaggeration. So, in my eyes, I have no problems with not doing that. I have no problems with trying to build a Ford Mustang, when the frameworks option is a Nissan Versa. I guess that’s where our differences lie.

[quote=“sg707, post:28, topic:189922”]
Framework is made to restrict design because it’s already built in w/ the developer’s opinion on how thing should be done
[/quote]What does this mean? Its’ only restriction is the grid-based approach. However, frameworks can be added upon or modified. Either way, you can usually get a design done with frameworks. It’s just a matter of knowing how to combine the tools. You might not be able to envision how to do a design with the framework, but that doesn’t mean others can’t.

I like to think there’s always a way :wink: .

You can certainly show me designs, and I’ll try to envision whether it’s possible in frameworks. I use Foundation at work. I’m very familiar with frameworks. If you give me designs, I’ll honestly tell you whether I envision it being possible with frameworks. I’ll be honest :grin:. I’d LOVE to see designs that are impossible with frameworks. I’m not trying to be rude. I WANT you to be right. I want another reason to hate frameworks :slight_smile: . I just don’t see it, right now. I dislike frameworks, but I recognize the advantages. I also can see the disadvantages. Restrictive design isn’t one of them. People like to say it is, but I haven’t seen it.

Let me retract back. I thought you meant ‘framework’ in general but you’re talking about ‘frameworks’ for RWD. You maybe right on that. But if you mean ‘framework’ in general… at least the one I use… are wheels that I could never build on my own and I get them for ‘free’

1 Like

Frameworks for RWD (basically any CSS framework) does entirely different methodology than MVC or any backend framework. I don’t believe we can honestly compare “frameworks” in the same breath, if we are trying to draw a similarity between (e.g.) Bootstrap, to (e.g.) Laravel (or any MVC framework. I dunno PHP frameworks…)

The core differences between PHP/CSS in general is too great. The frameworks in general will have different…approaches to their idea of “frameworks”. So comparison is silly :slight_smile: .

Yes, I was talking purely about RWD frameworks. All of my posts have been directed towards RWD and its frameworks ;).

I use frameworks or not in the same way that I use themes or not, or use CMS or plugins or not - simply if the job dictates it or not.

When freelancing,
If I have a client whose budget I think I can meet if I use a framework to make it faster or easier, I let them know generally what I intend to do, and why, and I let them know what a better option is, if there is one, and what it’ll cost.

When employed… I basically just do what I’m told :smiley:

Edit: There’s also what you have to deal with that already exists. If it’s built with Bootstrap already, it’s almost never easier to rip it all out and start over. Bootstrap is a nice framework and it’s unlikely to cause you many problems from being bloated, not really - there are way worse problems most sites could tackle first. But… they are there. The project I’m on now is built on Drupal 7, and uses Backbone.js heavily, and Bootstrap as a CSS base. Am I happy about their choices?

A better question is, does it matter? :smiley:

In any case - are we agreed that the annoyance with RWD in OP is actually an annoyance at design trends that have little or nothing to do with RWD?

Yep. Emphasis on “nothing”.

3 Likes

Completely agree I have the exact same sentiments!!!

In general, I think responsive design is a good thing, but it has been embraced too religiously. There are many good use cases for device detection. Visitors on phones use the Web differently than visitors on desktops. So it makes sense to change the experience.

It is a little irritating is when you have to use a mobile menu because you’ve reduced the browser window. I have an iMac and rarely view websites at the full screen width. Why work from a “Mobile First” perspective, if your users are predominantly on desktops.

I have to admit that I am sometimes lazy with Bootstrap. For example, I used to design and build carousels individually. Now I always use the Bootstrap one and usually use the included buttons. This discussion in making me reconsider these fine points.

Right - and people DO change the experience.

Not everyone does. Again, RWD merely brings tools. You can do it however you want. I do desktop-first.

But FYI more and more are visiting via mobile device. An alarming amount. It grows every month.

It doesn’t matter whether you do desktop-first or mobile-first. It doesn’t matter. They are mirror opposites. It’s not like you’re forced to do any website behavior differently if you do mobile first apposed to desktop first.

I still don’t see how any of these are valid points against RWD.

Good point.

Know who your site visitors are

1 Like

Its not an argument against Responsive Design. I love it and use it every day, but there are times when other strategies are better. None of the major eCommerce sites use it. Amazon, Etsy, Ebay, Walmart, Target, Lowes, etc… If all of these sophisticated companies have opted out, they must have unanimously decided it is inferior at converting customers than dedicated solutions.

That’s a huge assumption to make.

They would rather the users use their actual apps. Websites that big probably SHOULD have their own app. Users prefer that probably. It’s a lot easier to just open an app, rather than open the browser, and load up a website.

That doesn’t mean that it’s the best option for 99% of websites though.

It’s a lot easier to just build an app, rather than converting their gigantic website to be fully responsive. They are corporate giants. They don’t need responsive websites. The users are going to visit them anyway. Penalizing because of the Google update? Doesn’t matter. They will still get results shown because they are that big.

They don’t play by the same rules we all play by.

Comparing RWD best practices, to what corporate giants do, is probably a bad thing to do. They are not similar to 99% of websites.

1 Like

So if we get away from theory for a moment. Let’s consider two scenarios for an e-commerce site.

  1. Fully responsive design
  2. A site that uses device detection and switches to mobile templates for mobile devices. The mobile templates in this example adjust to different screen widths.

What do you think the difference in conversion rate would be on an ecommerce site between these two examples?

My answer would be:
It depends…

To take a slightly different spin on your comment: For massive e-commerce sites it is a better business decision to use an app or mobile site because the expense of switching over to responsive is greater than the benefits of that would be seen by increased sales. There may be other somewhat smaller but established sites where this is also true.

This is just one example. It is a big messy world.

It is important to remember our fundamental purpose as Web designers is to look at the real world of client needs rather than to bow at the altar of philosophical constructions.