Inspiring

Answered

I am looking for opinions on media queries and responsive design...?

Forum|Forum|8 years ago
July 1, 2017
3 replies
1020 views

I finally convinced my client to go with a fully responsive design (yaaaay), at least to an extent.

Are media queries still a thing? Is that the standard format I should be using to put together this website. I was given two alternatives, and I need opinions on which is the better between the two...

Option 1: I was told to make a "fully responsive" website, where I will make media queries at different breakpoints for different screen resolutions.

Option 2: Or I would simply make two versions of the site. One for desktop and the other for general mobile devices with a fully responsive layout.

In option 1, I was wondering if using media queries to switch between the desktop version and the mobile version (so to speak) could cause any problems with todays devices. Will it truly detect the resolution of the latest iPhone and Android devices and make an accurate breakpoint to switch down to the correct layout (that I will set up using CSS/media queries), or might there be a problem with that? The desktop will include tings such as a different nav menu and website banner that will absolutely not work on a vertical device such as a phone, so I need to make sure that everything will be working at the different break points.

If there is a problem here, then would it be better to make to separate versions of the same website as some providers do? One for mobile and one for desktop (under the same domain of course, but separate styles entirely, prompting the user to select whether they are on a mobile device or a desktop computer/laptop).

Thank you to anyone who can chime in on this question. I am equally capable of both solutions, but which is the better for the user...?

This topic has been closed for replies.

Correct answer Nancy OShea

Media Queries, a resounding YES!

Use a responsive framework like Bootstrap or Foundation to build 1 website for all devices.

2 websites are not practical or efficient for anybody. If you make changes to one, you must make changes to both and that gets really old in a hurry. Also Google won't give you any brownie points for having 2 websites with duplicate content. So option #2 is not even an option.

Nancy

pziecina

Legend

My advice would be to look at using css flexbox for responsive layouts.

Unfortunatly they are not the easiest thing to learn, as you have to almost forget everything you previously learned about css layouts, and Dw does not i think have the best support possible for them.

O

osgood_

Legend

I'd agree on the single site/media query combination but not so much on the Bootstrap/Foundation framework approach as it means learning a completely new workflow and one that isn't very good. The current version of Bootstrap(3) is not up-to-date with modern techniques. I would not waste your time learning Bootstrap(3) but look at Bootstrap(4) if you MUST use a framework because its close to being released and has been completely re-written to include a more up-to-date approach for producing responsive websites. The last thing you want to do is learn something that is 2 years behind and is coming to the end of its life-span.

Having said that if you are adequate at writing code you most certainly should avoid all frameworks as they lock you into an environment you will find hard to escape from and you will always be at the mercy of when the developers of that framework decided to include the latest methods (most frameworks are a way behind the curve).

Producing a responsive website writing your own code is NOT that difficult. Learning a framework, in my opinion, would be considerably more difficult and frustrating because you need to learn that frameworks css classes and coding, a lot of which makes little sense and can be overly complex to reverse engineer, which you will have to do.

Nancy OShea

Community Expert

You & I don't agree on frameworks & we never will . But the OP should at least investigate to see what the pros & cons are.

Ask yourself why 20 million web sites are using frameworks. There must be some compelling reasons for it, right?

If time is a concern *and it usually is*, frameworks will save you a lot of tedious coding time providing you understand how they work. Know the framework & cut your development time in half. Less time means less money. BTW any decent coder can learn to use a framework in 1 weekend. It's not rocket science.

Nancy

Nancy O'Shea— Product User & Community Expert

pziecina

Legend

https://forums.adobe.com/people/Nancy+OShea wrote
Ask yourself why 20 million web sites are using frameworks. There must be some compelling reasons for it, right?

lets not get into that discussion again

But given a particular framework has been around for 8 years now, and 54 million new sites are published ever year!!!

Nancy OShea

Correct answer

Community Expert

Media Queries, a resounding YES!

Use a responsive framework like Bootstrap or Foundation to build 1 website for all devices.

2 websites are not practical or efficient for anybody. If you make changes to one, you must make changes to both and that gets really old in a hurry. Also Google won't give you any brownie points for having 2 websites with duplicate content. So option #2 is not even an option.

Nancy

Nancy O'Shea— Product User & Community Expert

L

Lizzie_Jo_Websites__11Author

Inspiring

Thank you Nancy. That was the answer I was hoping to hear, honestly. It would be a much greater hassle trying to put together two separate websites.

I had been trying to find a solution for my client's problem here, for months. I finally convinced them to use a fully responsive design, and so long as media queries really are the best option, then I will be going with that. It is a better user experience. Thank you again Nancy, through the most of my topics, you have seemed to be the only one who understood exactly what I was trying to do!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded