Heya everyone!
First, I’m asking here instead of design/UX because it’s primarily having to do CSS related adjustments and responsive design. This forum has helped me a bunch with this in the past.
The site in question is a social content sharing site. My intention is not to create a single layout that works for everything from PCs to phones. I have a function built into the script that detects mobile , separating into phone and tablet. I will be paring down my initial design to fit those formats. Right now, I’m just trying to design a layout that works well for various resolutions on the desktop and a bonus would be that it looks good on a tablet.
First, here’s an example page on the site:
A little about this page. It isn’t always a video. Sometimes instead of a video, it’s pictures and a body of text.
As you can see by the screenshot, I’m not a design guy. I kept tacking on the features as I wrote them. It’s ugly, it’s not valid markup(I haven’t validated because I knew this day was coming) and it’s confusing. I do think I know the level of importance for each portion of the page however, so I thought I would use that as a guideline.
First, the content. Second, sharing, third comments and bringing up the tail, poster information. The navigation arrows, I think I would put at the very top, to allow them to quickly shoot through the pages until they find something they’re interested in.
I’ve looked at a lot of sites and it seems that the share/like functions are everywhere. On some sites, I saw the same buttons in four different locations, so maybe a share bar at the top and bottom? I considered a bar on the left that follows the scrolling of the page, but wasn’t sure how that would mess up a responsive design.
A couple things of note: The share buttons grow and shrink in number, based on the user’s preference. They might have turned them off completely, set only two to show or 6. I do plan on having advertising on the site for all anonymous users, so I’m taking that into account when designing.
So here’s what I’ve come up with in Gimp:
I’ve gotten rid of the superfluous explanation brackets for the sharing/reporting/voting. I’ve placed them on a single bar. Report will become a popup jquery box allowing the user to submit without leaving the page. If you look at the user details portion(Labeled “The Deets”, I am thinking to have it collapsed by default and clicking the h3 will expand it via jquery. If I do that, I will have to move the navigation.
I’m also considering separating the sharing, content and details with divs utilizing a small 1px border, to visually group the items.
I would like to know what you think of these changes, what could be better and what you think should be changed, removed or added.
Thanks very much for your time!
