Skip navigation
KelseyConner
Currently Being Moderated

Test Site Comments

Apr 15, 2012 6:59 PM

Tags: #cs5 #jquery #dreamweaver #images

Here's the test site for a new website I am developing:

 

http://aksarbenribfest.comze.com/soho/

 

Ignore the lack of content for the moment or the 7 minor W3 validation errors.  It looks ok in both Chrome and IE on my wide monitor...how's it look on anyone else's system?

 
Replies
  • Currently Being Moderated
    Apr 15, 2012 7:20 PM   in reply to KelseyConner

    Looks fine as far as it's developed so far.

     

    All the photos and the Ribfest pig logo (home page) need optimising for the web.

     

    At between 0.3MB and 1MB they're far too big for a website in terms of filesize.

     

    Should all be 100KB each max. (10% of their current filesize.)

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 15, 2012 9:21 PM   in reply to KelseyConner

    It's a matter of tweaking the settings vs the image quality vs file type (JPG vs GIF vs PNG).

     

    Try it as a GIF instead. I got a 66KB GIF in IrfanView, which would be OK on a webpage.

     

    ribfest-logo.gif

     

     

    All the photos will probably be better as JPGs rather than PNGs. I got 70KB JPGs from Irfanview.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 15, 2012 9:26 PM   in reply to KelseyConner

    I second John Waller on that. The images are better off as JPGs than PNGs for web - you, however do not have a transparent image for the rib fest pig logo.

     

    Also, irrespective of what format you choose, you should probably use Photoshop's built-in feature 'Save for Web & Devices' instead of doing a 'Save As'. Photoshop will optimize the image for the web. No need of any 3rd party tools.

     

    See the various images below that i got using 'Save for Web & Devices' in Photoshop.

     

    JPG Medium - 36KB

    logo-300_jpgmedium.jpg

     

    PNG8 - 54KB

    logo-300-png8.png

     

    PNG24 - 215KB

    logo-300_web.png

     

    You can notice there is no 'considerable' loss in quality in all 3 variants.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 16, 2012 6:16 PM   in reply to KelseyConner

    Just a side note to the image discussion.  This is an area where Fireworks is better than Photoshop because Fireworks can save a PNG8 with transparency whereas PS cannot.  And FW has the PNG24 and 32 options as well.  But on a white background I would always save as JPG over any other format.  Typically the best formats to keep logos are EPS for an original, TIFF with transparency for hi-res and JPG or PNG for low-res depending on whether transparency is needed.

     

    With regards to the rest of the design, I don't like the 3 rows of dots for the slider on the homepage.  Your design is wide enough to lay those out in a single row and push the content up a little more.

     

    On the Food page the content is a bit too long.  Could use some anchor links to jump down and a "Back to Top" anchor as you scroll down to jump back to the top.  Pictures are a bit large too.  Could be scaled down a little with the same efffect. 

     

    Music page - label band images.

     

    Contact - The problem with Google maps at times is that things get cut off.  I don't see any address in the window.  So I'd recommend making sure the address is in text below the map. 

     

    Footer - Only the music page has social icons.  I would think you would want to put that on all pages along with some footer links to the other pages as you have laid out on that page.

     

    You could also bring in a little more of the reddish orange color from the logo into the pages.  Otherwise all I see is blue and the occassional red italic text.  The homepage seems to have the best colors for branding the rest of the pages feel pretty bland in comparison.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points