ArtWanted.com Website Resolution

20 July, 2008

ArtWanted.com Staff
2,748 Views
9 Comments

ArtWanted.com Website Resolution

A few comments have come up about the design resolution of our new site. We thought it would be good to make a post that talks specifically about this issue...

As we went over the early mock-ups of the new ArtWanted.com, one big question was...What resolution do we design the site for? Before answering this question, we did a lot of research. We went through detailed analysis of our website analytics of our users computers, we read many posts/websites from design experts and we looked at what the other large companies were doing.

Our research told us that 95% of our users have a monitor resolution of at least 1024x768 pixels or higher and that percentage continues to grow every month. We also looked at major websites like adobe.com, apple.com, myspace.com, youtube.com, cnn.com and ebay.com - Every one of these websites has designed their website for 1024x768 monitor resolution and will look bad (or require additional scrolling) at a lower resolution. Because of our research, and the vast majority of the major websites designing for this resolution, we decided to design our new site for the 1024x768 pixel world.

While this larger screen requirement would make additional side-to-side scrolling for 5% of our users, it gives a much better experience and use of screen space for 95% of our users. We wanted to take advantage of the larger area of the vast majority of our members, instead of forcing most of our members to have lots of white/dead space on their monitor when looking at our site. For 95% of our users, they can now see more images and text on the screen without scrolling, than they did before with our old design.

For example, with a monitor resolution of 1024x768, our users could only see 6 image thumbnails on the old site (without scrolling) when doing a basic image search. Now these same users can see 8 thumbnail images on our search pages without scrolling. Other pages on our site allow for even more images on the screen with our new site design. There is even less scrolling on our message boards for the majority of our members, because we can now display text in an 700 pixel wide area, instead of 500 pixels. This makes the text comments wider and take up less space vertically. Result: less scrolling on the message boards as well. In fact, with most areas of our site, there is less scrolling because of this better use of space than our old site for the majority of our members.

And now...a message to those users still on a lower 800x600 pixel resolution screen. We want you to know that we did not forget about you with our website changes. We were very mindful of your smaller screen size and our site was designed to still look good with a lower resolution. You will notice that we have a consistent layout of a small column on the left, and a larger 'content area' on the right. This 'content area' fits perfectly on a 800x600 resolution monitor, where you can view all of the images and read the text in the content area without scrolling side-to-side like you have to do with other sites (ie adobe.com, apple.com, myspace.com, etc.). This was done on purpose and not by accident. This allows you to read long message board threads and browse image results without scrolling side-to-side to view the entire content. You will see everything you need and only need to scroll down like any other computer to view the longer posts/image results.

The end result of our new design allows the majority of our users to have a better experience using our site, but still allows for a good experience for the 800x600 resolution users...far better than the majority of other websites out there.

We hope this thread explains the reasons for our change and everyone can now see why we made this upgrade to our site. Thanks!

9 Comments

Emily Reed 20 Jul 2008

YOU TALK ABOUT SIDEWAYS SCROLLING, BUT YOU DO NOT ADDRESS UP AND DOWN SCROLLING WHICH IS THE MOST CRITICAL PROBLEM.

AT 1024 X 768 RESOLUTION, WHEN AN IMAGE IS FIRST LOADED, THE USER SEES ONLY THE TOP PART OF THE PICTURE. THE LARGER THE IMAGE THE LESS IS SEEN INITIALLY. THE USER SEES EVEN LESS OF VERTICAL IMAGES, WHICH REQUIRE MORE SCROLLING THAN HORIZONTAL ONES.

AT 1024 X 768 RESOLUTION, THE INDIVIDUAL IMAGE PAGE STILL REQUIRES AT LEAST ONE SCREEN OF SCROLLING DOWN IN ORDER TO COMMENT OR READ COMMENTS UNDER THE BEST OF CIRCUMSTANCES, I.E., WHEN THE PRIMARY IMAGE IS SMALL AND HORIZONTAL, WHEN THERE IS A SHORT DESCRIPTION, WHEN THERE IS NO ZOOM/ALTERNATE VIEW, AND WHEN THERE IS NO WIDGET. THE ADDITION OF THE SALES INFORMATION DIRECTLY BELOW THE IMAGE ADDS TO THE AMOUNT OF SCROLLING NEED TO GET TO THE BOTTOM OF THE PAGE.

LARGE AMOUNTS OF SCROLLING CONTRIBUTE TO EXCESSIVE MOUSE USE THAT CREATES MEDICAL PROBLEMS SUCH AS CARPEL TUNNEL SYNDROME AND MUSCLE PAIN.

UNACCEPTABLE SCROLLING EXISTS BECAUSE:

SALES INFORMATION HAS BEEN ADDED DIRECTLY BELOW THE IMAGE. THIS MAY BE TOLERABLE, GIVEN THE BENEFITS THAT MAY ACCRUE TO ARTISTS’ SALES.

THE DESCRIPTION IS NOW BELOW THE IMAGE AND THE SALES BLURB, RATHER THAN TO THE LEFT. THE LONGER THE USER’S DESCRIPTION, THE MORE SCROLLING THAT NEEDS TO BE DONE TO GET TO THE COMMENTS.

IF A USER ADDS A ZOOM/ALTERNATE VIEW (SECOND IMAGE BELOW THE FIRST) EVEN MORE SCROLLING UP AND DOWN IS REQUIRED TO GET TO THE COMMENTS.

IF A USER WANTS TO PUT THEIR OWN OR ANOTHER’S WIDGET ON AN IMAGE PAGE, THE WIDGET IS NOW BELOW THE IMAGE(S), THE SALES BLURB AND THE IMAGE DESCRIPTION, RATHER THAN TO THE LEFT OF THE IMAGE AS IT USED TO BE. AGAIN THE SCROLLING REQUIREMENT INCREASES.

THE SCREEN PRINT BELOW SHOWS WHAT IS SEEN WHEN AN INDIVIDUAL IMAGE IS FIRST LOADED (1), AND THAT, IN THE WORST CASE SCENARIO WITH A FAIRLY LONG DESCRIPTION AND A WIDGET (2), AND A ZOO/ALTERNATE IMAGE (3), THE USER MUST SCROLL TO THE FOURTH SCREEN (4) TO GET TO THE COMMENTS.

SOLUTIONS TO THESE PROBLEMS:

1. MOVE THE IMAGE DESCRIPTION BACK TO THE LEFT OF THE PRIMARY IMAGE SO THAT USERS CAN USE LENGTHY DESCRIPTIONS WITHOUT NEGATIVE HEALTH IMPACTS.

2. MOVE THE WIDGET (IF USED) BACK TO THE LEFT BELOW THE DESCRIPTION WO THAT THE WIDGET CAN BE USED WITHOUT NEGATIVE PHYSICAL IMPACTS ON THEMSELVES AND THEIR FELLOW ARTISTS.

Dominic Melfi 20 Jul 2008

with IExplorer browser hit f11 to shink browser top borders to get full verticle usage for data, f11 to toggle back. Verticle browsing is part and parcel of internet life. Horizontal browsing is a pain. If you have mouse with wheel you dont need to go to scroll bars, just move wheel up and down wherever you are on screen, this is pretty convenient.

ArtWanted.com Staff 21 Jul 2008

Emily -

When we first designed the new image page, we had no intention of moving the image description. However, as we got into it, we noticed that some members were adding embedded widgets, youtube videos and other content like you do. The 'left side' panel is only 180 pixels wide, so anything larger than this will look messed up. Anytime someone adds a widget, youtube video, another image or other content that is larger than 180 pixels, the layout of the page gets messed up part of the embedded content will not be displayed. We have included a screen shot below, you see exactly what happens when you embed a widget or youtube video if we had left the description on the left.

To fix this problem for these members, we had to move the image description into the larger content area, under the image. This allows you to embed larger content and still look good on the image page. Yes, it does create more scrolling, but leaving it the way it was on the left was not an option as it blocked the content from being seen.

Moving the image description under the image also helps those that are on a smaller resolution screen (ie 800x600 pixels), because they won't need to scroll left & right to see the image and the description. All the information is under the image and they won't need to scroll to the left to read the description, which would cut off part of the image from being seen.

If you want to avoid the long scrolling when you embed a widget/video, it's best to setup a simple table with two columns. One for the embedded object and the other column for your image description. This will take advantage of all the content area and not leave any white space that adds additional scrolling. You will just need to adjust your image descriptions on older images, or just make sure your new images are done in this format for the best results. We scanned our database and found that of the 455,083 images on our site, only 931 have a widget and 192 have a youtube video. Less than 100 members are embedded any type of content into their image descriptions, so it's a very small percent of our total membership.

I hope you (and everyone else) can now see why the image description was moved under the image. This change was done in your favor and everyone else that embeds additional content into their image descriptions.

Evelyn Simon 22 Jul 2008

Hey AW staff, thanks for the change, because change is good. I really do love the site, but it does look a little weird at first glance. :o) The gummie people look like microsoft vista icons, with a personality. LOL The thing about the scrolling subject, how about using a second click on the image, making the image appear zoomed in without scrolling. So you can get rid of the scrolling feature, and the zoom in upload feature. If the image can be viewed upclose at first upload, than the second click should automatically disable. If you like, you can go to my profile and check out the link to my website, to see what I mean. Peace and love. :o)

Hey, you know, I just checked my site and I found it does have a scrolling feature at the second click. Ooops, my bad. :o) Also, I found the zoomed up version here on AW, never worked. I had to make a copy of my image in my file, and adjust the copied image to appear zoomed, and upload it in the zoomed section. I was under the impression, that the feature would automatically zoom the image. Hm, oh well, peace and love. :o)

Announcements / Blog

20 July, 2008