7 Replies Latest reply: Apr 16, 2012 8:59 PM by KelseyConner RSS

    Test Site Comments

    KelseyConner

      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?

        • 1. Re: Test Site Comments
          John Waller MVP

          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.)

          • 2. Re: Test Site Comments
            KelseyConner Community Member

            Running the pig logo through OptiPNG dropped it from 258k to 205k.

             

            How would you suggest getting it to 20k without significant loss of resolution?

             

            Robert

            • 3. Re: Test Site Comments
              John Waller MVP

              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.

              • 4. Re: Test Site Comments
                sudarshan.t Community Member

                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.

                • 5. Re: Test Site Comments
                  KelseyConner Community Member

                  Changing all the PNG to JPG plus some initial tweaking knocked an 8 second first time load time to under 2 seconds:

                   

                  http://www.webpagetest.org/result/120417_M2_3ZQVZ/

                   

                  Good enough for now!  LOL!

                  • 6. Re: Test Site Comments
                    Ben M MVP

                    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.

                    • 7. Re: Test Site Comments
                      KelseyConner Community Member

                      In Chrome, I have 2 rows of 4 dots.  In IE, it appears as 3 rows.  The original template only had 3 images and as I added more slider content, it pushed down into 2 rows.  I have absolutely NO idea how to re-size it.

                       

                      I'm working from the front page first to the contact page last, which is why the front page is more finished.  I just added the band pictures tonight and will label them tomorrow.

                       

                      The rest of the pages are pretty much untouched at the moment.  I don't have a lot of 'content' or information to add to the pages yet, so they'll look pretty bare until there's information worth passing along.  It's just a shell at the moment and I started it on Saturday afternoon.  LOL!  Just keep plugging along.