SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Designing an image heavy site

    I am designing a site and want to use the images of the properties to have the main visual impact,
    I have done a mock-up of the property list page
    list-page-500.jpg

    My last 3 attempts of building the site has resulted in a sub standard site that is very slow and not user friendly, this has been because I have tried to built it within the constraints of joomla and a booking component and more importantly my limited knowledge,
    This time I am having the site built from scratch, so the functionality and speed should be right


    but they will only implement my design
    95% of our competitors use a much smaller images, most only thumbnails, so obviously this is for a reason

    as i have got this wrong 3 times already I have to get it right this time
    So my reasoning is
    most don't have the quality of images available,
    They are listing thousands where we only have 200 and when filtered down may only show 10 or so, our clients wont be trawling through hundreds,
    broadband speeds have changed a lot, 76% have it and probably 95% of my target audience have it,
    I will get them to just load the first 2 or 3 images then the rest appear with live scrolling, same for the slideshow with background loading,

    Am I missing anything obvious?
    Is there anything I should be making sure is done?


    more pages from the mock-up if you can see any design flaws I would appreciate your feedback

    Property-availability-500.jpg
    homepage-500.jpg

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,838
    Mentioned
    114 Post(s)
    Tagged
    1 Thread(s)
    It's easy to assume that everyone you are targeting your website at has high-speed internet access and state of the art computers ... but harder to justify that assumption. Particularly with the rise of mobile internet, more and more people are using mobile phones or tablets as their primary means of accessing the web ... and you can't rely on them having a great connection or great processing power. An site with lots of large images is going to be a real pain for them, so you may want to have separate versions of the page aimed at low-bandwidth connections and/or small devices, optimised for those media, rather than relying on the devices and browsers to try to cope with multiple megabytes that are too large for the display being thrust at them (or alternatively, waiting for ages while they trickle through the slow connection). Similarly, the sort of Javascript that partially loads a page and then progressively pulls in more images as you go through can bring a mobile device to its knees and render a page completely unusable.

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The mobile aspect is a very valid point, and one I have been trying to get my head around,

    I have specified that the site must work on all devices, but I need to make sure that its not the same image just displayed smaller, and that different images are used for different media sizes, If I drop the full screen option of the slideshow then I can get away with optimizing the images more, maybe around 150/170k per image and they still look stunning,

    also i am trying to consider that the resolution on tablets and mobiles in increasing rapidly, my nexus is about 1200 wide and my iphone 4 is about 1000 in landscape mode, some mobiles have even bigger resolution, I know this is not the same as a pc because of the physical size, but i still need a 600px image if i want it to fill the width of my iphone vertically and 900 horizontally

    for me this is the base of the site, everything else is just fill,
    The images sell the holidays so I have to present them in the best possible light, but not at the expense of the customer site experience.

    I suppose it is impossible to design a site that uses images as its primary focal point to be optimized for everybody,
    If I go for the lowest denominator then the site will look drab, I wont be utilizing a good asset of the site and by far the majority of the visitors will come away with a less than satisfactory experience,
    If I go for the highest then 30/40% who are on slow connections or mobile will suffer and just leave the site,
    so I suppose its getting the highest percentage whilst keeping the best experience, I did start with the images the full width of the site, I reduced them for this reason, I have tried reducing further but it lost a lot of the impact,

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,741
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    Yeah, clients sometimes forget about the media and method.

    You may need to do some device sniffing/media queries, for example an 1800px wide BG is just unjustifiable for anything else than a desktop/laptop anyway.

    also consider your image formats. I cant tell from the mock up, but I hope you aren't relying on transparent PNGs for anything large ( that fade is a fade to a color not to transparent, right? The umbrella is on BOTH images, as opposed to one large transparent PNG), if not some creative slicing and absolute positioning could help.

  5. #5
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,838
    Mentioned
    114 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Steve_k View Post
    I suppose it is impossible to design a site that uses images as its primary focal point to be optimized for everybody,
    If I go for the lowest denominator then the site will look drab, I wont be utilizing a good asset of the site and by far the majority of the visitors will come away with a less than satisfactory experience
    The great thing is that with media queries and multiple stylesheets, you don't have to limit yourself in that way! You can adapt the presentation of the page to the device, so that anyone with a large screen gets the full size images, anyone with a medium sized screen gets small images (which you can optimise for that size, rather than simply scaling the originals to 50%), and anyone with a small screen gets minimal images and a plainer layout. This gives the best of all worlds!

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,632
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I have a few image heavy sites and they load fine. Just reduce their quality enough. Like down to 40% to 50% usually renders just fine without loosing any naked eye quality.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem with this design is that anyone with low speed internet is going to leave before they get to see most of it. The average internet surfer will leave a page that doesnt load after 10 to 15 seconds tops.
    Check out this amazing 6 figure a day new great method
    on fastcash10.in

  8. #8
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Chandigarh, India, India
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The main problem with this site is very heavy. If anybody who has slow speed he will click on the site, site will take time than he can't wait to open completely he will left. So better make site low

  9. #9
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    153 Post(s)
    Tagged
    3 Thread(s)
    I think we are all happy with the responses and this thread has run it's course.
    Thanks everyone
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....


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
  •