SitePoint Sponsor

User Tag List

Page 4 of 6 FirstFirst 123456 LastLast
Results 76 to 100 of 139
  1. #76
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JenniferBigBlue View Post
    Would you mind looking at what I did and see if there are any claring errors?
    Well, how about I give you my typical... how was it Stevie D put it, "Hatchet job"? This will be a complete review of the page top to bottom.

    First off it seems to load pretty peppy - that's good. 153k is a little over my upper limit for page design, but given the number of content images that's entirely acceptable especially since it's only 18 separate files.

    Appearance-wise it's problematic due to the use of absurdly undersized fixed metric fonts. Anything less that 12px is typically illegible, I get squirrelly at anything under 14px, and you should NOT be declaring fonts on the content in PX in the first place. The WCAG recommends %/EM so that handheld users aren't stuck with fonts too big, and large font/120dpi (like myself) or Win7 large/144 dpi users (like on my media center) aren't diving for the zoom when they land on your page.

    If you are going to link an external stylesheet, INCLUDE a MEDIA TYPE. Likewise even when just developing a page it helps to NOT get in the habit of putting ANY CSS in the markup... It's actually more work and more confusion -- but remember this is coming from the guy who thinks tabs are a colossal step BACKWARDS when it comes to text editors -- open up the CSS and HTML in two SEPARATE windows so you can edit them side-by-side. Beats the tar out of scrolling up and down.

    You appear to be using javascript to do CSS' job -- with static scripting ALSO inlined in the markup. The only place that should need scripting assist is IE6 or lower, so I'd load something like CSShover3.htc in the CSS rather than send 7k of "Javascript for nothing" at every browser.

    Likewise, I would NOT be playing the stupid "content first at ALL costs" nonsense of putting the main menu after the content. That is rarely worth the extra effort and is proabably part of why you have multiple DIV around that UL for NOTHING. Search engines are smart enough to realize a UL full of links is a menu, and that's what 'jumpto' menus are for in terms of accessibility -- not just for getting past the content, but also for things like narrow-screen display using 'accesskey menus'.

    Those images not only have absurdly undersized illegible text in them, they are presentational affectations to the text and as such have NO business being in your markup... much less that if they are all getting the same STYLE applied to them, get that the devil out of the markup and into the stylesheet too so you are only saying it ONCE, not FIVE TIMES.

    This is made even more confusing by the sidebar having what appear to be content images that are being loaded via a class in the CSS -- you have those backwards!

    The dropdown menus should be nested IN the menu, and not placed after it with DIV's around them on what should ALSO be lists.

    You also seem to be using presentational classes -- stuff in the HTML, and this includes class and ID names, should say what things ARE, NOT how they are going to appear; as such classes like "floatleft" are so pointless, you might as well go back to HTML 3.2 and say 'align="left"' -- completely missing the POINT of separation of presentation from content.

    Your use of heading tags is completely nonsensical. NOTHING in the footer qualifies as the 'start of a new subsection, it is improper to skip heading levels, so there is ZERO reason those should be h4 and h6 -- just as you should NOT be using scripting to emulate target="blank" as the REASON it's deprecated is you shouldn't be forcing that choice down the users throat in the first place. They want it in a new window, they can middle-click or shift-click if they're a Mac... ok, I won't say the word I was going to use. They also are not child subsections of "why choose" which is just PART of why I typically say using a content area element as the H1 is in fact wrong... also "wrong" is the use of B tags for what should be headings.

    Also, if your TITLE attribute is IDENTICAL to the text inside the element you are putting TITLE on, there is NO LEGITIMATE REASON to put TITLE on it in the first place!!! (I keep seeing that one, what the?!?).. well, unless you are putting accesskeys on it and don't want the URL to show up on handheld or Opera accesskey menus.

    Also, the image replacement method used on that heading doesn't work when images are disabled, defeating the POINT of using image replacement in the first place!

    The drop shadow is ridiculously large a file -- while that's a 'easy' technique for applying one, it's not exactly internet friendly thanks to the 18k of "nothing". One of the few times I'd seriously consider two separate images and an extra wrapping div to do that -- it might be a couple hundred bytes code, but it would cut out around 17k of image filesize.

    To that end I also can't figure out why you are using images for that main menu -- unless it's to make it intentionally hard to read.

    You should also back up off the use of absolute URL's including the domain name. A simple "/" is all you need on those, saving bandwidth and making ZERO difference to any browser or search engine. (even if some SEO sleazeballs claim it does, that's 100% myth)

    The non-breaking spaces and vertical breaks on the footer menu are also not exactly a great idea... that too should be a list.

    Using line-breaks to divide up sections inside P tags is just bad practice. You are basically using line-breaks to do margin and/or padding's job.

    Finally -- (c) copyright? Isn't that just a LITTLE redundant?

    So, that taken into consideration, my approach to that markup would probably end up looking something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <!--
    
    	Don't forget to implement these later!
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="print.css"
    	media="print"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="handheld.css"
    	media="handheld"
    />
    
    -->
    
    <title>
    	Testing CSS
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    	<h1>
    		<a href="/">
    			Gold Coast Yachts
    			<small>St. Croix, US Virgin Islands</small>
    			<span><!-- image replacement --></span>
    		</a>
    	</h1>
    
    	<ul id="mainMenu">
    		<li class="jumpTo">
    			<a href="#content" accesskey="2" title="Content">
    				Jump to Content
    			</a>
    		</li><li class="jumpTo">
    			<a href="#sideBar" accesskey="3" title="SideBar">
    				Jump to SideBar
    			</a>
    		</li><li class="jumpTo">
    			<a href="#pageWrapper" accesskey="1" title="Top of Page">
    				Top of Page
    			</a>
    		</li><li class="jumpTo">
    			<a href="#footer" accesskey="9" title="Footer">
    				Jump to Footer
    			</a>
    		</li><li>
    			<a href="index.html">Home</a>
    		</li><li>
    			<a href="about.html">Comapny</a>
    			<ul>
    				<li><a href="about.html">About GCY</a></li>
    				<li><a href="projects.html">Completed Projects</a></li>
    				<li><a href="employment.html">Employment Opportunities</a></li>
    				<li><a href="articles.html">In The Media</a></li>
    				<li><a href="construction.html">Currently Under Construction</a></li>
    			</ul>
    		</li><li>
    			<a href="#">Vessels></a>
    			<ul>
    				<li><a href="catamarans.html">Day Sail Catamarans</a></li>
    				<li><a href="yachts.html">Cruising Yachts</a></li>
    				<li><a href="guests.html">Guest Shuttles</a></li>
    				<li><a href="ferries.html">Ferries</a></li>
    				<li><a href="snorkels.html">Snorkel Boats</a></li>
    				<li><a href="dives.html">Dive Boats</a></li>
    				<li><a href="party.html">Party Cats</a></li>
    				<li><a href="response.html">Response Vessels</a></li>
    			</ul>
    		</li><li>
    			<a href="brokerage.html">Brokerage</a>
    		</li><li>
    			<a href="contact.html">Contact Us</a>
    		</li>
    	<!-- #mainMenu --></ul>
    
    	<hr />
    	
    	<div id="content">
    	
    		<div class="trailingPlate">
    			<img
    				src="images/about/shearwaterCockpit.jpg"
    				alt="Shear Water Cockpit"
    			/>
    		<!-- .trailingPlate --></div>
    		<h2>Why choose GCY?</h2>
    
    		<h3>Our Experience</h3>
    		<p>
    			The 95 plus multi-hulls built by Gold Coast Yachts reflect the company's experience gained from over 25 years of commercial vessel construction, operation and ocean deliveries. Each boat is built, assembled and commissioned by teams of skilled craftsmen trained in a variety of composite construction and system installation techniques. Behind the scenes, a design, engineering and systems team is led by Roger Hatfield and Jeff Bisson to meet the structural, mechanical, electrical, plumbing and Coast Guard demands of each project.
    		</p>
    
    		<div class="leadingPlate clear">
    			<img
    				src="images/about/DSC00882.jpg"
    				alt="Our Yacht Construction Processes"
    			/>
    		<!-- .leadingPlate.clear --></div>
    		<h3>Our Construction Processes</h3>
    		<p>
    			Typically, hulls are built in female molds using resin infusion processes. We have molds for component construction of bridgedeck floors, cabin roofs, decks, flat panels, beams, daggerboards and rudders which are then built using either resin infusion and wet-bag vacuum processes. Primary materials consist of epoxy infusion resin, Vectorply fabrics and Corecell foam. Structural and secondary components are prefabricated and assembled once the hulls are completed using Gougeon West System epoxy. The entire surface of the vessel is protected by epoxy primers and then top coated with Alexseal, Awlgrip or Dupont polyurethane topcoats to ensure a durable quality finish.
    		</p>
    		
    		<div class="trailingPlate">
    			<img
    				src="images/about/wingmast.jpg"
    				alt="Yacht Wing Mast"
    			/>
    		<!-- .trailingPlate --></div>
    		<h3>Our Sailing Vessels</h3>
    		<p>
    			The "heart" of the Gold Coast Yachts sailing design is our rotating wing spar. The efficient low windage rig features a 2:1 shaped resin-infused carbon fiber / Corecell foam wing spar combined with our developed hull rocker and thick-sectioned high aspect ratio rudders and daggerboards to produce maneuverability unparalleled by other catamarans.
    		</p>
    		
    		<div class="leadingPlate">
    			<img
    				src="images/about/fastcat5.jpg"
    				alt="Our Power Cats"
    			/>
    		<!-- .leadingPlate --></div>
    		<p>
    			Wave-piercing hull forms, displacement hull forms, displacement hull forms with canoe shaped sterns: commonality? Our desire is to modern-build fuel-efficient composite power cats suited to an owner's intended use. We take pride in our ability to meet an owner's requirements for performance, cost and accommodations through careful selection of vessel type, size, layout, horsepower and drive line system.
    		</p>
    		
    		<h3>Relationships</h3>
    		<p>
    			We enjoy meeting each new client and learning about their home, business needs and future plans while discussing their vessel needs. As a life philosophy we believe that relationships are more important than issues. In our relationship with employees, suppliers and clients, we endeavor to embody that great principle.
    		</p><p>
    			We look forward to building you a great boat.<br />
    			The crew at Gold Coast Yachts, Inc.
    		</p>
    
    	<!-- #content --></div>
    	
    	<hr />
    
    	<ul id="sideBar">
    		<li>
    			<a href="/catamarans.html">
    				<img src="images/catamarans_thumb.jpg" alt="Day Sail Catamarans" />
    				Day Sail Catamarans
    			</a>
    		</li><li>
    			<a href="/yachts.html">
    				<img src="images/cruisingYachts_thumb.jpg" alt="Cruising Yachts" />
    				Cruising Yachts
    			</a>
    		</li><li>
    			<a href="/guestShuttles.html">
    				<img src="images/guestShuttles_thumb.jpg" alt="Guest Shuttles" />
    				Guest Shuttles
    			</a>
    		</li><li>
    			<a href="/ferries.html">
    				<img src="images/ferries_thumb.jpg" alt="Ferries" />
    				Ferries
    			</a>
    		</li><li>
    			<a href="/snorkel.html">
    				<img src="images/snorkel_thumb.jpg" alt="Snorkel Boats" />
    				Snorkel Boats
    			</a>
    		</li><li>
    			<a href="/dive.html">
    				<img src="images/dive_thumb.jpg" alt="Dive Boats" />
    				Dive Boats
    			</a>
    		</li><li>
    			<a href="/party.html">
    				<img src="images/party_thumb.jpg" alt="Party Cats" />
    				Party Cats
    			</a>
    		</li><li>
    			<a href="/response.html">
    				<img src="images/yachts_thumb.jpg" alt="Response Vessels" />
    				Response Vessels
    			</a>
    		</li>
    	</ul>
    	
    	<hr />
    
    <!-- #pageWrapper --></div>
    
    <div id="footerWrapper"><div id="footer">
    
    	<a href="http://www.abycinc.org/"	class="firstLogo">
    		<img src="images/ABYClogoSm.gif" alt="ABYC Logo" />
    	</a>
    	
    	<a href="http://www.abbra.org/" class="secondLogo">
    		<img src="images/ABBRAlogoSm.gif" alt="ABBRA Logo" />
    	</a>
    	
    	<ul>
    		<li><a href="/index.html">Home</a></li>
    		<li><a href="/about.html">Company</a></li>
    		<li><a href="/brokerage.html">Brokerage</a></li>
    		<li class="last"><a href="/contact.html">Contact Us</a></li>
    	</ul>
    	
    	&copy; Gold Coast Yachts, Inc. All Rights Reserved.<br />
    	
    	<script type="text/javascript"> {PageLastUpdated();} </script>
    	
    	<div>
    		Site design &amp; hosting provided by
    		<a href="http://www.bigbluedesign.com">Big Blue Design</a>
    	</div>
    	
    <!-- #footer, #footerWrapper --></div></div>
    
    </body></html>
    If I have time later I'll spend the ten to twenty minutes it should take to put together the CSS for that -- probably hit that after dinner.

  2. #77
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    ... and here it is.

    http://www.cutcodedown.com/for_other.../template.html

    The HTML grew a bit with a few extra div to break up some sections and to apply the visual effects as I opened it up into a semi-fluid layout instead of the crappy fixed width. As with all my examples the directory:

    http://www.cutcodedown.com/for_others/jenniferBigBlue/

    is wide open for easy access to the CSS, htc and images. Tested working IE 5.5 through 9 Beta, Opera 10.5 and 11, FF 3.5 and 3.6, and the latest flavors each of Saffy and Chrome. (though in IE6 there's extra padding at bottom of page I can't track down -- OH WELL!). Valid XHTML 1.0 Strict, though there are a few browser specific properties that prevent the CSS from validating. There is no excuse for invalid markup, but invalid CSS is a reality we are stuck dealing with. So long as you know WHY the property is invalid, it's ok to ignore it.

    You can see a lot of changes there in terms of the image use, image construction/slicing, and what's showing for text. A lot of that was done to make it easier to change the content in the future (like the sidebar), but an even better reason was so that when images are turned off with CSS on, there's still useful content for the user.

    As mentioned it's also now a semi-fluid layout, dynamically scaling the content to fit between 752px (800 friendly) and 1104px (1152 friendly). All the content area text has been converted to dynamic (%/EM) fonts for increased accessibility, while the areas where fixed (px) fonts are required so the layout doesn't break on LF/120 / 7LF/150 / HH75dpi systems the fonts are declared at 14px or larger so as to not be impossible to read on those systems.

    You'll also notice the inclusion of accesskeys with titles on some .jumpto links. These cover a wide array of accessibility issues including CSS off users, small screen access, and accesskey menus (hence the title attributes). Go into Opera with that page and hit "shift-esc" to see exactly why those are declared the way they are! (works much better if you turn on "small screen" previewing -- aka what Opera Mobile typically shows you and Mini can be configured to do)

    The 7.6k of HTML and 5k of CSS comes to pretty much the same total as your original 13K, but it doesn't need the 7k of scripting for the menu to function on the majority of browsers, only throwing the 2.6k .htc file at IE6 or lower. The grand total of the rewrite is 111k in 21 files, so while it gains three extra handshakes it shaves off 42k of bandwidth -- a quite nice trade, especially with the usability enhancements to the page like hover states.

    Hope this helps.

  3. #78
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Holy Cow!! I didn't understand 75% of what you said, but I hope to learn. I'll have to study your comments in greater detail. Just remember, you have to talk to me like I'm a 2 year old. I was still using tables two weeks ago!

    Thanks so much for taking the time to run my page through the ringer. I really want to get it right before I start converting all the pages so I appreciate your thorough review. I wonder how long it will take for me to understand most of what you said. lol

    Thanks again!

  4. #79
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Deathshadow/Jennifer (and Paul, Dave et al) - the last few pages have almost represented a perfect case study which go some way to answering the question at the very beginning of this thread. This thread should be stickied for anyone asking the question in future. Not only were answers provided, but the logical arguments against css layout were brought up and addressed - and with very few dogmatic "'cause that's how it is!" posts - making it worthwhile reading for anyone who is still not getting the need for change.


    Nice job all


    Jennifer - as for "getting" it, give yourself a couple of months coding layouts with css and you will probably run into most of the pitfalls that exist. Even if you don't instantly memorise the solutions, you'll know where to come/look for them. With the length of time behind you using tables, it's easy to forget just how many workarounds and nasties table layouts present (particularly when you look at the "early days").
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  5. #80
    SitePoint Evangelist Unit7285's Avatar
    Join Date
    Dec 2003
    Location
    UK
    Posts
    512
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JenniferBigBlue View Post
    I was still using tables two weeks ago!
    And of course all that table layout experience is still essential for HTML email layout, where CSS layout isn't adequately supported. So it won't go to waste!


    Paul

  6. #81
    SitePoint Wizard
    Join Date
    Nov 2005
    Posts
    1,191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JenniferBigBlue View Post
    1) Easier Site-Wide Changes Ė CSS proponents claim site-wide changes are easier with CSS because you change one file and boom, it changes on all pages. I use Dreamweaver template files. I make a change to the template file and boom, it changes on all pages. Whatís the difference?
    Dreamweaver costs $600. If I am to take over a site you created (hey, you could get struck by lightning) then I must pay this tax or redo all of the work you have done.

    Why?!? CSS, tables, and server side includes are nothing special. Why does dreamweaver require $600 to do what everyone else does for free? Looking at my setup right now, I have nix, geany (like notepad++), netbeans, and eclipse installed. None of these cost a single penny, all of these support single file site wide editing, and most importantly, none of them require themselves to be installed to do this.

    TL;DR You need to understand more about what you do. Open standards are a corner stone of the web. Building sites that are locked in to proprietary software is just silly.

    disclaimer: I have not read the 4 pages of comments, assume this has been covered, but felt like speaking.

  7. #82
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,253
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by hash View Post
    Dreamweaver costs $600. If I am to take over a site you created (hey, you could get struck by lightning) then I must pay this tax or redo all of the work you have done.

    Why?!? CSS, tables, and server side includes are nothing special. Why does dreamweaver require $600 to do what everyone else does for free? Looking at my setup right now, I have nix, geany (like notepad++), netbeans, and eclipse installed. None of these cost a single penny, all of these support single file site wide editing, and most importantly, none of them require themselves to be installed to do this.

    TL;DR You need to understand more about what you do. Open standards are a corner stone of the web. Building sites that are locked in to proprietary software is just silly.

    disclaimer: I have not read the 4 pages of comments, assume this has been covered, but felt like speaking.
    Ummmm. Why would you need to buy dreamweaver. The html generated is still html, and any text editor will do. She's not talking about compiled code, just straight html.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  8. #83
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,029
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hash View Post
    Dreamweaver costs $600. If I am to take over a site you created (hey, you could get struck by lightning) then I must pay this tax or redo all of the work you have done.
    WTH?.. Dreamweaver is just a tool. You can take it over with whatever tool you like and run with it. If you did have Dreamweaver, you could take advantage of any templates (check in/check out) settings Jennifer has set up but the html/css should be pretty straight forward.

    It's not like the old days of GoLive
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development

  9. #84
    SitePoint Zealot
    Join Date
    Sep 2010
    Location
    Brighton, UK
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by awasson View Post
    WTH?.. Dreamweaver is just a tool. You can take it over with whatever tool you like and run with it. If you did have Dreamweaver, you could take advantage of any templates (check in/check out) settings Jennifer has set up but the html/css should be pretty straight forward.

    It's not like the old days of GoLive
    I think Jennifer's original point was that she didn't need to use CSS for layout because her dreamweaver template would let her update all her pages at once anyway. Without dreamweaver all you would have would be a very large directory full of table laden html files.

  10. #85
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,029
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by goldfidget View Post
    I think Jennifer's original point was that she didn't need to use CSS for layout because her dreamweaver template would let her update all her pages at once anyway. Without dreamweaver all you would have would be a very large directory full of table laden html files.
    My point is that it makes no difference if you are going to take over a Dreamweaver project of multiple html docs or a project of multiple html docs made in notepad. You still have to deal with the document management one way or another and you have to choose the appropriate tool for the job.

    Hash's objection was that because the site was initially authored in Dreamweaver, he would have to buy Dreamweaver to manage the site. That's not true. The brand of tool doesn't matter. You can successfully manage a Dreamweaver site with CuteFTP and notepad if you like
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development

  11. #86
    SitePoint Zealot
    Join Date
    Sep 2010
    Location
    Brighton, UK
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by awasson View Post
    My point is that it makes no difference if you are going to take over a Dreamweaver project of multiple html docs or a project of multiple html docs made in notepad. You still have to deal with the document management one way or another and you have to choose the appropriate tool for the job.

    Hash's objection was that because the site was initially authored in Dreamweaver, he would have to buy Dreamweaver to manage the site. That's not true. The brand of tool doesn't matter. You can successfully manage a Dreamweaver site with CuteFTP and notepad if you like
    I'm all for editor agnosticism, in fact I make a point of changing editor at least once a year but...

    I mentioned this before, a couple of years ago a client contacted me wanting some changes to their masthead and footer. It should have been a really simple job, and their site was actually quite well made, but their first designer had given them a Dreamweaver template to use as a CMS. This had then been hacked in a text editor by another designer who had not done quite such a good job. The upshot was that the template was now broken randomly across the site, they couldn't update their content via the special dreamweaver widgetty CMS tags and I couldn't make the changes they needed. It took me almost a day to fix 80 pages by hand.

    Anyhow, veering slightly off topic, if a website needs more than 10 pages, the right way to do that imo is by skinning a CMS. That way, anyone can edit it anytime using whatever technology they happen to have to hand. Just my 2 cents

  12. #87
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,029
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by goldfidget View Post
    I mentioned this before, a couple of years ago a client contacted me wanting some changes to their masthead and footer. It should have been a really simple job, and their site was actually quite well made, but their first designer had given them a Dreamweaver template to use as a CMS. This had then been hacked in a text editor by another designer who had not done quite such a good job. The upshot was that the template was now broken randomly across the site, they couldn't update their content via the special dreamweaver widgetty CMS tags and I couldn't make the changes they needed. It took me almost a day to fix 80 pages by hand.
    Unless I'm mistaken dreamweaver widgetty CMS tags are hidden inside html comments so yes, someone in a text editor can certainly wreak havoc on Dreamweaver's templating CMS but it shouldn't affect the way one manages a website outside of Dreamweaver. On further thought, it might be possible to repair damage done to a Dreamweaver template controlled site although it might be frustrating and just as time consuming.

    I've had similar situations and find/replace using regular expressions has been a good friend (after making a copy and backing up the website). Fortunately it hasn't happened often recently but I had to do something like that a couple of years ago and it was an unnerving process.


    Quote Originally Posted by goldfidget View Post
    Anyhow, veering slightly off topic, if a website needs more than 10 pages, the right way to do that imo is by skinning a CMS. That way, anyone can edit it anytime using whatever technology they happen to have to hand. Just my 2 cents
    Yes, absolutely

    Apologies to the original poster for straying off topic.
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development

  13. #88
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wanted to say thanks again deathshadow for taking the time to review and mess with the CSS for me! It was helpful.

    Quote Originally Posted by deathshadow60 View Post
    Appearance-wise it's problematic due to the use of absurdly undersized fixed metric fonts.
    I like the images and I'm okay with the font size.

    Quote Originally Posted by deathshadow60 View Post
    This is made even more confusing by the sidebar having what appear to be content images that are being loaded via a class in the CSS -- you have those backwards!
    What do you mean? What do I have backwards?

    Quote Originally Posted by deathshadow60 View Post
    The dropdown menus should be nested IN the menu, and not placed after it with DIV's around them on what should ALSO be lists.
    I tried nexting it and the javascript stopped working.

    Quote Originally Posted by deathshadow60 View Post
    You also seem to be using presentational classes -- stuff in the HTML, and this includes class and ID names, should say what things ARE, NOT how they are going to appear; as such classes like "floatleft" are so pointless, you might as well go back to HTML 3.2 and say 'align="left"' -- completely missing the POINT of separation of presentation from content.
    I think I fixed all those.

    Quote Originally Posted by deathshadow60 View Post
    Your use of heading tags is completely nonsensical. NOTHING in the footer qualifies as the 'start of a new subsection, it is improper to skip heading levels, so there is ZERO reason those should be h4 and h6
    I changed that.

    Quote Originally Posted by deathshadow60 View Post
    -- just as you should NOT be using scripting to emulate target="blank" as the REASON it's deprecated is you shouldn't be forcing that choice down the users throat in the first place. They want it in a new window, they can middle-click or shift-click if they're a Mac... ok, I won't say the word I was going to use.
    I changed it and put it in the CSS. The client wants it to open in a new window.

    Quote Originally Posted by deathshadow60 View Post
    Also, the image replacement method used on that heading doesn't work when images are disabled, defeating the POINT of using image replacement in the first place!
    Isn't image replacement for those on screen readers?

    Quote Originally Posted by deathshadow60 View Post
    The drop shadow is ridiculously large a file -- while that's a 'easy' technique for applying one, it's not exactly internet friendly thanks to the 18k of "nothing".
    Don't call my drop shadow "nothing", it's nice!

    Quote Originally Posted by deathshadow60 View Post
    To that end I also can't figure out why you are using images for that main menu -- unless it's to make it intentionally hard to read.
    You mean the drop down menu? Doesn't look small to me. I also prefer fixed width. I don't like the fluid thing.

    So I've made some changes per your recommendations and run it throught the validator and past. Any more feedback from people would be appreciated!

    http://goldcoastyachts.com/GCYnew/testingRev1.htm

    Thanks,
    Jennifer

  14. #89
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by JenniferBigBlue View Post
    What do you mean? What do I have backwards?
    If the images are part of the content then they should be <img> elements in the HTML.

    To be honest, I'm not sure that the images in the left-hand sidebar are content images, because they are simply illustrations for the accompanying text ... except that you've included the text in the image. I would much rather see that text as text, which will look smarter and make it look more professional. (It's a funny thing. Nice, smooth anti-aliased fonts look the bees knees in a PDF or wherever else, but on a web page, they just shout "I've put this text in a picture instead of rendering it as text", which everyone knows is the wrong thing to do)

    If you allow the text to be seen as text, then it would arguably make sense to have the graphic loaded as a background image through the CSS.

  15. #90
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,029
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    I would say that images in the left side navigation would and should be considered navigational elements as they are CSS replacement for regular text links. I see no reason why this should be considered a poor practice and in fact is probably the best option with that particular design.

    BTW: I think you've done a great job at jumping straight into html/css
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development

  16. #91
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I like the images and I'm okay with the font size.
    You young people with your excellent eyesight! : )

    Crusty either linked to or at least mentioned the reason for em or % fonts. It's not for YOU, it's for your USERS. Crusty himself doesn't have the best eyes so his Winblows is set to the 120dpi (the equivalent of sitting 1/3 closer to the screen technically). The rules of the interwebs:
    -you don't know the user's OS or windowing system (you could measure this with scripts but there's no guarantee of accuracy)
    -you don't know the user's fonts available
    -you don't know their dpi settings OR their screen resolution... you could get their screen size with Javascript, but that actually only tells you how large they've made the browser window, which might not be maximised!
    -you don't know if they have one of those goofy sidebar thingies open in their browser, or extra toolbars on the top or bottom of their browsers.

    So you can avoid a lot of problems by making some things, notably text, more flexible. For everyone who likes them the way they are first presented, great. For those of us with less-than-perfect eyesight or Large Font settings, we can adjust.

    Most browsers will zoom either way, but Internet Explorer (including 9 still!) will not do a text resize on text set in px metrics. And then there's the retards who removed text resize from the Chrome browser entirely... not sure what they drink in their coffee over there, but this is why Chrome cannot be my main browser.

    Hope that answers your question (I didn't address pictures).

  17. #92
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,029
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by awasson View Post
    I would say that images in the left side navigation would and should be considered navigational elements as they are CSS replacement for regular text links. I see no reason why this should be considered a poor practice and in fact is probably the best option with that particular design.

    BTW: I think you've done a great job at jumping straight into html/css
    On further thought about the design treatment of the left side navigation, I think I would probably try a couple of treatments before settling on one. In the past I've gone with similar image replacement schemes but it might be advantageous to attempt to insert the images in <img> tags and then use sIFR or @font-face to embed a font for the text, for better accessibility or just better use of html markup.

    I would have to weigh the benefits with the amount of effort required to make it all happen. I don't have a problem with the image text because it is fairly well rendered on my screen and screen readers and search engines will see the raw hypertext link but I do like the idea of using text for text and images for imagery.
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development

  18. #93
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    And then there's the retards who removed text resize from the Chrome browser entirely... not sure what they drink in their coffee over there, but this is why Chrome cannot be my main browser.
    They did what!? Urgh.

    And can I just say, on a related issue, that I hate page zoom, and much prefer text resize. No I don't want the whole page blown out and horizontal scrollbars, I just want to increase the 10/11px font sizes that so many sites like I have almost-normal eyesight and even I can't read that stuff....

  19. #94
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Yup: http://www.google.com/support/forum/...19548ec6&hl=en

    Aaaarrrrrrrrggggggggg!

    But I'm sure someone will write a plugin for it, if they haven't already. Like you, I 99% of the time just want the TEXT larger, not the images all pixellated and out of proportion and ginormous scrollbars and other crap. Just, readable text. ARG chrome ARG. But, whatever. I have 5 other browsers to choose from.

    YA HEAR THAT CHROME DEVS? YEAH?? Sorry, they can't hear me over the buzz of happy Chrome users. Damn.

  20. #95
    Non-Member
    Join Date
    Jun 2010
    Location
    47į27′35″N 26į18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry S(weet)p(erson), but I disagree.

    Remember those fixed width x height containers? What if the text in them is made large, but it would not fit in it, and you'd have an ugly overflow?

    Remember those 16x16 icons used in many CMSs? I would also like images be made larger sometimes.

    That said, three options (checkboxes): Zoom html elements, Zoom content text, Zoom content images, would sound more complete and accurate.


    The approach they take now is based on word processing apps. But that's for print.



    On a second thought, probably some SERIOUS CSS3 zoom property would fit best.

  21. #96
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I'm sorry S(weet)p(erson), but I disagree.
    Lawlz!

    Remember those fixed width x height containers? What if the text in them is made large, but it would not fit in it, and you'd have an ugly overflow?
    Overflow is always ugly, and pretty has to take a back seat sometimes.

    I HAVE enlarged text of sites who are silly enough to have heighted containers and sometimes I'll highlight that text but at least I don't get the issues I get with zoom.

    Remember those 16x16 icons used in many CMSs? I would also like images be made larger sometimes.
    Now if I DO want to "enlarge" an image, I DO switch over to zoom. I have done that before, maybe 2 or 3 times, but I enlarge text on probably most sites I visit. Definitely rather have the use of one available over the other... if those sites were all zoomed, my nagivation would suffer.

    That said, three options (checkboxes): Zoom html elements, Zoom content text, Zoom content images, would sound more complete and accurate.
    That prolly would be cool, because enlarging text does keep checkboxes tiny. To enlarge those I usually keep my whole Desktop set to Large Font and then set "Applications" to also inherit that, which does hit Firefox (not Opera tho).

    On a second thought, probably some SERIOUS CSS3 zoom property would fit best.
    Nah I kinda like the three-choice thing above. Built into the browser so it can affect (browser)chrome, which often has control over form controls.

  22. #97
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Attention Smart Programmers Who Have Been Posting To This Thread....

    First let me say, I'm starting to really groove on this CSS stuff. The two books on CSS arrived yesterday and I'm downright giddy with all the stuff that's now possible! So thank you for your patience and sticking around to "sell" me on switching from tables to CSS. I'm glad I came here. I can already tell the next time I design a site I will do so with CSS in mind.

    Throughout this thread I've heard many of you talk about user behavior. You've talked of zooming, turning off images, going into your browser and changing preferences and settings, opening a new window by right clicking, etc. I think because you work in the internet business, are surrounded by similarly-minded co-workers, and because of your natural talents for working on computers your perspective of the "average internet user" may be a bit warped.

    The average internet surfer uses whatever browser came with their computer. (They don't know or care that others are available.) and they never touch preferences. I think if you worked as a customer service rep where you had to deal with the typical internet user all day, you would be utterly amazed (and probably disgusted) at how little they know!

    I know personally having to deal with clients over the last 15 years it still amazes me that I have to tell customers to click Reload/Refresh to see updates/changes to their site. And half of those don't even know what I mean or where that button is!! Hell, when I ask what browser and version they're using, they don't know and aren't sure how to find out. And these are generally intelligent people who own businesses. (One client didn't know what I meant by the word "browser" hehehe)

    So in your evaluation of site functionality I think this might be useful information to keep in the back of your mind. If you're spending a large amount of time getting a site to function correctly if they have images turned off, or if they have changed their preferences on font size, it MIGHT be a big waste of time.

    Just a thought.

  23. #98
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The average internet surfer uses whatever browser came with their computer. (They don't know or care that others are available.) and they never touch preferences. I think if you worked as a customer service rep where you had to deal with the typical internet user all day, you would be utterly amazed (and probably disgusted) at how little they know!
    You have a point about many users (those merely unhappy about something but completely unaware that they can do something about it), but those with actual disabilities and strong limits end up changing their settings by necessity. They simply cannot use the web at all at default settings... and yeah, they ask their kids/friends/family how to change it, true.

    I build for them knowing that they are very likely a small percentage. Most of the visitors to my sites are sighted, use Internet Explorer 6 and 7 on Windows XP on default settings with scripts on.

    I can't really afford to block out someone with 20% vision or someone who chose to use Safari on a Mac though. So that's why we build flexibly... as developers it's part of our jobs (I believe, my fat opinion talking here) to keep minority users in mind when developing, especially for all teh small easy things we can do to make stuff easier for them.

    So in your evaluation of site functionality I think this might be useful information to keep in the back of your mind. If you're spending a large amount of time getting a site to function correctly if they have images turned off, or if they have changed their preferences on font size, it MIGHT be a big waste of time.
    Yes, exactly. And as you either learn new stuff you can do with code or get more comfortable with what's easy to do and what's not (and this constantly changes, at least for me!), where you draw the line per site or per project will change.

    If changing fonts from px to em's was a huge chore for me, I'd probably consider not doing it. There is a work-to-audience ratio, same as we use to determine if we're going to support IE5 or whatever.

  24. #99
    SitePoint Enthusiast Ijj's Avatar
    Join Date
    Jan 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JenniferBigBlue View Post
    So in your evaluation of site functionality I think this might be useful information to keep in the back of your mind. If you're spending a large amount of time getting a site to function correctly if they have images turned off, or if they have changed their preferences on font size, it MIGHT be a big waste of time.

    Just a thought.
    You said the common user just uses whatever is handed to them. That's almost irrelevant. Every device is different, every browser is different. You're going to have to ensure your site works one way or another. Even if no one ever touched their preferences, I would still have to include media queries and make sure a page resizes well. Some devices might have images or CSS turned of by default. Some browsers/devices might be text-only. Some (by some I mean all) mobile browsers might automatically scale the page or alter the viewport/ICB in some strange way. It's not just user preferences you need to accommodate.

  25. #100
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by JenniferBigBlue View Post
    So in your evaluation of site functionality I think this might be useful information to keep in the back of your mind. If you're spending a large amount of time getting a site to function correctly if they have images turned off, or if they have changed their preferences on font size, it MIGHT be a big waste of time.

    Just a thought.
    That's exactly what they said about putting ramps outside supermarkets

    This is really an accessibility topic and is straying of topic from the original question.

    A comment like " it MIGHT be a big waste of time " will land you in a heap of trouble and possibly lose you a lot of visitors. These days there are apparently almost as many "silver surfers" as there are younger surfers and the majority of these "silver surfers" will have some sort of visual impairment and will most likely know how to wind up the text to a readable level.

    There is not really such a thing as an average surfer these days and to cut out everyone who doesn't fit your perspective on an average surfer is a brave and short-sighted (lol) thing to do.

    If you said to a client that you were immediately going to ignore 20 - 30% of their customer base before you started, I think I know what the client will say.

    Besides if you have a public site (or government site) then you are required by law in some countries to make these accessible to all (within reason) no matter what the disability.

    However, having said all that and if you have followed the advice already given in the thread already then you are already most of the way and there is not a " big time" to waste anyway. You will already have addressed many of the required issues.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •