Is there a way to make my webpages become fluid only on lower resolutions?

Report · Apr 14, 2017

I'm working on a website in Dreamweaver CC 2015 that I want to be fluid, but I would like to find a way to make it responsive only phones and tablets.

Basically, an example would be...

On a desktop monitor at a resolution of 1280 x 720 and above, I would like the website to be a regular non-responsive site, allowing for the ability to use the IE11 "ctrl +" method (and other browser's equivalent) to zoom in and out without distorting the page to "fit the screen."

However, for phones and tablets, I would like to make the site become responsive/fluid at that point, adjusting everything to display accurately on the smaller mobile devices.

Is there a way I can do this? I have been trying to find a way from within Dream Weaver, but so far I have not found anything. I don't know if there is a feature, or I'll have to do some coding to get something like this done? I know I would have to do it for every page as well, since the site will be static.

Thank you for anyone's ability to help. ;- )

Report · Apr 14, 2017

Use a media-query set to the minimum size that you do not wish the page to be responsive, then set a minimum and maximum width for the body tag.

The zoom in/out should work in IE even in a responsive site, unless you set the user-scalable attribite to disallow it. Which is now ignored in iOS10+ deveices, and is planned for implementation on Android.

Report · Apr 14, 2017

Have you heard of media queries?

Assuming you know css you can change the css properties at any break point. For instance to change the background color of a page at 768px wide you would use a media query, like below:

@media screen and (max-width: 768px) {

body {

background-color: yellow;

}

You also need to include the viewport meta tag in the <head></head> section of your page:

Usually these days responsive designs use %percentage widths as its easier to manipulate for any device.

I dont know how successful it will be to try and take a fixed px with design and manipulate it to become responsive. Usually its a non-starter, depending on the complexity of the set-up

Report · Apr 14, 2017

I'm working on a website in Dreamweaver CC 2015 that I want to be fluid, but I would like to find a way to make it responsive only phones and tablets.

I'm sorry to say this, Lizzie Jo, but this made me laugh.

Unless this site will be viewed on a corporate intranet and everyone has exactly the same equipment & software, it's not a realistic approach to web design anymore. Some people have super huge, high pixel density displays and other people have average sized & density displays and still others have everything in between. I'm not even talking about people who use TV screens for internet browsing. Nowadays, you really need a fully responsive web site that everyone can enjoy.

Short answer: Use percentage widths and CSS media queries.

Or jump start your responsive site with a framework like Bootstrap. Like it or not, rebuilding your site with a framework will save you a lot of time and coding agony.

In Dreamweaver CC 2015 or 2017, go to File > New > *see screenshots below*.

After you Save & name your newly created file, DW will create the assets folders for your responsive project.

Have fun with it!

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 14, 2017

I read up more on media queries. Although, I am somewhat confused on what I have to do. I am not an expert by any means.

I think there might have been a misunderstanding in what I want to do...?

(I am actually using 2017, I made a mistake and typed 2015, sorry.)

For an example, let's take www.amazon.com. On my desktop, nothing attempts to "fit my screen". If I use IE11 to zoom in, a scroll bar will appear at the bottom, and I'll have to move from left to right, to read the text, or view a complete image.

However, amazon has no problem scaling itself accordingly to fit a mobile device, such as a phone or tablet. The website does not appear extremely small and text and images don't "stretch the screen.

This is more or less what I aim to accomplish.

I don't have a website built yet at all, so I don't need to change anything I have already done. The main idea is simply a screen that does not completely uniform Itself (text and images) to a desktop view.

In fact, the website we are using right now, is capable of the same thing, is it not?

Report · Apr 14, 2017

There are a number of ways that you can achieve your objective. Just to name two

using Bootstrap see Building Responsive Websites Using Twitter BootStrap — SitePoint
using Flexbox see https://www.webdesignerdepot.com/2015/09/modern-web-layout-with-flexbox/

I prefer to use Bootstrap because it is a complete framework, meaning that it contains a lot of ready made components that slip seamlessly into your design.

The Flexbox way requires coding from scratch. Components will have to be coded while others, like a slider, are available on the internet.

Wappler, the only real Dreamweaver alternative.

Report · Apr 14, 2017

I have continued researching, and this is specifically what I would like to do.

It was not responsive web-design I was trying to accomplish at all. Like I said previously, it was something like how amazon works.

I want my website to automatically adjust its overall size according to the device that is viewing, like how amazon or other sites adjust. The layout in its entirety changes it doesn't adjust positioning of anything to fit into a certain style. How could I go about setting my website up to do this? This site will be designed in a way that will allow a mobile friendly experience even with the website shrinking down, as amazon does. I just won't be relying on a responsive web design. Is there something I can do to make my website fit into all devices based on shrinking it down as a whole? I would really appreciate the help.

Report · Apr 15, 2017

What you are looking for is device detection, and loading the relevant html, css, etc depending on the device.

There are a number of solutions to doing this, (all paid for) and all requireing a very good knowledge of how they work. None will stop users zooming in on the page anymore though, as device and browser manufacturers are now enabling such actions by default.

You will have to write at least 3 different sets of html, css, etc. in order for such a set-up to work, which is why such a feature is mainly limited to large company's that can afford the cost of maintaining such an approach and then continually monitor that devices and browsers that are being detected correctly, and adjusting as required should any new devices be introduced that you have not previously accounted for.

The above reasons, are also why most smaller web site designers and developers, opt for the responsive solution, as it is more cost effective for smaller sites.

Once you have decided on doing device detection, then it is simply a matter of building the relevant number of alternate layouts and ensureing that the device detection service script directs to the appropriate layout, you also have to do this yourself, as the script will only tell you the device/browser being used, which layout to deliver to the user is then dependant on what you have programmed.

Report · Apr 15, 2017

Device detection is a very flawed approach because the list of user agents is massive and constantly changing. And some user agents pretend to be others. So you can never be certain about what you're capturing. Bags of money won't fix that problem either.

While I think Amazon does some things very well, web design is not one of them. Depending on the user's viewport size and display settings, the overall user experience on Amazon is just average to poor. When zoomed, it throws a horizontal scrollbar which in my book is unacceptable. This is not something I would want to emulate.

On the other hand, Apple has a web site that works for everyone. Users are not constantly fighting with limitations in the layout because it's responsive. I think it's fair to say that Apple better understands their users and Amazon has missed the boat.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 15, 2017

I don't know if you have ever looked at all the Amazon front end code, and I know I often complain about Bootstrap using excessive code, but Amazon makes Bootstrap look like a positively compact solution.

Also what the OP should consider, is what layout does one deliver to the 14 inch iPad Pro In landscape, as it returns the device as iPad, and the browser as Safari iOS.

Report · Apr 15, 2017

AWS (Amazon Web Services) was born out of the code base they created for the busiest shopping site in the world. Of course it's excessive. It's Amazon.

Also what the OP should consider, is what layout does one deliver to the 14 inch iPad Pro In landscape, as it returns the device as iPad, and the browser as Safari iOS.

And that's just one example. There are many more. You could drive yourself crazy and still never have a perfect solution for every device out three.

At least with a responsive site, you're dealing with fairly straightforward viewport sizes; not endlessly long lists of past, present & future user-agents.

https://techblog.willshouse.com/2012/01/03/most-common-user-agents/

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 15, 2017

I see... Well, here is one thing I would like to achieve, so perhaps someone could help with it? What I want seems to be possible through media queries upon further research, like the first two responses I received. I simply would like to make certain that when not using a mobile device where you can zoom in with two fingers and such, that on a desktop users will be able to zoom in on a picture and that picture will not force the full image to always appear on the screen, no matter how much you zoom in.

Also, my other topic was for some reason rejected for being "the same in nature" as this one here, although the question was indeed different on an entirely different subject. It had nothing to do with a responsive or non responsive design or fitting on mobile or anything. I wanted to make the text on my site "not bunch up" when zoomed in on. I'll mention it here in case anyone can help with that.

As an example, when I say bunching up, Amazon's text does not bunch up when you zoom in on the webpage. However, if you visit Wikipedia, the webpage's text will bunch up if you zoom in.

The main thing I would like to be sure of in either case is that when on a desktop, my users will be able to zoom in on my webpage if need be (without using the magnifying glass in windows) and be able to see small images or details in an image.

Report · Apr 16, 2017

I think there's a disconnect between what you want and the way most people interact with their web devices.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 16, 2017

Amazon's text does not bunch up when you zoom in on the webpage.

Yes. but it throws a horizontal scrollbar which is worse in many ways.

I think what you want is Adaptive Web Design. Create several fixed width layouts adapted for various device widths. The question then becomes how many device widths to support -- 4, 6, 8, 12, 16.....?

Adaptive web design - Wikipedia

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 16, 2017

And so we come back to device detection!

There is a way around using a device detection service, but quite honestly if someone has to ask how to do that, then they do not know html and css enough to implement it.

Simply put, use a css link in the html to deliver the viewport specific css to the device, then detect which css file has been asked for using javascript, then use ajax to deliver the correct html layout and assets that is specific for that viewport/css. This requires a lot of planning, and a good knowledge of both front and back-end code.

That is a very, very basic description of the process, and is an adaption of delivering content specific to a device, and we all know how code and resource intensive such a system can be when done in-correctly, and how complexed and time consuming developing such a system is.

To the OP, if you have to ask further how the above is done, then do not expect a clear answer, as it is a 'if you have to ask, you cannot do it' method.

Report · Apr 16, 2017

"If you have to ask, you cannot do it" is complete and total rubbish, I am sorry to say.

To clarify what I want to do. Visit this site on your desktop. Then visit it on your mobile. Nothing changes, it just shrinks. Is this possible?

Serebii.net - Where Legends Come To Life

Report · Apr 16, 2017

Lizzie_Jo_Websites__11 wrote
"If you have to ask, you cannot do it" is complete and total rubbish, I am sorry to say.
To clarify what I want to do. Visit this site on your desktop. Then visit it on your mobile. Nothing changes, it just shrinks. Is this possible?
Serebii.net - Where Legends Come To Life

Just build a site like its 1990 - use fixed width tables.

Seriously why do you want to build something that is not mobile friendly?

If you dont take responsive into consideration the site will just 'shrink', as you say, to the width of the device it is viewed in but there seems no reason why anyone would set out to do that from a starting point of now because you are forcing the user to zoom for it to be readable.

Report · Apr 16, 2017

There is a little menu option, included in all browsers, it is called -

"view source"

It will tell you how it is done.

Report · Apr 16, 2017

pziecina wrote
It will tell you how it is done.

YIKES!

CSS - http://jigsaw.w3.org/css-validator/

HTML - http://validator.w3.org/

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 16, 2017

Alright, for the record, the way this site is built is not up to me, I'm not the one making the decisions. Yes, a responsive design is indeed better globally, there is no denying that, and I never did. What is mainly required of me, however, is that I make the images not fixed to the screen going upwards.

Even on apple's website, while it is responsive as you said Nancy, when I use "ctrl +" the images will still become larger on the screen, not fixing its dimensions. In Dreamweaver, using a responsive design template, like the bootstrap, it forces images to always appear the same size. That feature is what I need to rid of somehow, like all of these seemingly responsive websites can apparently do. If I can pull that off, I will probably be able to convince the one making the decisions that a responsive design will work.

Report · Apr 16, 2017

What can do that is the html picture element, -

https://responsiveimages.org

Report · Apr 16, 2017

In Firefox, use Zoom > Text Only. The text size will increase but not the images.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 16, 2017

I'm trying do it the other way around? I actually want the images size to increase, the problem is that they will not when I zoom in. I want them to be responsive for mobile devices, but their size will still increase when zooming in.

Report · Apr 16, 2017

I don't understand. Are you saying you want mobile images to upscale beyond the viewport dimensions on zoom? If so, that's a tall order.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 16, 2017

Are you saying you want a lightbox or possibly a rollover effect?

Lightbox, when the user clicks on or taps the image it enlarges.

rollover, when the user hovers over the image it enlarges.