Fit Website to Dreamweaver View Area

[zeker45214135]

Hi, i am working on a 1080p monitor, however I am developing a website for a 4K monitor.

The problem I am having is that the website is so large, in Dreamweaver I can only see 10% of the page at a time in design view.

How can I fit the website to the viewing area on Dreamweaver so i can see what im doing?  Viewing only 10% of the website makes design view pretty much worthless.

I want to zoom out or fit to page as they call it in PS so i can see the whole page and program it fast. I have 50 pages to edit and this view just doesn't work!

Thanks.

[pziecina]

First question - Is the site to be viewed on other none 4k monitors/devices?

Second question - Why are you even trying to use Dw's design or live view, (simply will not work, and trying to build for 4k monitors that way is a quick way to insanity)?

Third question - Do you have any 4k devices to test on, (tablet ot tv)?

Do not even try using Dw's or your browsers zoom to test the page.

The main problem you will find is images, and the use of srcset is a must. Browsers will often 'enlarge' text proportionally as required automatically, so unless you know what 4k monitors you are coding for you could run into all kinds of problems. What you should do if the site is to be viewed on other none 4k monitors or 4k devices is code the site as normal then use media-queries (detecting viewport size and resolution) to 'enlarge' the required elements so that they are proportionally correct for the larger 4k monitors or devices.

[zeker45214135]

First question - Is the site to be viewed on other none 4k monitors/devices?

-No it is to be used for a Kiosk Touch Screen in the Shopping Mall that is 4K.

Second question - Why are you even trying to use Dw's design or live view, (simply will not work, and trying to build for 4k monitors that way is a quick way to insanity)?

-The client sent me html pages sliced in PS and I need to add many rollover effects and hyperlinks that were not added in PS.

Third question - Do you have any 4k devices to test on, (tablet ot tv)?

-Yes I have the clients 4K monitor here but I can not install design software on it as it belongs to the client , it is only to be used for testing uploading the kiosk site.

I normally use DW to do this for all my Kiosk Clients, however this is the first time with 4K. Now im not sure how to go about it. DW made it so easy to code slices for my clients. Also the client does not want me to design the gui in 1080p and upscale it. That would defeat the purposed use of a $8,000 4K monitor my client purchased.

[pziecina]

O/K.

Throw out the ps slices the client has sent you, trying to build a 4k site, (or any site these days) using slices is asking for trouble. You need to start with the images as 4k, but nothing else.

what is the OS the client will use, and what size monitor?

Is the the clients 4k monitor able to connect to a computer?

If it is you have 2 options -

The first is to use Dw 2018, (latest version) then set up Dw to 'send' live view to the clients 4k monitor.

The second is to set up you computer to a dual monitor system and open the browser in the clients monitor.

(question - as the clients monitor will probably be touch screen, have you thought about how the touch interface will be implemented?)

For quick testing, if you have an iPad or similar you should place the iPad at the estimated user distance from you, then use the iPad for quick checks to the layout, (images, text, touch actions, etc).

[zeker45214135]

Thank you so much for your help! Nancys solution did give me the fix i was looking for however:

Throw out the ps slices the client has sent you, trying to build a 4k site, (or any site these days) using slices is asking for trouble. You need to start with the images as 4k, but nothing else.

CSS would be great however this is uploaded to a local server installed on the 4K computer. Using sliced images is what the client is used to doing and the easiest route being there is no SEO or benefit from using text. Also the client has his graphics team who designed the slices. Asking them to redo it could cause me some grief. Best to just go with it this round.

what is the OS the client will use, and what size monitor?

They are using a MS (4K AIO) Surface Studio Desktop

Is the the clients 4k monitor able to connect to a computer?

Yes it is a computer in itself.

If it is you have 2 options -

The first is to use Dw 2018, (latest version) then set up Dw to 'send' live view to the clients 4k monitor.

The second is to set up you computer to a dual monitor system and open the browser in the clients monitor.

(question - as the clients monitor will probably be touch screen, have you thought about how the touch interface will be implemented?)

Wow this is a great idea to send live to the 4K , i didnt know this was possible. The touch screen will be coded with Ajax sending JSON to a .JS server to handle the I/O.

For quick testing, if you have an iPad or similar you should place the iPad at the estimated user distance from you, then use the iPad for quick checks to the layout, (images, text, touch actions, etc).

We do have a 4k Itouch pad here at my work! This is a great idea! I wonder how to set it up to push the live view to the touchpad or MS Surface Studio?

[Jon Fritz]

zeker45214135  wrote

We do have a 4k Itouch pad here at my work! This is a great idea! I wonder how to set it up to push the live view to the touchpad or MS Surface Studio?

There are a few ways to do this.

1. Use DW's Device Preview (frequently breaks) Preview, inspect Dreamweaver web pages on multiple devices

2. (my preferred method) Keep all of your sites within a testing server installed on your development machine. Any device attached to your local network will be able to get to the site, and display it in any available browser, by going to your machine's local network IP address, followed by the site's root folder, something along the lines of 123.45.67.89/myAwesomeSite

[pziecina]

To set up the iPad for quick reference whilst working, use the IP address as Jon suggested. It does mean that one must scroll both vertically and horizontally whilst checking, but for quick checking if you do not have the space to set up both monitors it is a good way to work.

What you will find to be the biggest problem between normal monitors vs 4k, is that what you can easilly see on say a hd monitor, such as images not 'fitting' correctly or the resolution being off, is that on 4k monitors it is often only a 'feeling' that something is wrong, (eg - images that are not the correct size for whatever reason, have a 'feel' of a slight shadow around them) but due to the resolution it is not immediately apparent. Also as you are probably already aware, text must be bigger than normal, but on 4k monitors the device driver may automatically 'enlarge' the text to be the equivalent size of when viewed on a standard hd set up, (this will be immediately apparent, but check on the surface pro early, to save you changing the text size).

If the text is part of an image, check that it is not blurred very early, as any text in an image tends to look bad if the image resolution is even slightly off.

[zeker45214135]

Thank you pziecina.

use the IP address as Jon suggested.

The 4K Touchscreen AIO Computer does have Windows Apache Server Installed for serving content over its own IP.  This is very helpful for testing on the 4K. We just cant install the whole Adobe Suite on it unfortunately because ultimately it is the clients pc and will be delivered to them.

Also as you are probably already aware, text must be bigger than normal, but on 4k monitors the device driver may automatically 'enlarge' the text to be the equivalent size of when viewed on a standard hd set up.

Yes the pc was enlarging content 200% / up scaling HD content to 4K however we had to disable this (turn it back down to 100%) because the client wants true 4K and not simulated or up scaled HD content.  This also ads to design issues because many software's are not designed to work on 4K including Windows 10 ! So everything looks awkward in 4K but the GUI images are astounding and breath taking so in the end it all works its self out.

Thank you so much all for your input, I appreciate it and I hope this thread can possibly help someone looking to work in 4K in the future.

Good Luck to you all.

-Zeke

[Nancy OShea · Accepted solution]

Collapse panels & zoom out with Ctrl+ - (minus) a few times.

[pziecina]

Sorry Nancy, that 'fix' does not work for 4k monitors due to the size, as unlike tablet devices any imperfections in the layout, (such as image quality and readability) do not show up.

The only way to code for larger 4k devices such as monitors or tv's is to test on 4k devices and use media-queries to the required resolution and viewport size.

[zeker45214135]

Nancy this did work for me!!! It shrunk it down enough so i can see the whole page now. 😃 JOY!!!!

I actually tried this before with the  cntrl+(minus) on the number pad and it didnt work! Now I tried it with cntrl+(minus)  on the keyboard and lo and behold the glory of fit-to-page is among us. Why is this so difficult! It should be in the menu bar! Thank you Nancy!