We have a non-profit web site that got about 5 million hits in May. Of those, about 5,700 were from IE 5.x or lower; about 4,000 were from folks with Netscape 4.x or lower. We know that the current site's layout works for newer browsers and we're testing it on IE6 as well (along with Chrome, Opera, Safari, and Firefox). How do you handle the folks with the older browsers? Because of jQuery libraries and such, the pages might not function correctly on those old browsers.
Is there an easy way to show a text-only version on browsers that can't handle the CSS and jQuery goodies? How do large sites handle this sort of thing? I've used the #embed to hide the stylesheet from Netscape 4.x, but not sure beyond that.
You should not keep the old browsers as your main priority - just keep the content readable on them, and maybe add a helpful banner that explains they are using an outdated browser.
However, you don't have to focus on getting the layout look 100% same on browsers that old, that's just waste of time. As long as the content is available and they can navigate the site, it should be fine.
Make sure that all content is accessible and readable from a browser like Lynx, and no content requires Javascript to read & access.
I would suggest designing for disability accessibility and seeing if that would produce those results as well - kill two birds with one arrow.
If you use tableless / css based design techniques then you can easily fall back to text only.
You could use conditional comments to only include css files in certain version of internet explorer.
You could use jquery version checking to only execute it on the versions you want to.
Something else I just thought is that you could show a message to older browsers like I have seen around the web urging the user to upgrade for compatibility and most importantly SECURITY. (I think twitter is doing this now).
And another thought - if you are going back to browsers that old you are probably going to have to worry about screen size as most sites as designed to fit 1024 x 768 minimum these days but at once point 800x600 was the entry level...
Here is what Big G has to say about it :)
http://googleenterprise.blogspot.com/2010/01/modern-browsers-for-modern-applications.html
They are going to stop supporting IE6...
Related
When I develop web-based applications or websites, I need to test browser compatibility to make sure that every browsers like IE, Firefox, Opera, Chrome, and Safari display the expected result.
I find that it is difficult to test across many browser because I have to open many browser or window at a time. Then, have to press [ALT + Tab] to switch between browser and [CTRL + R] to refresh it to see the result.
Now I'm looking for an easier and faster way to test my website, maybe there is a software that can contain many in one browsers, and you can switch them only by pressing a single click to what browser you want to use.
Microsoft Expression SuperPreview. Alas, it is not free!
Its not interactive, but I found nothing as fast and reliable as the BrowserLab from Adobe.
https://browserlab.adobe.com/
The best feature is the onion-skinning support, with auto align (type A).
Lunascape is a browser that allows you to switch between Trident, Webkit and Gecko; so it may be of some use for testing how a page will render in different browsers. I use it extensively, though I also test in all the main browsers (at various versions) as well.
I'm using the very impressive CSS3PIE (http://css3pie.com) library to add support for CSS3 styles in IE6-8. It works fine in versions 7 and 8 and took a lot of pain out of the process.
However, in IE6 no CSS3 styles are shown at all. In fact, looking at the server logs, I can see that IE6 doesn't even download the PIE.htc file, which is necessary for the magic to work. The content type for the file is set correctly as text/x-component, it's referenced by absolute URL, and works fine in IE7 and 8.
I'm using Compass (www.compass-style.org) and the PIE helper which makes the CSS look like this:
#shopping_cart {
behavior: url("/media/static/css/PIE.htc");
position: relative;
border-radius: 10px;
}
I can't figure out what the problem is. Does anyone have any ideas what might cause IE6 to skip the behavior definition altogether?
Cheers,
Jonas
See if the information on this question is helpful:
CSS3 PIE - Giving IE border-radius support not working?
I just had a coworker run into a similar problem in IE8 - he was getting a permission denied error in the DOM inspector because he was trying to test it on the local machine. Putting it up on a dev server and testing from there solved the problem. Probably not the same issue here, but posting it anyway in case it helps other users.
As for IE6 in general, I usually tell people it's not worth paying extra to have everything look identical in IE6 especially when it's such a superficial visual issue and so few people use it. Pixel perfect rendering across browsers is not nearly as important as being functionally consistent. That said, if you want to pay me $200 an hour (double my rate because it's such a PITA and a waste of time), go right ahead - it's your money. ;-)
I generally use firebug to remove unwanted divs and tags and resize stuff on the web-page .. frequently for gaming sites like chessbomb. But this is tedious, and every time tab reloads, i would have to do it all over again.
So is there any plugin which would remember the setting for particular site and apply it on the load itself. For starters i just need something to remove div tags based on names. If it can resize too then thats all the more useful.
Thanks.
You can use Adblock Plus with some CSS selector usage to do this. Look at the doc related to this here.
For example, you could probably use something like
domain.com##div.class
to hide those divs.
This is a use case for the greasemonkey firefox plugin. You'll need to know a little javascript, but if you're doing these sorts of things in Firebug, I would assume you won't find greasemonkey too dofficult.
Have a look at http://www.greasespot.net/ and http://userscripts.org/ and you may even find someone has already written the script you're after.
To quote wikipedia on Greasemonkey:
Greasemonkey is a Mozilla Firefox extension that allows users to install scripts that make on-the-fly changes to HTML web page content on the DOMContentLoaded event, which happens immediately after it is loaded in the browser (also known as augmented browsing).
As Greasemonkey scripts are persistent, the changes made to the web pages are executed every time the page is opened, making them effectively permanent for the user running the script.
Is there a cross-browser compatible way to post a form in one tab of the browser to another (which I know is open and is of the same domain)?
I tried window.name='some_name'; and target='some_name' on the form, but this does not seem to work. Am I missing something?
There is no standard to how tabs are handled via javascript, so you are out of luck.
Most browsers these day also make sure each tab is segregated/partitioned from others, as much as possible, so this is unlikely to change in the recent future.
The closest you can get to posting to a different page is to use AJAX, or possibly using frames.
I'm in a bit of a pickle at work. My department designs a number of internal systems for the company, mostly data-reporting related. We have less than 10 true content pages that actually need to be maintained by a human. These pages were written in PHP and maintained through Dreamweaver by a non-technical staff members - they used the design editor, and avoided the code as much as possible. There were issues, but overall it worked well.
Recently this project was updated and converted to a ASP.NET Web Application. This resulted in some architecture changes, making the content harder to edit with a WYSIWIG editor (it's now revision controlled, it's compiled and thus must be re-deployed after modifications are made, etc.). We sort of assumed that the staff member who had been maintaining it would just continue to do so, now using Visual Studio's "Design" mode instead of Dreamweaver's. We were mistaken, and it isn't an option for technical and non-technical reasons.
The staff member will not be touching any HTML - we need a WYSIWIG editor (this is a requirement we were handed...no arguing with them over that). I started looking at CMS', mainly Drupal, but after a bit of playing around I see that content 'Blocks' don't really have a WYSIWIG editor, instead expecting HTML. Is this true for all CMS'? Is there some easy-to-setup CMS out there that comes with a WYSIWIG editor? Does anyone have any other ideas? Don't care what language it's in, I'll make something work.
This really isn't my area of expertise - I do application development primarily, with an occasional web front-end. Not sure I'm even asking the right question, but hoping someone can help.
WordPress makes use of TinyMCE, and it works pretty well for some NON techie clients of mine. You can write (PHP) scripts that will call the WP functions and pull the page content.
Back to the point, I have found the backend of WordPress to be usable and friendly to a good mix of people. We often use it for a backend and build something completely custom for the frontend, and have had good results.
http://www.cushycms.com/
They let you add easy WYSIWYG capability to any website, regardless of the technology used.
You just add a tag once in your source file, and let your users go to CushyCMS.com to add text content.
I am by no means a CMS expert, but I believe SiteCore might suit your needs. It is a .NET system, built on top of ASP.NET, and from my limited experience with it, the UI for business users is very usable.
Take a look on Joomla. It includes WYSIWYG editor. It is much simpler than Drupal
As Frank points out, TinyMCE is a great option, in fact you use it here :D. Have a look at some examples: http://tinymce.moxiecode.com/examples/full.php
The good point is that TinyMCE is just javascript, so in theory you can add it to any CMS, or in fact to any HTML form.
Also, I think is the default input method for Joomla if you are interested.
I would recommend CKEditor (the successor to the FCKEditor), I haven't used FCKEditor in ASP .NET code, but have used it in PHP with a lot of success. I haven't gotten around to converting old code to CKEditor, but plan to in the future.
If this is something where you can load HTML files from your server that has FTP access...a quick and dirty solution I have used is CushyCMS.com, you supply ftp credentials and hook up the files and they are good to go. Non-technical customers of mine have liked the editor a lot. It allows you to specifically say what you want edited and what you don't.
In PHP the way I usually architect using CushyCMS is to have the main page do a require_once on the content page and the content page has the HTML block that I want them to be able to edit.
so the code looks like this:
<?php
//...other code
require_once("page_content.php");
//...other code
?>
where page_content.php looks something like this:
<div id="whatever" class="cushycms">
editable text here
</div>
Hope this helps.
I used to think that for user friendly editing, you need a WYSIWYG editor, such as the TinyMCE that has already mentioned. Not any more.
Editing content in such a rich text editor is not very handy. Very often you end up messing up the content, and either does a technically savvy person have to come to help, or you have to switch to CODE view (= HTML) to clean up the mess.
Now I'd be far more inclined to use something Markdown, like this site (and Reddit) uses. For most purposes, you don't need rich text, and it is just as handy a WYSIWYG tool. If you need a few rich text touches, like making some text bold or italic, this works quite easily too. Lists, either numbered or bulletted, are a snap. And making links... Those WYSIWYG tools always seem to be able to mess it up in ways you can't even imagine.
Plus, this way, the resulting HTML is always clean and minimal, and it's extremely hard for the user to mess up.
What about Expression Web? It is made to edit ASP.NET web pages, and can integrate with TFS