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 :)
You're not truly hiding the content as you have toggles to show it all. So from a 'best practice' point of view, what you're doing is fine. However, from a 'user experience' point of view, forcing the user to click to view content that is already on the page is not great.
It's hard to tell if the design positives trump the user experience negatives with this as there is no context, but as a general rule of thumb, you should let the user experience guide your design.
Also, in regards to your code, here a couple of best practices:
Properly indent your markup. It makes it much easier to read, and you can also easily notice any closing tags that are missing (such as the closing div tag you are missing).
Write each CSS declaration on its own line. This makes it much easier to read, and maintain.
Make sure you cache any jQuery selector that is being used more than once. For instance, instead of using $('.text-area') a whole lot, save it as a variable.
Try not to set CSS in your JavaScript. The best thing to do is use JavaScript to add classes.
Try not to repeat your code. In your JavaScript you would be better off writing a single function and passing in the element that is clicked.
If it makes sense to do so, declare variables at the top of the scope. This isn't always the best thing to do, but in this case, it would make it easier to understand and update.
My guess, from what you have said, is that there are going to be multiple events on a given page, all in a neat grid? If that is the case, then maybe a nice tradeoff would be to have each actual event expand, rather than individual elements inside each event. This limits the amount of clicking required for users to access content, while keeping the neat grid layout.
Wow 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.
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.
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 :)
Yeah 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.
Yeah, 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.
Hey 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
Here's the code:
Welcome to the forums :)
You're not truly hiding the content as you have toggles to show it all. So from a 'best practice' point of view, what you're doing is fine. However, from a 'user experience' point of view, forcing the user to click to view content that is already on the page is not great.
It's hard to tell if the design positives trump the user experience negatives with this as there is no context, but as a general rule of thumb, you should let the user experience guide your design.
Also, in regards to your code, here a couple of best practices:
$('.text-area')a whole lot, save it as a variable.My guess, from what you have said, is that there are going to be multiple events on a given page, all in a neat grid? If that is the case, then maybe a nice tradeoff would be to have each actual event expand, rather than individual elements inside each event. This limits the amount of clicking required for users to access content, while keeping the neat grid layout.
Wow 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/
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!
No 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 :)
Yeah 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.
Yeah, 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.