Interlopers.net - Half-Life 2 News & Tutorials

by **Garrador** on Thu Apr 05, 2012 9:37 pm

Hi there.
I'm now working on another website for a realestate firm, and they wanted it to look pretty nice and have lot's of cool functions. I've settled with using HTML5 as base and CSS3 and Jquery for most "effects" and whatnot.

Though, of course there is Internet Explorer.....
I'll be having a hard time explaining to the firm that older IE version simply suck balls and will not render the page like it should without putting in the same amount of workhours and then some to fix IE bugs to make it display "correctly", although it will never look / be the same on older IE anyways.

SO. Is it fair for me to put some kind of warning box on the top of the page that displays a message to the user browsing the webpage that their browser sucks, and it should be updated to a newer version / type? IE8 and up displays it properly, but all below get suicidal.

[|YouTube|] · by **Gary** on Thu Apr 05, 2012 10:05 pm

Redirect them to the Firefox download page.

But in all seriousness, I do think a warning box/bar would be appropriate for those with shit browsers. But I could see the firm not liking that. Might want to make sure they understand the problem.

by **Blink** on Fri Apr 06, 2012 3:06 pm

I tend to push the latest CSS3 effects etc but ensure that a design does not look broken in browsers that are older. This can mean the design is quite different, but not actually the user is missing out unless they compare the site in two browsers.

Achieving this is simple with tools such as the HTML5 Boilerplate and Modernizr.

One feature of the boilerplate is access to a set of classes on the <html> element that allows targetting of IE browsers and Modernizr also has your back by detecting various features that you can then code against in your CSS.

A simple example would be a background gradient on the <body> element, a common design technique. In poorer browsers one might fallback to an image:

Code: Select all: body { font-size: .9em; line-height: 1.3; background-color: @bgGray; background-image: linear-gradient(top, rgb(161,161,161) 2%, rgb(235,235,235) 97%); background-image: -o-linear-gradient(top, rgb(161,161,161) 2%, rgb(235,235,235) 97%); background-image: -moz-linear-gradient(top, rgb(161,161,161) 2%, rgb(235,235,235) 97%); background-image: -webkit-linear-gradient(top, rgb(161,161,161) 2%, rgb(235,235,235) 97%); background-image: -ms-linear-gradient(top, rgb(161,161,161) 2%, rgb(235,235,235) 97%); background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.02, rgb(161,161,161)), color-stop(0.97, rgb(235,235,235)) ); // Allows gradient to fill viewport instead of body height - http://stackoverflow.com/a/2870024 height: 100%; background-repeat: no-repeat; background-attachment: fixed; } .no-cssgradients body { background: @bgGray url("@{imgPath}fallbacks/body-bg.png") 0 0 repeat-x; }

More aggressive tactics might involve changing the layout of a page completely because IE doesn't support CSS3 columns for example.

However, including a link to this site never hurt anyone! - http://browsehappy.com/

by **Bema** on Fri Apr 06, 2012 9:10 pm

Blink wrote:However, including a link to this site never hurt anyone! - http://browsehappy.com/

Bingo? It'll allow people to pick and upgrade the browser they want/are familiar with? A lot of sites that require upgrades to browsers/plugins don't even give that option!

Obviously from a business point of view they'll want everyone to be able to access everything from every version of every browser. It may be easier to explain to them that older IE versions (as IE is your problem browser here) may also have security issues newer versions don't? It is definitely a view put forward by the mainstream press time and time again. It's made easier by so many high profile hacking cases this and last year, and also a recent BBC article on the risks of cyber crime to small businesses. I mean it's a little un-related to the point of accessibility you're making...but they will understand wanting to protect their visitors/customers. That may be the best angle to 'convince' them that a warning box may be more appropriate than versions of the site that work with older browser versions. Honestly it depends what angle YOU are working on this from too.
Obviously Blink knows a lot more than me in regards to web design & customers etc so my thoughts may be defunct. I'm taking a slightly different view on it as i'm a web user who makes sure his browser is up to date, and system secure. I understand im not the average user - just adding an opinion/potential option towards those who don't!

But for those with more experience in web design for clients etc;

Is there any way in particular you handle customers who aren't as tech savvy? What is the best method to get across points of accessibility etc? Or do you try your best to make sure the site is accessible as broad across the board as you can manage if they ask it?

by **Blink** on Fri Apr 06, 2012 9:39 pm

Bema wrote:Is there any way in particular you handle customers who aren't as tech savvy? What is the best method to get across points of accessibility etc? Or do you try your best to make sure the site is accessible as broad across the board as you can manage if they ask it?

Key thing to remember is accessible doesn't mean 'looking the same'.

As I commented before, trying to make the site look pixel perfect in all browsers is a pipe dream. Best to build to the best browser, rather than creating a lame site that caters for the worst browser.

This is actually easier to sell to a client nowadays with responsive design taking off and mobile browsers being a big part of a site's audience. Most clients themselves will have experienced a site on desktop and on phone. That tailored experience is no different when we're talking Chrome vs IE8.

Some major names to drop in if you want some examples:

All three are using parts of HTML5, CSS3 and are responsive in design.

If you have a bit of spare cash I highly recommend you grab yourself a copy of Hardboiled Web Design. It really promotes this idea of building for the best browser first, and gives all manner of advice and examples relating to convincing clients etc.

Final tip; we used HTML5 & CSS3 heavily on Radiotimes.com and purposely gave IE a sucky experience compared to Chrome, Firefox etc and of the tonnes of complaints about site changes not one was related to IE looking worse than other browsers. People only moaned if it was slow or looked broken. ;-)

by **Bema** on Fri Apr 06, 2012 10:16 pm

Blink wrote:As I commented before, trying to make the site look pixel perfect in all browsers is a pipe dream. Best to build to the best browser, rather than creating a lame site that caters for the worst browser.

In hindsight, such an obvious position!

Thanks for the simplification. :smt023

by **Dr. Delta** on Sat Apr 07, 2012 5:23 am

Blink wrote:Final tip; we used HTML5 & CSS3 heavily on Radiotimes.com and purposely gave IE a sucky experience compared to Chrome, Firefox etc and of the tonnes of complaints about site changes not one was related to IE looking worse than other browsers. People only moaned if it was slow or looked broken.

I assume you're talking about the older IE's, either 7/8 and lower. I'm quite curious about your personal experience with IE9. How do you think it compares to the other browsers (latest versions)?

by **Garrador** on Wed Apr 11, 2012 3:40 pm

Blink, thank you for you're insights and tips here. I'm currently creating the design targeted for Chrome and new FF.
I'll probably end up having some sort of warning box that integrates on the top of the site, that links to that site you had there. That was excellent indeed.

I'll explain the downsides to my client on the next meeting.
The design I have so far looks perfect in the best browsers, and looks pretty good on the older, less-cool browsers. But on the oldest, and obsolete ones it looks pretty borked.

I will definitely buy that book Simon. Looks like it could do some good indeed.

by **amckern** on Wed May 16, 2012 7:23 am

You can always ask the browser what version its is, and tell the user:

Code: Select all: <div style="background:#C00;color:white;font:16px arial;padding:6px 12px;display:block!important;"> <strong>Whirlpool no longer supports Internet Explorer 7.</strong><br> Please upgrade your browser (or remind your IT department to do their job properly and upgrade it for you). </div>

http://www.whirlool.net.au

There also use to be a code snipet you could drop into your web site at http://acma.gov.au - however i think they removed it.

by **Garrador** on Sat May 19, 2012 7:04 pm

The problem has been resolved. I used a script I found that handles it all quite nicely, and pops a message for the user. I installed 3 virtual XP machines on my pc for IE6,7 and 8 to do thorough testing. Works wonders and definetly helps speed up the production, rather than relying on semi-accurate IE apps.

Interlopers.net - Half-Life 2 News & Tutorials

Site Navigation

Old browsers...

Old browsers...

Re: Old browsers...

Re: Old browsers...

Re: Old browsers...

Re: Old browsers...

Re: Old browsers...

Re: Old browsers...

Re: Old browsers...

Re: Old browsers...

Re: Old browsers...

Who is online