- This topic is empty.
-
AuthorPosts
-
March 1, 2013 at 1:44 am #43059
itsricky
MemberHey Everyone. First post.
What do you think? Is the following code bad practice, or have I used CSS & JS in a good way? Is this hiding of some content which makes the page look nice OK, or, is it bad practive and deceitful, and bad news for search engines?
The page does show the full div height on load, with no JS, but then quickly (on load) shortens the div heights.
Im not trying to be sneaky here, I just want some height limited div-good ness on the page, and to be able to maintain a sweet grid-like layout.
Really appreciate any suggestions, thoughts and ideas guys :)
The page is live here: [Show and hide example](http://itsricky.com/everguide/show-hide.html “Show and hide example”)
Here’s the code:
Artists at this Event
Bonnie & Clyde, Mylo, Bruce Springsteen, Jamby, The Kills, The Drones, Ella Goulding, Aerosmith, Sandlot Kids, Michael Jackson, Elvis Costello, The E Street Band, Ruby Rose, The Drones
Show MoreLorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna.
Description
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.
Show More
March 1, 2013 at 6:22 am #126541MemberWow thanks for the great response @joshuanhibbert – amazing!
yeah – this example is pretty scrappy, its a mockup I was using to explain a point at work. Im a designer and I guess this is ‘design code’ – certainly not production code by any means!
But that said – your advice there is spot on. Will take that on board.
The user experience comes from this page: [http://everguide.com.au/melbourne/event/2013-mar-10/future-music-festival-2013/](http://everguide.com.au/melbourne/event/2013-mar-10/future-music-festival-2013/ “http://everguide.com.au/melbourne/event/2013-mar-10/future-music-festival-2013/”)
And there is only the one event on the page. The show/hide toggle compresses a list of potentially up to 100 artists down to two lines on the left, and then the description from 1400 chars down to a few lines.
The main thing im after here in the design is that the nice box under the detail photograph is the same height, a consistent source of information for users, and a consistent experience.
The bodies of text added to the description textarea in the CMS vary widely, so this design aims to stamp down a really consistent frontend template that is reliable and anticipated by our browsing user base.
Thanks again!
March 1, 2013 at 6:47 am #126544joshuanhibbert
MemberNo worries!
Hmmm, so if there is only one event per page, what is wrong with letting the content behave naturally, and as a user expects (like almost every other page on the web)? Sure it might not look quite as sharp, but it will be much easier for the user to read; only having to scroll, not click and scroll.
Unless there will be other important stuff under that section, and you don’t want users to have to scroll for ages to see it? Then I could understand using a ‘click to reveal’ action, but I would still try and combine to two into one.
Also, are you in Melbourne? I grew up there, and now live a couple of hours away :)
March 1, 2013 at 6:53 am #126546MemberYeah the problem is that on the page, the description text is low in importance compared to say the time, and date of the event. The description needs to be there, because it could contain extra info, but is not neccesdary.
The page is quite complex though, there’s essentially three wide columns at that point, and there isnt a lot of width for that description to flow accross.
In most instances the description is short, and the show/hide toggle is hidden, but for more than say half, there is a solid description in there (300 chars) and for more than 20% its big. The page looks very ugly when that thin description column pushes down say to 1000px high, leaving lots of blank space on either side.
Just trying to avoid google black listing really!
Yeah Melbourne’s all right – I work down in St Kilda by day at an ad agency. Grew up here too.
March 1, 2013 at 6:59 am #126548MemberYeah, I guess the client will have something to say about it too, and in the end they pay the bills! You certainly don’t have to worry about Google though, as that is completely acceptable.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.