Terrible design transition

Discussion in 'HTML & Website Design' started by manofmany, Jan 25, 2008.

  1. #1
    So I was recently asked to help upkeep a rather large local orginizations website. Please take a look: http://billiecreekvillage.com

    Well, a couple other guys were added to the equation. Fair enough. They apparently are living in the 90's and call themselves webmasters and with talking to them they have no idea about html and think you have to use frontpage to create a site. Yuck!

    Anyways, they think the site design needs changed to reflect their website: http://parkeplayers.com and they want to add music. Please post your feelings and opinions so that I can show the new owner that I as a webmaster am not the only one who would want no part in their rubbish doings.
     
    manofmany, Jan 25, 2008 IP
  2. nicangeli

    nicangeli Peon

    Messages:
    828
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Without a shadow of a doubt, the first site posted is of a far higher quality than the second!

    Good luck, we all meet "webmasters" like those guys as some point...

    Nick

    EDIT:

    I just took a second look at the second website, towards the left of the ste is a small banner saying get ms internet explorer. That sums their site up really.
     
    nicangeli, Jan 25, 2008 IP
  3. HDaddy

    HDaddy Active Member

    Messages:
    287
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #3
    I agree with nicangeli, the first one is WAAAAAY better than the second one. I think u should talk to the organisation that owns the first site that you´d prefer people who are living at this era, rather than in the 90`s and point to them that people who keep up sites should know their html and preferably never use music in sites (in some sites they belon imo, but not in this one. Hope you will be the winner in this battle. ;)
     
    HDaddy, Jan 25, 2008 IP
  4. manofmany

    manofmany Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks for the confirmation. Here's the issue. The new owner is my fiances uncle. The self-proclaimed webmaster is the son of a very important figure in their county who created a nationwide event that landed their county on the map. I think I will just get with the new owner and express my feelings on where the site is headed and explain that in todays market, they are going to loose visitors to a site of that nature.

    I like the lightweight setup the current site has along with function. Frames with buttons just aren't going to cut it.
     
    manofmany, Jan 25, 2008 IP
  5. D_C

    D_C Well-Known Member

    Messages:
    1,107
    Likes Received:
    21
    Best Answers:
    1
    Trophy Points:
    160
    #5
    I agree 100%

    The site you currently have is by far better designed than the second. It looks like something I made before I learned html 100%, back before highschool.
     
    D_C, Jan 25, 2008 IP
  6. vibinhari

    vibinhari Notable Member

    Messages:
    5,097
    Likes Received:
    320
    Best Answers:
    0
    Trophy Points:
    255
    #6
    Awww... eww dude, the second site so totally... umm... yuck (temporary lack of vocabulary)... I mean eww... Time to put you foot down with ze "webmasters" or put you foot in the "webmasters"..
     
    vibinhari, Jan 25, 2008 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Tell them to join us in THIS millenium.

    Honestly, both have issues, but from a user point of view the first page is much more tasteful, even if it is saddled with absurdly undersized fixed metric fonts.

    Let's review each in turn.

    "Billie Creek" is a crappy little fixed width design with fixed metric fonts. Anyone with a screen bigger than 800x600 is diving for their zoom control the moment they land on the page - the layout breaks in all browsers other than IE because it's relying on tables for something that ... well, shouldn't be wasting a table. The code does not validate... and frankly it's 6k of HTML for something that probably shouldn't even break the 3k mark. Case in point, this is probably ALL the HTML that home page should need:

    <!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=iso-8859-1" 
    />
    
    <link 
    	type="text/css" 
    	rel="stylesheet" 
    	href="screen.css" 
    	media="screen,projection" 
    />
    
    <title>Billie Creek Villiage</title>
    
    </head><body>
    
    <div id="container">
    
    	<h1>
    		Billie Creek
    		<b>VILLIAGE</b>
    		<span>Rockville, IN</span>
    		<em><!-- image sandbag, do not remove --></em>
    	</h1>
    	
    	<ul id="mainMenu">
    		<li><a href="index.html">Home</a></li>
    		<li><a href="village.html">Village Info</a></li>
    		<li><a href="events.html">Special Events</a></li>
    		<li><a href="groups.html">Groups</a></li>
    		<li><a href="lodging.html">Lodging</a></li>
    		<li><a href="contact.asp">Contact</a></li>
    	</ul>
    	
    	<div class="boxTop"><div></div></div>
    	
    	<div class="boxContentWrapper"><div class="boxContent">
    	
    		<div id="contentWrapper"><div id="content">
    		
    			<img src="images/feature.jpg" class="splashImage" alt="covered bridge" />
    	
    			<h2>to preserve, to educate, to entertain</h2>
    			<p>
    				Travel back in time at historic Billie Creek Village. From one of the
    				country's best Civil War Re-enactments to classic car shows to
    				Christmas in the Village, there are entertainment and educational
    				opportunities year-round.
    			</p>
    			
    			<ul id="placeLinks">
    				<li>
    					<a href="general_store.html">
    						<img src="images/general_store.jpg" alt="General Store" />
    						General Store
    					</a>
    				</li><li>
    					<a href="bcinn.html">
    						<img src="images/bc_inn.jpg" alt="Billie Creek Inn" />
    						Billie Creek Inn
    					</a>
    				</li><li>
    					<a href="events.html">
    						<img src="images/civil_war.jpg" alt="Special Events" />
    						Special Events
    					</a>
    				</li><li>
    					<a href="bloomer_house.html">
    						<img src="images/bloomer_house.jpg" alt="Bloomer House" />
    						Bloomer House
    					</a>
    				</li>
    			</ul>
    	
    		<!-- #contentWrapper, #content --></div></div>	
    		
    		<div id="sideBar">
    			
    			<h2>Upcoming Events</h2>
    			<ul>
    				<li><a href="events.html">Steam Harvest Days</a></li>
    				<li><a href="events.html">Sorghum &amp; Cider Days</a></li>
    			</ul>
    			
    			<h2>Visitor Information</h2>
    			<ul>
    				<li><a href="village.html">Admissions</a></li>
    				<li><a href="groups.html">Group Tours</a></li>
    				<li><a href="directions.html">Directions</a></li>
    			</ul>
    		
    		<!-- #sidebar --></div>
    	
    	<!-- #boxContent, #boxContentWrapper --></div></div>
    		
    	<div class="boxBottom"><div></div></div>
    
    </div>
    
    </body></html>
    Code (markup):
    *** NOTE *** not tested/validated, this is just a rough. Still it's 2.6k and should be able to be made not only identical to how it's rendering in IE, but render PROPERLY in all other browsers, something that right now it's falling a bit short on.

    The design is good, the code is garbage. There is more of 1997 to the CODE than 2008. Looking at the code one can also tell that the directory structure is convoluted, overthought and in general designed to make you throw code at overcomplicating something that SHOULD be simple. (especially since you apparantly have ASP available, so at bare minimum the pages should be set up 'poor man')

    ----------------------- on to the next page ----------------------

    "ParkePlayers" is a crappy export from Office that can barely even be CALLED a web page. From a user end point of view the page is nothing to write home about - hell, there are myspace pages that are better designed!!! On the code side despite the infantile dated layout it is absurdly overcomplicated. It also has huge stylistic issues as it's not enough content to fill a single 800x600 page, yet ends up being two pages worth of white space at 1600x1200. The CLASSIC blunder of having no actual content even on the SCREEN when the page loads, even at 1024x768 is a total miserable FAILURE at web design, and a trademark of the WORST in 1990's web design.

    Seriously, how many of us here laugh in hysterics when we see:
    <p style="text-align: center">&nbsp;<br>
    <a style="color: #FFFFCC; text-decoration: none" href="index.htm"><b>Marquee</b></a>
    </p>
    <p align="center">
    <a style="color: #FFFFCC; text-decoration: none" href="production_hist.htm">
    <b>History</b></a> </p>
    <p align="center">
    <a style="color: #FFFFCC; text-decoration: none" href="ritz_theater.htm"><b>
    Ritz Theater</b></a> </p>
    <p align="center">
    <a style="color: #FFFFCC; text-decoration: none" href="restoration.htm"><b>
    Ritz Restoration</b></a> </p>
    <p align="center">
    <a style="color: #FFFFCC; text-decoration: none" href="membership.htm"><b>
    Membership</b></a> </p>
    <p align="center">
    <a style="color: #FFFFCC; text-decoration: none" href="gallery.htm"><b>Photo 
    Gallery</b></a> </p>
    <p align="center">
    <a style="color: #FFFFCC; text-decoration: none" href="parke_players_links.htm">
    <b>Links</b> </a></p>
    
    Code (markup):
    /FAIL/ at intarweb. If you don't know what's wrong with that, you shouldn't even be writing websites. Tables around single elements, presentational markup, hell, the use of &nbsp for tabbing in content - They've got no excuses for pointing fingers at the first page, as this is an amaturish train wreck that I'd expect better from a five year old.

    These guys aren't even stuck in 1997 - at least in 1997 we HAD CSS even if you couldn't widely deploy it. This page is more like 1995. ANYONE still using frontpage has NO BUSINESS telling ANYONE how to design, deploy or have anything to do with a web page. PERIOD. The icing on that is the 'get IE' link - the pinnacle of the mid 90's browser wars and sure sign of a total #DDD in web design.

    While this page has three times the text content of the first one, it should actually be LESS code because the layout is so piss simple. Again, this is fat, bloated and dated code that has no place on the modern internet - If someone linked me to that page, I'd scoff at it as 'web rot'.

    Let's see... Not a lot of point in doing so, but if I was to write that layout today, the code would probably be something like this:

    <!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=iso-8859-1" 
    />
    
    <!--<link 
    	type="text/css" 
    	rel="stylesheet" 
    	href="screen.css" 
    	media="screen,projection" 
    />-->
    
    <title>Parke Players, Inc. Online</title>
    
    </head><body>
    
    <div id="contentWrapper"><div id="content">
    	<h1>
    		Parke Players Online
    		<span><!-- image sandbag, do not remove! --></span>
    	</h1>
    	
    	<div class="imageBox">
    		<img src="Ritz_Card_final.x400.JPG" 
    			width="472" height="366"
    			alt="Ritz Theatre"
    		/>
    		The Ritz Theater - Our Home Since 1971
    	</div>
    	
    	<h2>2008 Season Events</h2>
    	
    	<h3>
    		Parke Players 2008<br />
    		Maple Fair Production
    	</h3>
    	<img src="2007/Fools.JPG" 
    		width="415" height="338"
    		alt="Fools - By Neil Simon"
    	/>
    
    	<div class="details">
    		February 22 and 23 at 8:00 PM<br />
    		February 29 and March 1 at 8:00 PM<br />
    		- Parke County Night -<br />
    		Tuesday, March 5 at 7:00 PM
    	</div>
    	<h4>FOOLS: A COMIC FABLE</h4>
    	<div class="author">Neil Simon 1981</div>
    	<p>
    		Leon Tolchinsky is ecstatic.&nbsp;&nbsp; He's landed a terrific
    		teaching job in an idyllic Russian hamlet.&nbsp; When he arrives
    		he finds people sweeping dust from the stoops back into their 
    		houses and people milking upside down to get more cream. The town
    		has been cursed with chronic stupidity for 200 years and Leon's 
    		job is to break the curse. No one tells him that if he stays more
    		than 24 hours and fails to break the curse, he becomes stupid too.
    		Why doesn't Leon leave? He has fallen in love with a girl so stupid
    		that she has only recently learned how to sit down. Don't miss this
    		classic Neil Simon comedy during your visit to the 45th annual Parke
    		County Maple Fair in late February and early March 2008! 
    	</p>
    
    <!-- #content, #contentWrapper --></div></div>
    
    <div id="sideBar">
    	<ul id="mainMenu">
    		<li><a href="index.htm">Marquee</a></li>
    		<li><a href="production_hist.htm">History</a></li>
    		<li><a href="ritz_theater.htm">Ritz Theater</a></li>
    		<li><a href="restoration.htm">Ritz Restoration</a></li>
    		<li><a href="membership.htm">Membership</a></li>
    		<li><a href="gallery.htm">Photo Gallery</a></li>
    		<li><a href="parke_players_links.htm">Links</a></li>
    		<li><a href="mailto:%20parkeplayers@parkeplayers.com">Email Us</a></li>
    		<li><a href="ticketform.htm">Tickets</a></li>
    	</ul>
    	
    	<a href="http://www.aact.org/index.htm">
    		<img src="images/aactmember1.gif" width="129" height="62" alt="AACT Member"/>
    	</a>
    	
    	<div class="address">
    		Parke Players, Inc<br />
    		P.O. Box 254<br />
    		Rockville, IN 47872<br />
    		765-569-PLAY
    	</div>
    	
    <!-- #sideBar --></div>
    
    <div id="footer">
    	<div class="takePlace">
    		ALL EVENTS TAKE PLACE<br />
    		At The Historic<br />
    		<strong>Ritz Theater</strong><br />
    		<span>1/2 Block West Of The Square In Rockville</span>
    	</div>
    	&copy; 2007 Rob Wasson/Andy Snowden, Webmasters.
    	Logo owned by Parke Players, Inc.
    	Photos by Janean DePlanty.
    </div>
    
    </body></html>
    Code (markup):
    Which trims it down one HELL of a lot.

    Needless to say both rewrites would need some CSS to reach their final appearance, but BOTH are WAY simpler to maintain and follow MODERN coding styles.

    In conclusion - the first one is a good attempt, but a /fail/ at implementation. The second one is a decade old /FAIL/ HARD and anyone using that as an example of good site design, coding or anything else 'good' on the internet needs to take two STFU pills and call the W3C in the morning.
     
    deathshadow, Jan 25, 2008 IP
  8. manofmany

    manofmany Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    deathshadow wow that was some serious constructive criticism lol. Great! I love hearing what anybody has to say. I do not know who designed the first website. Which OS are you using? I just tested the site in both IE/FF on 1680x1020 on my desktop and 1024x768 on a laptop and have no issues with it breaking, but of course this is on windows. I know when I've checked sites on Linux before they have looked totally different than in Windows.

    I don't need to zoom in either, although the text is relatively small while the second sites text is abnormally large. There is a lady who was trying to send me flyers to add to the site and they were done in Publisher I believe and when I opened them, WOW. I just used the text and had to recreate everything. She was using font size 24 or something close.

    I mentioned CSS to the guy who runs the Parke Players website (a theatrical musical type place) and he said he had no clue what it was, which is why you see the above forementioned code using the redundant unnecessary code.

    The first site comes fairly close to validation minus some ALT tags while the second fails miserably. Thanks for the input guys, I knew I could get it here.
     
    manofmany, Jan 25, 2008 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Glad to hear you get my intent - some people quickly take offense to my approach on criticizing a page because, well, I rip it to shreds. Thing is, you should see my 'reviews' of my own work from two years ago ;) I learned business in the Boston area in the 80's... where if you cannot rip it to shreds and use expletives in the process, you won't get invited to the power lunches to get totally fershnikered before 1pm, invited to the club after work for some lines, or invited to the golf course with the board of directors to sip martini's all weekend. (those were the days... to work oneself towards a drug and alcohol induced stroke) - I still remember every time some limp wristed eurotrash wannabe depeche mode listening california tofu eating crunch-me came to work for the various companies I was at in the Boston area most of them not even lasting out the day storming out of the office in tears... and that's the guys. I'd love to throw one of todays metro's into that shark tank. We used to make good sharks. Pretty shark...

    The issue here is with the borders - the header doesn't line up with the content body, because not only is the content rendering wider, but the borders aren't stretching to fit properly, all because it seems to have been written for an IE table model... This is in Opera, Safari, FF and IE under WinXP

    My windows box is set to run "Large fonts/120dpi" and I run "100dpi" (or higher thanks to Gnome) under linux... this DPI setting is usually referred to as the 'system metric' which can be used to enlarge dynamic fonts in size 25% by default, or even more to give you ACCURATE 1:1 between real world size and print. The original windows version was done for the IBM 8514 graphics setup (and was even called 8414), but was expanded in capability when Apple started touting that their systems were always a physical 75dpi - M$ countered back in Win 3.1 that you could run at any resolution and set the DPI to be accurate... Funny thing is the fixed DPI was one of the big selling points of Mac's to graphics designers and print layout folks, a capability that is LONG gone on their end. (though we were promised a return in leoptard, that turned into vaporware right quick). Old school print folks work in PT, which is SUPPOSED to be 1/72th of an inch... and work in inches - when working in those sizes for print it's actually nice to be able to have 'actual size' BE 'actual size'.

    That ended up NOT being the most common use for it under windows, with most of it's continued support stemming from people running their resolution 'one notch higher' than the norm - like 1600x1200 on a 19" or 1920x1440 on 21" - the idea being to have the text be the same physical dimensions, but be made up of more dots. More dots equals less jaggies. Combine with any font smoothing technology, even those meant for LCD's like cleartype, and you can get text almost as crisp as print. The setting is getting a new life and wider use as the native resolution on LCD's gets higher and higher - when a 15" widescreen laptop can deliver 1280x800 having all your OS and dynamic browser fonts 25% larger... it's a godsend. Current guesstimates put 'large fonts' on windows machines at about 15-30% depending on who you talk to. (there are no 'hard' numbers for this since it's difficult to detect server side)

    The use of dynamic or fixed fonts is a common arguement - a lot of people say only use fixed fonts, or take the yahoo "YUI" approach of trying to make dynamic fonts behave like a wierd mix between fixed and dynamic (which defeats the whole point). Fixed fonts means px, aka pixels, which has the problem older versions of IE will not resize them (the "YUI" approach does address this, but if you aren't obeying the system metric why bother?)

    Others rabidly say to only use dynamic fonts (%/em)... This is wrought with problems of it's own the moment graphics and fixed width layouts become involved... I posted several nasty rants on a number of forums because time and time again I came across sites that were broken at my default settings JUST because people were following the advice of 'only use %/EM to the exclusion of all others' - If you have a narrow fixed width column with text that will not fit the column enlarged at default zoom - you will find that your layout is broken on 'large font' machines. You put a fixed height or worse fixed width image under your text, or try to position it over the text using 'image replacement' a dynamic font is most likely going to break on a large fonts machine in Opera or IE - WORSE, Firefox and other gecko based browsers, as well as webkit/safari IGNORE the 'system metric'. WORSE, you have nutjobs claiming that a certain size (62.5%) will make %/em always equal pixels - which is rubbish the minute you get enlarged system metrics involved. (as I mentioned Yahoo's YUI tries to address that 'problem' - when it is NOT a problem in the first place).

    THEN there's pt, aka points which obeys the 'system metric' but does not automatically resize in IE... In a number of ways it's the best of both worlds becuase it obeys the system metric in firefox as well as IE and Opera (safari is a different story - I'm not sure KHTML/webkit can even handle the concept of a changing system metric). PT is most commonly used in forum softwares and input dialogs in 9pt or 10pt size for that very reason.

    I ended up writing a sample page to show all the issues with fonts here:
    http://battletech.hopto.org/for_others/font_test.html

    I've not updated it in a few years, but no real changes have been made to the browsers on this front, so it still does the job.

    My approach used to be **** %/em because I deal in HIGHLY graphical layouts for most clients, which means %/em breaks too often. I've reversed on that slightly now saying that when you have a fixed width container and interacting with graphics, use the font that WORKS - px, but do so in a size that's large enough for EVERYONE. 'large enough' means that 12px is the smallest text you should EVER use (there's a reason large font users call phpBB skins crap and usually resort to Opera or IE7 to view said sites) and a more realisting MINIMUM is 14px... That said, CONTENT on the page, basically what people should be coming to your site for in the first place should ALWAYS be a dynamic font - and the only real dynamic fonts are %/em... so CONTENT and anything that does not interact with fixed size graphics or layout in px, actual content in %/em. Basically, the right tool for the right job. This still means you have issues with resizing content, but use big enough in the first place it shouldn't be an issue... and if it is an issue that's going to be under IE6 or firefux - in which case **** em. Anyone who cares about enlarging fonts likely needs accessability - so they have likely already discovered browsers that handle it properly like Opera or IE7, instead of staying with browsers that STILL resize content like a sweetly retarded crack-addict cousin to Netscape 3.

    A common problem you see is people who normally work in other media formats automatically assuming that HTML/CSS should work identical to their own area of expertise - IT DOES NOT. Sometimes, you end up having to take a brick to their head via a hardcore browbeating to get the notion through thier thick skulls that it's a different target media, so different rules. This is most commonly an issue with folks coming from print layout, but you also see it a good deal with flashtards. (seriously, if you learned flash before HTML, do the world a favor and stay the **** away from web design)

    It's why on the sites I actively maintain for clients I give them a projected turnaround for ANYTHING of 1 week. In a way it's "Mr. Scott"ing my numbers to look like a miracle worker, but it's also a buffer for when one of the guys over in print or worse graphics, sends something completely unsuitable for use on the web with 'orders' to shoehorn it into the site. (like a triangular logo or 24pt fonts)

    Naturally, the page is made in frontpage as if this was still 1995 - 99% of this thread is going to go pow-zoom-phwee right over his head.
     
    deathshadow, Jan 25, 2008 IP
  10. tbh

    tbh Peon

    Messages:
    1,130
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Since I think we all agree the top site has better style than the 2nd, you should probably compromise and hire somebody. Maybe that way you wont be fighting over it?
     
    tbh, Jan 25, 2008 IP
  11. tbh

    tbh Peon

    Messages:
    1,130
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Also first site has some wierd css errors in firefox, might want to fix that. The site still looks good but buggy.
     
    tbh, Jan 25, 2008 IP
  12. manofmany

    manofmany Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Well, see the issue is the new owner asked me to oversee the current site which I did not design. I can take care of the current issues. I'm just trying to get it through their heads that they have a decent layout right now and switching styles is going to be a huge step in the wrong direction and bad for business.
     
    manofmany, Jan 26, 2008 IP
  13. manofmany

    manofmany Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Pardon my ignorance guys. The .com extension is not the same as the .org they also own and mainly rely on. Some guy snatched the .com and redirects it to an older version which IS buggy and terribly done. Thanks again for all the input! The new owner whole heartedly agrees with me.
     
    manofmany, Jan 28, 2008 IP