Page with and without CSS

Discuss general web development questions. Help others and get help from others.

Moderator: kfury77

Page with and without CSS

Postby Karlis » Wed May 21, 2008 8:41 pm

Should the web page be accessible (basic functionality - text, main navigation, main content and features) even if CSS can not be loaded or is not supported or fails to load properly. More and more I see this... The page is being loaded on a slow or very poor connection and CSS does not load.

Now if it is classic HTML, it will still be usable up to some degree, however if it is based purely on CSS layouts, very often there will be nothing more but a mess. Another scenario is - page is loading but the connection is slow, so HTML loads first and for some time we see only a mess of elements, then when CSS finally loads, everything pops into their places.

I had a long discussion about this today with my colleague. I think, the page should be usable (not pretty) even if CSS is not loaded. What do you think?
Karlis Blumentals
Blumentals Software
www.blumentals.net
User avatar
Karlis
Site Admin
 
Posts: 3626
Joined: Mon Jul 15, 2002 5:24 pm
Location: Riga, Latvia, Europe

Re: Page with and without CSS

Postby syrupcore » Wed May 21, 2008 9:44 pm

absolutely should be usable without css. It should look like a nice 1996 web page with css off. :) I'm nerdy enough about this that I often hit CTRL+SHFT+S when visiting a page to see how it's put together (this toggles css on and off if you're using the web developer toolbar). When viewed in this mode, source order becomes really important. There is still a tendency to put HTML content where you want it to appear instead of where it makes sense in the document when viewed without styles (like screen readers, text based cell phones and most often by search engine bots). A few extra links at the top of your source, hidden when css is on, can make text based navigation really easy for people using non-css enabled browsers. Even in this new version of phpbb, there is a "skip to content" link.

We just finished http://www.quizilla.com/ and we're pretty stoked on the text based usability of the site. Some one at QZ seems to have moved the page title to after that "skip links" but that still works ok. Two basic css 102 things to call out: the company logo, company tag line and main navigation are image replaced so that when you browse without text (or images - cell phones, screen readers, bots), the link and content are still usable (and indexable by google et al). Also, the main navigation is at the bottom of the page. For seo, you want the content as close to the top of the page as possible. the "The N | Quizilla Network" shouldn't be up there, nor should that ad. We got rushed... :) Sites should be: Name of site/page, skip links, search, CONTENT. This is only doable with purely CSS layouts.

2 long winded cents,
Will
User avatar
syrupcore
Top Contributor
 
Posts: 917
Joined: Thu Jul 21, 2005 12:58 am
Location: Portland, Oregon, usa

Re: Page with and without CSS

Postby turicon » Fri May 23, 2008 7:17 pm

Hello Karlis,

a good question! :)
I found in my very old projectfolder (1998/1999) a lots of html-Files (table-layout) with a size of 25-40kB. At my latest project, the html-fils have a size of 8-15kB, also the CSS-file. The problem are not "with or without CSS", the problem are: 1. complex web pages with too many and/or non-optimized SQL-Querys; and 2. In the last time, many sides are only loaded after Advertisement (Banner, Google Adword, Affiliate programs etc.), loaded of central servers.

A simple web page with one central CSS-file and no PHP, SQL and others loaded faster as a old web page with table based layout! That is my opinion. And a modern web page without loaded CSS become not a designaward, but one can use it. Better as a heavy table-construct with failures ;-)

Greetings from Germany,
Turicon
turicon
 
Posts: 26
Joined: Thu Aug 16, 2007 8:48 am
Location: Sinsheim/Germany and Cherkassy/Ukraine

Re: Page with and without CSS

Postby mboto » Fri May 23, 2008 7:54 pm

Yes, i think the web page should be accessible even if CSS can not be loaded or is not supported or fails to load properly.

The only "advantage" of using tables for laying out pages is that all the content elements keep their position relative to each other in case the CSS isnĀ´t present/loaded/whatever.

However, if you take some care when building the XHTML (semantic) content structure when laying out pages with CSS, the content elements will appear linearly in the page when the CSS file isnĀ´t available and therefore still completely usable and understandable. Besides you will take advantage of all the other benefits that comes when laying out pages with CSS.
mboto
 
Posts: 8
Joined: Mon May 19, 2008 2:12 am


Return to Web Developer Talk

Who is online

Users browsing this forum: No registered users and 1 guest

cron