Regular screen vs. Wide screen

einat · August 27, 2013

I have a regular screen at home. All my customizations are based on what I see on that screen.
Apparently, on a wide screen my site looks awful.
The banner is not wide enough, the slideshow and text box look like they are randomly positioned on the homepage.

Somewhere in the tutorials I do recall that it was said that with the new SM this is not an issue to be worried about, everything fits automatically.

So I'm a bit lost here. I'm not sure what I can\should fix\change.
I did set the layout to "stretchy".
If I created a wider banner - I don't know what it would look like on a regular screen. I don't even know how wide I need the banner to be (as it is now, fitting perfectly to regular screens, it's 1280x130 pixels).
If I created a wider one, say 1660x130, would it keep it's proportions on a regular screen, with everything in it appearing smaller?

In short, how do I go about customizing a site that would look good on any screen?

In fact, I guess most people work with one screen, so they're left guessing what their sites look like on other types of screens.

leftquark · August 27, 2013

einat wrote: »

I have a regular screen at home. All my customizations are based on what I see on that screen.
Apparently, on a wide screen my site looks awful.
The banner is not wide enough, the slideshow and text box look like they are randomly positioned on the homepage.

Somewhere in the tutorials I do recall that it was said that with the new SM this is not an issue to be worried about, everything fits automatically.

So I'm a bit lost here. I'm not sure what I can\should fix\change.
I did set the layout to "stretchy".
If I created a wider banner - I don't know what it would look like on a regular screen. I don't even know how wide I need the banner to be (as it is now, fitting perfectly to regular screens, it's 1280x130 pixels).
If I created a wider one, say 1660x130, would it keep it's proportions on a regular screen, with everything in it appearing smaller?

In short, how do I go about customizing a site that would look good on any screen?

In fact, I guess most people work with one screen, so they're left guessing what their sites look like on other types of screens.

Einat,
There's a sticky at the top of the forums that takes you to some useful customization tools: http://www.dgrin.com/showthread.php?t=238545

The one you should check out is called "Screenfly" (https://quirktools.com/screenfly/) - it'll show you how the site looks at different resolutions/widths.

How are you specifying the widths? For my banner's I've used %'s and not absolute widths. Can you supply some screenshots? We can't really help out if we don't know what we're looking at

einat · August 27, 2013

Hi,

My homepage as I see it on a regular screen (1280x1024 px) - attached
I've set the layout to stretcy (attached in the next post- the layout settings).

As for the header:
The width of my banner is 1280x130 pixels.
The banner is on the left with container width 15%, left margin 1 px, right margin 12px
Next is the navbar with container width 85%, left margin 45 px, right margin 12px

The banner itself "used" to be a photograph, it is now stertched to... (well in Hebrew I'd have a proverb for this). If I have to stretch it even more to fit a wide screen, I would still want the text (my name in both languages) and that "thing" (weather vane?) to keep their sizes - and I'm not sure this is possible.

einat · August 27, 2013

The layout settings

einat · August 27, 2013

OK, here's what I did. Thanks for pointing me to Screenfly.
I set the layout to fixed, but fixed it at 1280px, centered.
So now it looks fine - I think. I don't really love the huge margins on the side but maybe that how sites are displayed on wide screens.

If anyone could share how they've dealt with adjusting their sites to both regular and wide screens, I'll truly appreciate it.

Hikin' Mike · August 27, 2013

einat wrote: »

OK, here's what I did. Thanks for pointing me to Screenfly.
I set the layout to fixed, but fixed it at 1280px, centered.
So now it looks fine - I think. I don't really love the huge margins on the side but maybe that how sites are displayed on wide screens.

If anyone could share how they've dealt with adjusting their sites to both regular and wide screens, I'll truly appreciate it.

Since my main website is a Wordpress site, it uses fixed layout. I wanted to copy my Wordpress site to my Smugmug site, so I picked a fixed layout as well. There is probably a lot of "wasted space" in the left/right on the larger monitors, but I'm not concerned about it. FWIW, I also use a 1024 x 768 monitor.

denisegoldberg · August 27, 2013

einat wrote: »

OK, here's what I did. Thanks for pointing me to Screenfly.
I set the layout to fixed, but fixed it at 1280px, centered.
So now it looks fine - I think. I don't really love the huge margins on the side but maybe that how sites are displayed on wide screens.

If you want your site to look good on any size screen then I'd recommend that you not use a fixed width banner image. Instead you should break it into pieces. Created a very small image that is the desired height of your banner but that is narrow in width. Repeat that image across the width of the screen. Place an element to the left that aligns with the side of the screen. Place elements on the right that float. They will move as the screen is resized.

I'd highly recommend that you use the screenfly tool at http://quirktools.com/screenfly/. You can bring up your URL then click on the different devices and sizes in the navbar. Your current design is ok on a desktop and a laptop but not on a netbook or anything smaller.

Make sure that your site looks good on a tablet or netbook in addition to a large screen. Remember you have no control over the type of device your viewers will choose to use.

--- Denise

einat · August 27, 2013

Thanks, Denise and Mike

Seems like I'm in over my head. I know, as Denise pointed out, that I can have no control over the type of device my viewers will choose to use. Worse, I can't tell if they're holding it vertically or horizontally.
When checking out things (some nice SM sites like your own) on Screen fly, trying out the tablet options and rotating them - most sites didn't adjust too good. So I'm in good company.

I'll to somehow figure it out.
Looks like the collage style galleries work better, but I really like the smugmug style.

As for the header, I'm not sure I understood what you meant, Denise. By breaking it up and re-assembling it, would it still look like a complete picture?

denisegoldberg · August 27, 2013

einat wrote: »

As for the header, I'm not sure I understood what you meant, Denise. By breaking it up and re-assembling it, would it still look like a complete picture?

No - the background would be consistent across the width of the page. If you broke it into pieces with a curve in it the curve would repeat. But it would give you a strip of color on which you could place your words. Or you could simply use a background color instead of an image. I know that removes a design element though - it's really your decision. The fixed width header as you have it set right now does not work on a small screen though.

You also have the option to collapse the menu items for mobile. When you look at your menu options, on the basic tab scroll down. The last property in that list is collapse for mobile. I have my menu set to collapse on mobile, it opens as soon as you click it but it doesn't take away from the site when you are viewing it. Not perfect, but it's better than words taking the space that could be used for photos.

--- Denise

einat · August 27, 2013

Thanks for reminding me... I did set "collapse on mobile" for the side menu, forgot about the top one.

I'll have to give the banner a lot of thought and time, I never would have worked out your suggestion.

aschendel · August 28, 2013

einat wrote: »

Seems like I'm in over my head. I know, as Denise pointed out, that I can have no control over the type of device my viewers will choose to use. Worse, I can't tell if they're holding it vertically or horizontally.

For people who have issues with various screen-size issues, I'd change back to a "stock" copy of your theme and see how it works that way.

As I mentioned recently in another post you were in, I have intentionally limited my hand-tweaking of the new SM, instead letting the real professionals, who have a very strong interest in maintaining cross-browser and screen/resolution compatibility (of course they're not 100% perfect either). My Sierra-based site has been absolutely great on all of the resolutions I've seen it at -- way better than anything I've ever built,

.

Andy

jfriend · August 28, 2013

One thing everyone should remember is that any web design must be thoroughly tested at many different brower window sizes. You should NEVER be under the delusion that if it looks good on your screen, then you must be good for the rest of the web. Every single viewer can have a different browser window size. And, remember that screen size has little to do with it too. It's the viewable area inside the browser window that determines the viewport for your web site. This is even influenced by how many toolbars the user has displayed, what OS they are using, how big they've set their browser window, etc...

Within the constraints of how large your monitor is, you can simply change your browser window size by resizing the window and you can see what your site looks with a lot of different viewable area sizes set.

Good web design that works well across many different browser window sizes is not a particularly simple affair and requires a strategy, a rich set of techniques to use to achieve the strategy, good execution and lots of testing at different sizes. It's not uncommon to conceptually have three general design points (phone, tablet/small laptop and larger desktop). Your design strategy may smoothly flow between these three points or you may design some size trigger points where the design changes its strategy based on the size.

einat · August 28, 2013

Thanks, Andy and John
I wish there was a warning that altering the structure of a design would result in it not looking good on different screens. It's not that the CSS codes that I've used (RCP, colors and such) would matter, but I did change the whole structure, with a side bar, small slideshow and text box. It's not perfect, but I don't like most of the designs - though might work on all screen types.
I think I'm going to leave it as it is for now. On my cell-phone it doesn't look that bad, and mine has a rather small screen.
Maybe it's just that I've given up, maybe because I've hardly read a book in the past month (not to mention cleaning my home...).
The new SM virtually swallowed me.

Darter02 · August 29, 2013

jfriend wrote: »

One thing everyone should remember is that any web design must be thoroughly tested at many different brower window sizes. You should NEVER be under the delusion that if it looks good on your screen, then you must be good for the rest of the web. Every single viewer can have a different browser window size. And, remember that screen size has little to do with it too. It's the viewable area inside the browser window that determines the viewport for your web site. This is even influenced by how many toolbars the user has displayed, what OS they are using, how big they've set their browser window, etc...

Within the constraints of how large your monitor is, you can simply change your browser window size by resizing the window and you can see what your site looks with a lot of different viewable area sizes set.

Good web design that works well across many different browser window sizes is not a particularly simple affair and requires a strategy, a rich set of techniques to use to achieve the strategy, good execution and lots of testing at different sizes. It's not uncommon to conceptually have three general design points (phone, tablet/small laptop and larger desktop). Your design strategy may smoothly flow between these three points or you may design some size trigger points where the design changes its strategy based on the size.

Can I get an AMEN?!? I'm still modifying my layout trying to find the right look.

Regular screen vs. Wide screen

Comments