We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message
Contact Forum Editor

Send an email to our Forum Editor:


PLEASE NOTE: Your name is used only to let the Forum Editor know who sent the message. Both your name and email address will not be used for any other purpose.

Tech Helproom


It's free to register, to post a question or to start / join a discussion


 

Webpage Resize moves content


Mort105

Likes # 0

Hi. I have a web page that looks ok when the window is full screen but when I resize the content is moved making the page look a mess.

How do I make the page content static and implement scroll bars?

Like this post
Mort105

Likes # 0

Ok we'll I've made the width of the outer container fixed to 1100, not ideal but seems to be better than the alternative....

Like this post
LastChip

Likes # 0

Fluid layouts are in their infancy and browser cooperation is iffy to say the least - IE (as always) being the worst of the lot.

It's a very complex and specialised type of web coding, that's takes a lot of patience and testing to get right.

Frankly, you could write a book on it and not be able to cover every eventuality.

The main problem is everything has to be set as variables - mostly percentages, em's and the like and often elements floated within the structure. If that structure changes, then those elements that are floated will "float" to the next available space determined by the hierarchy.

You can potentially use javascript to overcome some of these problems. But what happens if the user has javascript turned off? I'll tell you, it's a mess! So there's no elegant degrading.

I've actually been involved recently in attempting to develop a website in this manner with a joint (very talented) developer and I can tell you, between us, we've spent hundreds of hours and still not found the holy grail for what we want to achieve.

The sites you see on the web that will behave in this manner are almost always "Flash" sites, which do nothing for SEO.

So if you find a quick and simple answer, post it here and I'll buy you a pint!

Your solution of a fixed width is probably the most sensible option, though 1100 is an odd size.

Like this post
Ansolan

Likes # 0

Hi lastchip

Sounds like you are having a hard time:)

Responsive design is not so bad and anyone with a basic knowledge of HTML/CSS can get going in a few hours. Although a mix can be and often is used effectively, there are two basic schools of thought:

  1. A totally fluid site, which adapts to fill the screen size. Sounds to me as if that's what you have been trying and not a terrible approach but often best for simple sites, or you can make life hard for yourself, lose control on layout detail and more complex elements may not be so pretty.

  2. Using media queries, which are explained here:

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

This gives more control over layout detail at specific widths. Also as I think is mentioned, a decent way to hack an old site to be usable on pads and mobiles. That can be a pretty quick process and something most sites should be doing. The average small business site can be up and running in 3 to 5 hours, may not be perfect but okay for a while and better than 20% of traffic just bouncing.

You can also use a responsive grid as a base, which is a good idea. This one was okay but seems to be down, possibly gone:

http://webcache.googleusercontent.com/search?q=cache:IO7znrXUlg0J:www.getskeleton.com/+&cd=1&hl=en&ct=clnk&gl=uk

The github links are still there which might help, although I know Github are down for maintenance tonight. If not, fish round for a copy, or use one of the many others:

https://www.google.co.uk/search?q=responsive+grid&aq=f&oq=responsive+grid&aqs=chrome.0.57j0j62j0j62j0.6056&sugexp=chrome,mod=4&sourceid=chrome&ie=UTF-8

Whatever suits your style, coding preferences, or typical base widths.

Media queries won't work on most versions of IE but then how many devices running old IE need a responsive site. No problem at all on Android, Chrome, Firefox, Safari, Opera, latest IE etc.

If you for some reason you are keen on using a percentage base, something like this will give you a start:

http://www.responsivegridsystem.com/

or more ideas at:

http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design

Whether you choose a pixel based, or percentage based grid, you can still use media queries for fine control. Setting fonts, headers, margins, padding etc in pixels, according to how the site reacts at different screen widths. You can give everyone a fairly precise layout with minimal effort.

A quick way to build is just open the design in something like Chrome and resize the window vertically, so you see what happens at the break points. Won't be pixel perfect for an iphone etc. but close and you can tweak afterwards.

Like this post
LastChip

Likes # 0

Thanks for your informative post Ansolan.

But to be honest, I'm (we're) fully aware of all the stuff you've mentioned.

Our challenge was to create a single site, (for maintenance purposes) that would render no matter what the screen size, resolution or ratio it was using (including mobiles). And whether the user had javascript turned off, which means some of the fixes for IE couldn't be used.

Imagine a three column site with three images horizontally across and not only does the site need to be fluid, but the individual images as well (we actually cracked that one purely with css code). But that's only one of the many problems you face when presented with a challenge for a site with more than 3000 pages to render correctly.

Actually, setting pixel based sizes practically destroys a true fluid (responsive) layout, as pixels are a fixed measurement - last thing you need. Strangely, when declaring em's as a size for text (which should conform with variables), it doesn't respond how you would expect.

@media queries can be used, but unless you use a ridiculous amount, tend to be clumpy when changing site resolutions and that wasn't part of the brief (but ultimately, we may have to resort to that). Another potential fix would be to use php server side, to adjust certain elements, when serving the pages. That's a possibility we're actively looking at.

Then there's the question of how to gracefully degrade the site into a different (but still a clearly recognisable corporate image) for mobiles. As obviously a site made for a 1920px wide-screen, would appear somewhat differently on a mobile and even differently between different mobile manufacturers. With Galaxy tabs and ipads in the mix, you create even more variations.

Throw that all together and then start testing in multiple browsers with different levels of compliance and it becomes apparent very quickly, it's no easy task.

So while I agree with you simple sites can now be made fluid, complex ones are a different story. At the moment, it's still very much work in progress!

The annoying thing is, if every browser complied with standards instead of trying to monopolise the market, we could produce something that would be truly cross-browser compliant and be a much better user experience. Because ultimately, it's the user that is the most important part of the equation.

Never-the-less, thanks for your input.

Like this post
Ansolan

Likes # 0

The annoying thing is, if every browser complied with standards........

Always been the same unfortunately and agree that recent standards not supported by some have made matters a little worse.

Also agree that the more complex the site, the harder the task but don't think you can accomplish a really good job for that type of site without using media queries. They are fairly wide ranging, if you like to work in a particular way for example you can use @media screen and (min-width:25em) not just pixels. There are a wide range of possibilities even for established media queries:

http://www.w3.org/TR/css3-mediaqueries/

let alone more to come but still the problem you mentioned for both, browser support.

Out of interest, try the sites listed here, click through to a few examples:

http://www.awwwards.com/50-examples-of-responsive-web-design.html

This sort of thing might suit you, no idea really:

http://www.smashingmagazine.com/

I'm not going to say which I think the best site on there is:)

Sure you will eventually find solutions you are looking for, there or somewhere else. Have a good Christmas.

Like this post
Mort105

Likes # 0

Thanks for keeping this going, not checked back for a while but it looks like I need to do more reading (thanks for the links).

I haven't tested this on a mobile yet as it's only living on my home PC at the minute.

I don't suppose there is a good mobile emulator that would allow you to test how a page would look on any given mobile screen?

Like this post
Ansolan

Likes # 0

A simple way of quick testing is just resize the browser window on a decent modern browser. Next step up might be one of many online emulators e.g.

http://quirktools.com/screenfly/

More ideas here:

http://www.themobilewebdesignblog.com/2012/05/19/online-tools-emulators-for-responsive-design-testing/

There is software around you can download and manufacturers test facilities but at the end of the day, testing on real devices is the way if you are a perfectionist.

Incidentally, noticed that Dave Gamache has his site up again:

Skeleton

A solid approach for a range of sites, or a few more options at:

960 Grid

As a background to grids and design in general, try:

Grid Based Design

Like this post

Reply to this topic

This thread has been locked.



IDG UK Sites

Nokia branding killed in place of 'Microsoft Lumia': Windows Phone moves into new era

IDG UK Sites

Why you shouldn't buy the iPad mini 3: No wonder Apple gave it 10 seconds of stage time

IDG UK Sites

Halloween Photoshop tutorials: 13 masterclasses for horrifying art, designs and type

IDG UK Sites

Should you update your iPhone or iPad to iOS 8? iOS 8.1 brings back Camera Roll, adds Apple Pay in...