SITE REVIEW: thelariatonline.com

  • michaelt
  • Newbie
  • Newbie
  • michaelt
  • Posts: 8

Post 3+ Months Ago

Hey guys,

I created a website for my schools newspaper http://www.thelariatonline.com and I think I need advice on how to make it better.

so I don't have very much web design experience this is only the third website I have made and the first with Dreamweaver.

I don't mind brutal honesty and any advice on how to improve the design or make it faster and better is greatly appreciated just keep in mind it is still a work in progress, I have only been working on it for about a month.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Don2007
  • Web Master
  • Web Master
  • Don2007
  • Posts: 4924
  • Loc: NY

Post 3+ Months Ago

You need to divide the images better. I'm not a fan of frames but I think they may help in your case.
  • nelitoo
  • Born
  • Born
  • nelitoo
  • Posts: 3

Post 3+ Months Ago

It is great for a start
  • advanceflash
  • Beginner
  • Beginner
  • advanceflash
  • Posts: 47

Post 3+ Months Ago

The grey text on the red buttons is very tricky to read. I would recommend white.
  • tennisaceflink
  • Beginner
  • Beginner
  • tennisaceflink
  • Posts: 58

Post 3+ Months Ago

when i looked at this website the first thing i noticed was the title of the paper this is great however as stated earlier i think that the images should not be framed like that instead have a background color maybe somesort of grey that would make it look like a newspaper

the next thing i saw was the nav bar... it is a very nice design but the colors are terrible for reading. i also noticed that the page is alot wider than the screen and that there is alot of empty space
you should impliment tables to hold everything in place

if you want to see an example of what tables can do look at my site http://www.weaponsofusmilitary.com

heres what you need to change

no framed images
make it a different background
change color of words on menu
use tables
take out empty space


if you would like me to show you how to do that or to help you with your website pm me

--Flink
  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

First, I think the background you are using to the left, should be used for the entire site. It's bad to have two different image backgrounds and personally the other one (on the left) looks a lot better. Secondly, get rid of all the animation. It make be cool, now, but it gets a little cheesy after a while. If you want animation. Make a window and stick some nice flash in it or a javascript gallery. The pdf 's are huge. I would try to optimize those some how. Also, I think navigation should be reworked. I don't care for the typography or the colors. Not enough contrast. And I opened up one of those huge phd's (lol) The actual newspaper is really nice. It's clean and simple and it works well for the eye. I think if you use some of the same priciples you can have a great website too. The two should really look close in style and design.....and the site should be centered. And maybe include a few hot articles or ads or announcements. One of my favorite news sites is http://news.bbc.co.uk/ . And that 3d dude is cool. But he is a little scary :) Good luck!
  • daremedy
  • Professor
  • Professor
  • daremedy
  • Posts: 911

Post 3+ Months Ago

Get rid of the frames... pronto. Your site is (and should be) nothing but a <table> with two columns.

Your title tag in the right frame is "Untitled Document" which turns out to be the name of your homepage... bad

Get rid of background images. Its a distraction when reading, its archaic and it just doesnt look good.

Thumbnail your preview images. Your February and April preview pictures are HUGE and eat up the time it takes to load your page, which even on my high speed connection was pretty long.

The flash animation is cool, but rather unnecessary.

Your menu is hard to read with the background.

Your left frame has a link to an image (file:///Macintosh HD/Users/dantintner/Desktop/lariat/mootools_menu/animatenews.gif) which wont display to anyone but local users.

You desperately need to give this site a layout. Right now it just looks like someone threw together some pictures and links on a website. The background images somewhat mask the fact that this site is just two plain columns of content. There's more to comment on, but these are things to be learned with experience. Browse the internet. Browse sites you like. Find the common attributes and incorporate them into your design.
  • CStrauss
  • Graduate
  • Graduate
  • User avatar
  • Posts: 122
  • Loc: St. Louis MO. USA

Post 3+ Months Ago

One thing I might suggest if your hell bent on keeping the background image is first use one or the other you have two as someone pointed out. But make more faded and less noticable. It really pops out and is to over whelming.

Definatly get rid of the animation and the pdfs you have linking to past news papers find other way like someone suggest use thumbnails.

Change the color scheme to be more constant and pleasing, specially the links.

Get rid of the frames its very bad, i mean really bad, like satellites are targeting your house with nuclear missiles right now bad, because you used frames. (just kidding or maybe not).

I would search around like someone suggested find a good layout from other sites you like and use elements of that to get you started. If you want this site to get noticed and read by others outside of your school some serious plannning its in order.

But the good news I can say there are many good people on this forum that are willing to help, I for one just send me a message or what not and I be happy to help and show you things I know.
  • kevsterb007
  • Graduate
  • Graduate
  • kevsterb007
  • Posts: 145

Post 3+ Months Ago

1) Remove Frames.
2) Change that background!
3) The talking flash animation is just an annoyance.
4) Grey on red is a no-no.

This is a very newbie-ish site. The design just isn't working (for me). I would suggest (like CStrauss said) looking at some other sites to find a good layout. I'm not trying to bash you,but this site needs a lot of improvement.
I'd be happy to help you out with any specific issues you have!
  • michaelt
  • Newbie
  • Newbie
  • michaelt
  • Posts: 8

Post 3+ Months Ago

Thank you so much for your advice on the lariat website I took it all into consideration. I got rid of the flash and replaced it with a less tack flash. I also reduced the file size of the pdfs, and changed the background to be the same as the left.

I still have a lot of work to do on the site but I'm trying to figure out what to do about the frames. A lot of people said they look bad but because of the photo gallery blog feature that I am going to add and the pdfs I don't know what to do to replace them. Any advice you have would be very helpful.

Once again thanks every one for all your help, and any more advice on what to do about the frames and every thing else is greatly appreciated.
  • jrotta
  • Newbie
  • Newbie
  • jrotta
  • Posts: 10

Post 3+ Months Ago

for me the layout sux
  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

jrotta wrote:
for me the layout sux


that is not constructive criticism. gotta give himm some advice if you are going to say it sucks. i personally don't like it either. i still think the nav colors are bad and hard to see. also, what about just having the buttons static, instead of that entire column. or nav that moves up and down with the viewer. i think there is some javascript out there for this.

Also, you should consider putting at least a few articles or snippets of the articles on the page. Something to draw the viewer in. As it stands you just have some images and some buttons. But nothing makes me want to actually click them.

You also need a real header. You can't just slapped pics at the top of the page. And those two images, for the archives, I could barely see them. they were blending into the background. Either tone down the background or put something behind those images so they stand out. And add a rollover or something to them. Again, I think the webpage should compliment the newspaper in it's layout style. It doesn't have to be so busy looking. And that guest book. It's to big and clunky. And I woud either move it under the nav or on the opposite side of the page.

And what about a WELCOME or something to tell people where they are and what you are trying to do. Something to keep your viewers attention for a few seconds.

And why do you have to use frames? Can't this be done with CSS?
  • hexengon
  • Newbie
  • Newbie
  • hexengon
  • Posts: 5

Post 3+ Months Ago

I am viewing your site on Firefox 2.x.x,

- try not to use frames, the navigation menu on the left, the colors of the links (grey) to background (red) is very hard to see as with the font size needs to increase.

- the main background image tiling (newspaper) is very distracting, cannot see your main content, needs to be removed or substitute with more lighter background

- guestbook should not be displayed fully, but as a separate link?

- lots of work needs to be done with your coding, use CSS for your layout
  • tennisaceflink
  • Beginner
  • Beginner
  • tennisaceflink
  • Posts: 58

Post 3+ Months Ago

if your site is about a newsepaper make it look like a newspaper
like have black text on a grey white background

have larger text size for the menu and smaller text for the text
  • daremedy
  • Professor
  • Professor
  • daremedy
  • Posts: 911

Post 3+ Months Ago

michaelt wrote:
I still have a lot of work to do on the site but I'm trying to figure out what to do about the frames. A lot of people said they look bad but because of the photo gallery blog feature that I am going to add and the pdfs I don't know what to do to replace them. Any advice you have would be very helpful.

Once again thanks every one for all your help, and any more advice on what to do about the frames and every thing else is greatly appreciated.



Get rid of that background man. Seriously let it go, its ruins your entire website and is as amateur as amateur gets.

Because I have the day off and lazing around sipping coffee for my hangover, here's a re-do of your code WITHOUT those gawd awful frames. Tweak it yourself, but here's a fighting start for you to work off of. And clean up your code. You have <div>'s and <span>'s flying all over the place. Some of the ugliest design I've seen in a while.

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Lariat Online</title>
<script type="text/javascript" src="http://thelariatonline.com/mootools.js"></script>
<script type="text/javascript" src="http://thelariatonline.com/mooefx.js"></script>
        
<link href="http://thelariatonline.com/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
    background-color: #FFF;
}
-->
<!--
.style1 {
    color: #FF0000;
    font-weight: bold;
}
.style2 {color: #FF0000; font-weight: bold; font-size: 36px; }
.style3 {
    font-size: 36px;
    color: #FF0000;
}
.style4 {
    color: #FF0000;
    font-weight: bold;
    font-size: 30px;
}
.style9 {font-size: 70%}
-->
</style></head>

<body>


<table cellpadding="0" cellspacing="0" border="0" align="left" width="100%">

    <!-- Left column -->

    <tr>
    <td width="20%" valign="top">

        <div id="sidebar">
            <ul>

            <li>
                <li><a href="http://thelariatonline.com/righthome.html" target="mainFrame">COMING SOON</a></li>
            <h3 class="cat">ISSUES </h3>
            <li><a href="http://thelariatonline.com/april.pdf" target="mainFrame">APRIL</a></li>
            <li><a href="http://thelariatonline.com/february.pdf" target="mainFrame">FEBRUARY</a></li>
            <li><a href="http://thelariatonline.com/issueunderconstruction.html" target="mainFrame">DECEMBER</a></li>
            <li><a href="http://thelariatonline.com/issueunderconstruction.html" target="mainFrame">OCTOBER</a></li>
            <li>

            <h3 class="cat">STAFF</h3>
            </li>
            <li><a href="http://thelariatonline.com/staffunderconstruction.html" target="mainFrame">COMING SOON</a></li>
            <h3 class="cat">PHOTOS</h3>
                <li><a href="http://thelariatonline.com/awardsgallery.html" target="mainFrame">AWARD CEREMONY</a></li>

            <h3 class="cat">BLOGS</h3>
                <li><a href="http://thelariatonline.com/staffunderconstruction.html" target="mainFrame">COMING SOON</a></li>
            <li></li>
            </ul>
        </div>


    </td>

    <!-- Right column -->

    <td valign="top">

<div>
<div align="center">
    <embed src="http://widget-7d.slide.com/widgets/slideticker.swf" type="application/x-shockwave-flash" quality="high" scale="noscale" salign="l" wmode="transparent" flashvars="cy=lt&il=1&channel=1585267068847599741&site=widget-7d.slide.com" style="width:426px;height:320px" name="flashticker" align="middle"></embed>
</div>


</div>

<table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td><div align="center"><span class="style4"><span class="style9"><span class="style1"><a href="http://thelariatonline.com/april.pdf"><img src="http://thelariatonline.com/februarypage1.jpg" width="140" height="216" alt="februaryissue" /></a></span></span></span></div></td>
    <td><div align="center"><span class="style4"><span class="style1"><a href="http://thelariatonline.com/april.pdf"><img src="http://thelariatonline.com/aprilfront.jpg" width="140" height="216" /></a></span></span></div></td>
</tr>
<tr>
    <td><div align="center"><span class="style4"><span class="style9"><span class="style1"><a href="http://thelariatonline.com/april.pdf">FEBRUARY</a></span></span></span></div></td>
    <td><div align="center"><span class="style4"><span class="style9"><span class="style1"><a href="http://thelariatonline.com/april.pdf">APRIL</a></span></span></span></div></td>
</tr>
</table>


<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td align="center">
<!-- Bravenet Embedded Service Code --><script src="http://apps.bravenet.com/go.js?service=guestbook;id=1;usernum=2440201415" type="text/javascript" charset="utf-8"></script>
    </td>
    </tr>
</table>

    </td>
    </tr>
</table>


</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>The Lariat Online</title>
  6. <script type="text/javascript" src="http://thelariatonline.com/mootools.js"></script>
  7. <script type="text/javascript" src="http://thelariatonline.com/mooefx.js"></script>
  8.         
  9. <link href="http://thelariatonline.com/style.css" rel="stylesheet" type="text/css" />
  10. <style type="text/css">
  11. <!--
  12. body {
  13.     background-color: #FFF;
  14. }
  15. -->
  16. <!--
  17. .style1 {
  18.     color: #FF0000;
  19.     font-weight: bold;
  20. }
  21. .style2 {color: #FF0000; font-weight: bold; font-size: 36px; }
  22. .style3 {
  23.     font-size: 36px;
  24.     color: #FF0000;
  25. }
  26. .style4 {
  27.     color: #FF0000;
  28.     font-weight: bold;
  29.     font-size: 30px;
  30. }
  31. .style9 {font-size: 70%}
  32. -->
  33. </style></head>
  34. <body>
  35. <table cellpadding="0" cellspacing="0" border="0" align="left" width="100%">
  36.     <!-- Left column -->
  37.     <tr>
  38.     <td width="20%" valign="top">
  39.         <div id="sidebar">
  40.             <ul>
  41.             <li>
  42.                 <li><a href="http://thelariatonline.com/righthome.html" target="mainFrame">COMING SOON</a></li>
  43.             <h3 class="cat">ISSUES </h3>
  44.             <li><a href="http://thelariatonline.com/april.pdf" target="mainFrame">APRIL</a></li>
  45.             <li><a href="http://thelariatonline.com/february.pdf" target="mainFrame">FEBRUARY</a></li>
  46.             <li><a href="http://thelariatonline.com/issueunderconstruction.html" target="mainFrame">DECEMBER</a></li>
  47.             <li><a href="http://thelariatonline.com/issueunderconstruction.html" target="mainFrame">OCTOBER</a></li>
  48.             <li>
  49.             <h3 class="cat">STAFF</h3>
  50.             </li>
  51.             <li><a href="http://thelariatonline.com/staffunderconstruction.html" target="mainFrame">COMING SOON</a></li>
  52.             <h3 class="cat">PHOTOS</h3>
  53.                 <li><a href="http://thelariatonline.com/awardsgallery.html" target="mainFrame">AWARD CEREMONY</a></li>
  54.             <h3 class="cat">BLOGS</h3>
  55.                 <li><a href="http://thelariatonline.com/staffunderconstruction.html" target="mainFrame">COMING SOON</a></li>
  56.             <li></li>
  57.             </ul>
  58.         </div>
  59.     </td>
  60.     <!-- Right column -->
  61.     <td valign="top">
  62. <div>
  63. <div align="center">
  64.     <embed src="http://widget-7d.slide.com/widgets/slideticker.swf" type="application/x-shockwave-flash" quality="high" scale="noscale" salign="l" wmode="transparent" flashvars="cy=lt&il=1&channel=1585267068847599741&site=widget-7d.slide.com" style="width:426px;height:320px" name="flashticker" align="middle"></embed>
  65. </div>
  66. </div>
  67. <table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">
  68. <tr>
  69.     <td><div align="center"><span class="style4"><span class="style9"><span class="style1"><a href="http://thelariatonline.com/april.pdf"><img src="http://thelariatonline.com/februarypage1.jpg" width="140" height="216" alt="februaryissue" /></a></span></span></span></div></td>
  70.     <td><div align="center"><span class="style4"><span class="style1"><a href="http://thelariatonline.com/april.pdf"><img src="http://thelariatonline.com/aprilfront.jpg" width="140" height="216" /></a></span></span></div></td>
  71. </tr>
  72. <tr>
  73.     <td><div align="center"><span class="style4"><span class="style9"><span class="style1"><a href="http://thelariatonline.com/april.pdf">FEBRUARY</a></span></span></span></div></td>
  74.     <td><div align="center"><span class="style4"><span class="style9"><span class="style1"><a href="http://thelariatonline.com/april.pdf">APRIL</a></span></span></span></div></td>
  75. </tr>
  76. </table>
  77. <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  78.     <tr>
  79.     <td align="center">
  80. <!-- Bravenet Embedded Service Code --><script src="http://apps.bravenet.com/go.js?service=guestbook;id=1;usernum=2440201415" type="text/javascript" charset="utf-8"></script>
  81.     </td>
  82.     </tr>
  83. </table>
  84.     </td>
  85.     </tr>
  86. </table>
  87. </body>
  88. </html>
  • SimplyBusy
  • Newbie
  • Newbie
  • SimplyBusy
  • Posts: 6

Post 3+ Months Ago

these guys have provided you some great advice already. just remember simple is usually best until you master the art of "how your visitors view you."
  • shorys
  • Newbie
  • Newbie
  • shorys
  • Posts: 7

Post 3+ Months Ago

There are so many things that have to be said regarding this design.
Instead of writing for a couple of hours or copy/paste from other sites I would suggest to the designer to take a look at these articles and then redo the design from scratch and I am 100% sure that he/she's gonna come up with a much better design.

http://www.smashingmagazine.com/2007/09 ... -aware-of/
http://www.smashingmagazine.com/2007/10 ... -aware-of/
http://www.smashingmagazine.com/2008/01 ... ign-books/
http://www.smashingmagazine.com/2008/01 ... eb-design/

good luck :)
  • Alec013
  • Born
  • Born
  • Alec013
  • Posts: 3

Post 3+ Months Ago

Dude, that's great! I really like what you did..
Except the background just sticks out and makes it all kinda low-ish.
Make the background one big newspaper, if not make them kinda blend in and out of the page.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

tennisaceflink wrote:
you should impliment tables to hold everything in place
...
use tables

no you shouldn't ... where'd you get that idea? everything can be done with the right implementation of CSS ...

and maybe just fix those 7 validation errors

Post Information

  • Total Posts in this topic: 19 posts
  • Moderator: Website Reviewers
  • Users browsing this forum: No registered users and 3 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.