5 Ways to Get More Space On the Page
57 As bloggers, we all want to put as much content as we can on the page, but make it look like as little as we can.
It’s an interesting paradox, which doesn’t always have an answer.
In certain circumstances however, there are indeed ways of cheating the rule, and serving your readers better by doing so.
In this article, I will talk about the 5 main options available to you, and by knowing them, you might find ways to apply them to your own blog.
1 – Dropdowns
When you navigate the web, you are constantly given sets of choices and told to pick one. Links in a blogroll. Pages in a navbar. Countries in a signup form.
Sadly, dropdowns tend to make the information slightly harder to read than it would otherwise have been. And they have the stigma of being old-fashioned.
But on the plus side, they hide a lot of text until it is called for, preventing your page from getting cluttered.
It’s a balancing act with no set rules. Dropdowns work well on large lists of options, but not so well on small lists. The obvious example is a huge list of countries in a signup form.
We can go further than that however, and use dropdowns as a way of hiding information that is not going to be useful to the majority of your visitors. For example, monthly archives, and even category archives, may appeal to just a few of your visitors, so they could be dropped down.
2 – Pop-up Windows
Pop-ups are a black word in the internet world, and for good reason. They are slow to load, can’t simply be opened in a new tab, and have been abused by spammy advertisers for years.
The advantage of a pop-up is that it gives you a whole page to fill. Furthermore, it grabs a user’s full attention as they’ve just loaded a brand new page.
In general, pop-ups will annoy your users. As such, they should never be used for regular content, and only for links a user will only load once. e.g. Email subscription forms, eBook downloads and streaming videos players.
3 – CSS Overlays
CSS Overlays are a modern version of the pop-up. They allow you to load a new page over the current page. Have a look at Lightview to see some examples, and find out how to implement it yourself.
They have the advantages of loading faster, working better with new-tab-ers, and haven’t been abused for as long.
Underneath it all though, they aren’t that different to pop-ups. Overlays are best used for content that was too big for the current page, but too small to justify a new page, e.g. Loading full versions of thumbnail images, or a few paragraphs defining a term.
4 – Hidden Divs
Hidden divs allow users to toggle the visibility of certain content. You can read more about them and how to implement them, in my article, Cut Category Clutter and Toggle Visibility.
Hidden divs are a great way of hiding/showing little snippets of content that might otherwise cause clutter, such as lists of sub-categories and quick definitions. They can also be put to more creative use, such as hiding/showing answers to a quiz.
The drawback is that users won’t realise they’re clicking a toggle link as opposed to a real one. This will cause problems for people who attempt to open the link in a new window (It won’t load).
5 – DOMtabs
DOMtabs is a very clever implementation of the simple hidden divs mentioned above, and you can see them in use in the sidebar here, in the brown “Popular Posts” area. They allow you to tab your content into a smaller area.
The web site explains clearly how to set it up, and contains a few default styles already.
Odds are, you’ve seen DOMtabs before. It is perfect for bloggers wishing to add a few more widgets to their sidebar. My only advice here is that it probably works best for text content, as opposed to images. Visual content (e.g. MyBlogLog, RSS, Entrecard etc.) works by catching your eye, but if a person has clicked a tab to load the content, you already have their attention.
Beyond that, DOMtabs could be used to display multiple author bios in the sidebar or footer. It is also used very regularly in the homepage of “magazine” themes.
Those are the 5 best methods I know of. Do you use any of them on your blog? Or have you come up with something different altogether?
Enjoy this post? You should follow me on Twitter!
Well, it’s not exactly a css trick, but by using wp’s conditional tags, you could lay content out that targets users base on what you put in the true false statement.so say you might check to see if a user is already a subscriber to your blog, why not take that section away period, or just replace it with something more relevant?either way you save space or clean up the layout which are better then nothing.
Ptah,
That’s a fantastic idea. Hiding the RSS area would be a little hard to do (How could you tell if a person was subscribed or not?), but I’m sure there are other great ways of using the conditional tags for a purpose like this.
Thanks for sharing. I’ll be thinking this idea over. :)
Awesome Ideas! Will help me clean my already cluttered business blog. :)
Nice topic! The point I want to add to this is, designers should keep in mind that, we have all the space we need and we shouldn’t dense things at one place. Don’t think that you have to crowd all the things at one place in a desperate attempt to make users notice that component. Give a lot of space to all the important components , it will surely improve their visibility and usability and of course follow above tips to achieve the same.
And Michael, I was wondering if you can cover a topic explaining how can we give attention to details, while designing a website, because I feel I have lost on that on my wesite :(
Archit,
lol – Enjoy! We all have to declutter at some point, and it’s rarely fun… xD
Kuldeep,
Well said. Cramming many things into the top half of the screen doesn’t mean they will all be noticed. If anything, it means that fewer of them will be noticed than normal. :(
But yes, that sounds like a great idea for a post. I’ll work on it, thanks. :)
Horray! Another post in twenty days!
I was starting to get lonely here :)
I like the Hidden CSS overlay feature. That might come in handy in the future.
Brad,
lol – Sorry about that. Hopefully it won’t happen again… xD
Just yesterday I was installing my new blog and found a nice WP theme without visible sidebar. There was a column for posts and comments and a nice image on the side. The rest, navigation, archives, search… is to be opened in CSS overlay. I was in doubt but I will give it a try. On one hand, it is kinda like pop-up and things are not visible on the first glance. On the other, it is beautiful to have a nice clean page. I would really love if it show to be good for my future readers as it is for me.
Dandellion,
Thanks for sharing. I’ve seen it before on other blogs and I think it’s an interesting use of the technology, but I’d still be very wary of putting anything too important in there (Like your contact link?).
It works nicely enough on your site, but the effect is too slow to load/disappear I think, and the “Push Me” button could be a little clearer. :)
Thanks for your thoughts. I guess it will take a bit of changing and experimenting. After all, there is no better place to experiment and learn than a fresh blog. So I’ll take this opportunity. And when it start living, I will probably customize the image, button and the title.
Sometimes I think there’s too much space on the page, and that I’m not featuring enough of my content. I really like your use of DOM tabs, so it’s something I have to put some time aside for (not that I have much at the minute).
Dandellion,
Experimenting is by far, the best thing you can do for your design. You never know what just might work until you try. :)
David,
That’s an interesting way of looking at it. But if you look at your whitespace as space that is being actively put to a purpose, then I suppose you’re using your whole page, and would like a chance to get more space (For either more whitespace, or more content to feature :) ).
I could write up a post on DOMtabs, if that might help? But my implementation of it here had a bug in it (Still does, in fact), and I wouldn’t want to cause other to install the same bug. xD
If there’s a bug with your DOM tabs, probably best not to write a tutorial. Although in saying that, I’m pretty sure you know how to do it right.Regardless, I think a DOM tab tutorial would make for a very popular blog article.
David,
Yeah, there’s a bug when you link to the comments area of the page directly (I fixed it for when you link to individual comments though).
I don’t think the bug was caused by me though. Or at least, I don’t see what I could have done wrong. xD
I think I’ll try it out again on a test site, and if I have better luck, I’ll write the guide. :)
I noticed that bug when I was replying to your last comment. That explains it then (well, it lets me know what happened when nothing appeared).Good luck sorting it out.
Thanks. Cya about. :)
Very interesting post. Certainly gave me a lot to think about as regards my own blogs!
I think that it’s worth to mention AJAXed WP
I installed it and now WordPress.Mu looks different and loads much faster.
OK, I use very unusual settings and they trim all of the content, but this amazing system can do magics :D
Michael, your link to /#comments on the index page is giving blank page.
And by the way, you DONOTfollow ;)
Truden,
Thanks for sharing, that’s a cool script, but I think it might be a little bit of overkill.
Do you find you’re getting fewer links now? (It’s harder to link to an individual post). It might even be hurting your search rankings. :(
I still need to find a fix for that #comment problem, but I DODOfollow. You just have to have left 2 comment already before the nofollow is removed. :)
I Post this second time. It didn’t take it the first time.AJAXed WP is SEO friendly. All links are seen as normal links.You can link to and visit individual page – http://wordpress.mu/707.htmlI didn’t provide links for single pages, but that’s my choice.The plugin can be configured in hundred of ways.You
can show excerpts of the pages and chose the way to create them, or you
can show full article on the index page. You can use your template or
standard plugin template.Well I can not say in one comment everything this plugin does.I wouldn’t even call it a plugin.It is a whole system implemented in WordPress.Download it and test it.You will love it.
Now, let me help you with your blank page problem.
Your permalinks should not end with slash “/”
A file path should never end with slash. Only directory path can have slash at the end.
Go in the admin page and in “Options / Permalinks” correct your links by taking off this slash from the end of the string.Then your links for #comments will look like this
http://www.problogdesign.com/some-article#comments
and they will work.
Hope that this will fix the problem.
Truden,
It seems a good plugin, but I don’t think I would use all of the features of it. If it’s SEO-friendly, that’s great, but it still doesn’t make it any nicer to have to read a full post+comments on the home page. :(
I like the sound of using it for comments though. :D
And thanks for trying to help, but that won’t fix it. The trailing slash isn’t a problem because with WordPress, I’m not linking to a file. If you had to recreate my (and most other) permalink structures with real files, you would use a series of directories and index.html files, and link to the directories. :)
The problem is caused by DOMtabs. It did the same thing to the individual comment links, but I fixed that. I will try to fix the #comments link as well. I hope… xD
I could be wrong about your problem and most probably I am (if you say so), but years ago I had similar problem when tested my first WP installation on my test server. Removing the trailing slash fixed it.
AJAXed WP gives tens of configuration choices.
You can choose to open the comments in your original template and then you won’t read them on the index page.
You can choose to show the full article or only custom create excerpt, or only the titles like I do.
You can comment from the index page or choose to go on the article page for commenting.
You can play days with the configuration settings :D
It will take you some time though, to get the styling right.
space is indeed a problem in building a sites or blog. With this recommendation i think i can plan details for my blog. Any unnecessary part will have to go. Thanks for the recommendation.
Truden,
Thanks, but I’ve solved the problem now by adding an empty div for DOMtabs to mess with. It’s not perfect coding, but it does the trick. :)
I can see that you really do love AJAXed WP. I’ll give it a spin someday and see if it stands up to your recommendation. :D
Mac,
Sounds like the right logic to me. If it’s not needed, why have it? :)
Really good pointers.I’m getting ready for the new version of my blog because it has the problem of cluttering too many different types of content in one single page that cause a lot of missdirection of the kind of content you could find on it.I was thinking of using a “magazine style blog” but it is too much either.I think i’ll give a try to the domtabs and CSS overlays.
One question: I have a LastFM script on a sideframe, so it wont stop playing no matter how you navigate through the blog, but with the new design i cant manage to keep “my radio” on cause it reloads every time you change the post you are seeing.It is possible to put a overlay that won’t change even if you click back and forward on the posts on wordpress??
TIA
Silla!
Scyfox,
There’s no way that I can think of. When you load a new page, the old page just isn’t there anymore. It doesn’t matter what content you have in the new page. Sorry. :(
Thanks for the answer…mm what about iframes?? i can make a table base layout and add the wp with an iframe… so it may work xDbut i’m sure as hell it won’t pass the w3c or xhtml validation xDDTHanks a lot!
Scyfox,
The iframe page would be reloaded as well when you loaded the new page.
There are a few ways you could do it with an all-Flash, or all-AJAX site, but that’s way more complicated than what you’re after! xD
You could do it very messily with iframes I suppose, if you were desperate for it. You would need to have one page, with 2 iframes. One iframe for the music player, and the other for your actual site. It means your whole site would have to be inside that 2nd iframe, and that people would find it very hard to link to you (As the address in the URL bar would never change). I’d be totally against that option to be honest. A silent site would be much, much better. :(
This article made me go back to my idea for collapsing sidebar and blocks.
Michael, would you check WordPress.Mu now and say few words about the theme.
I’m not asking for review. It’d be too flattering for me :D
I think i’ll be silent for the next version.
Even though i liked the last.fm widget, i saw a site a few days ago that had an image of a music player that really didn’t play anything, but if you put the mouse over it displays a JS message inviting the visitor to enable a pop under window with a mp3 player.
Maybe it will pass unnoticed by many people, but i really want to start doing valid html from now so i’m going to do the “make over”
Thanks a lot for yout comments and taking the time to answer all the questions.
Silla!
BTW: I’m really sorry about my bad english and freakin keyboard. It spells like sH*t. Space key its broken
@Scyfox, I saw now your question and there is a good solution for it.
Read http://wordpress.mu/193.html
Create an html page with the java script inside.In the above article there is an example cod how to load page in popup manner, but not being pop (if you copy/paste the code, fix the single and double quotes).
Your visitors will be able to listen to the music only if they want and in a new small “popup” page.
Truden,
I can’t see what you mean by collapsing blocks in your sidebar. But I did spot a typo in how you spelt Technorati on your subscribe button. :)
Beyond that, the blog looks good. What I would recommend is making what it’s about, more obvious. “You are the author” is a little confusing. Maybe you could put a paragraph up at the top of your sidebar, explaining how things work?
Also, you should work on the design of your excerpts. The Ajax is cool, but what you see by default is a little messy. I would show the gravatar, headline and an excerpt. No need for the other few lines there, especially if there’s no excerpt either. :)
Thanks for helping out Scyfox though. That’s an interesting idea. :D
Scyfox,
I don’t think you’d be at much of a loss if you didn’t include the music. Music that plays automatically will bug the life out of your users, but if you want a music option that users can choose to load, Truden’s idea sounds much better than mine! :)
Michael, thanks for the tips.
The collapsing side bar is in the theme which I was testing on WordPress.Mu, but I have already switched it off.
I asked you to look at it “now”, but obviously you are a busy man ;)
Ha-ha :D
I saw the typo in “Technorati” (TechnoCrati). Cool!
Truden,
I was only a day late! That’s not too bad, is it? xD
I’ll try to be faster next time. :P
Michael, my friend,I am the only man in the world who do never take offense.
And I don’t feel that important to expect you to rush in to my blog :D
Thanks again for the tips about the design.
It’s not my design of course but I have to fit it for my needs.
I did try my best and I think that it is better now.
Truden,
It looks great. But good feedback is rarely about pointing out what you’ve done well; I had to find a suggestion to make as well. :)
What I did well?
I read your tips and I did try to see the theme through your eyes.
And that was the “well” :D
The rest is coding knowledge and technique.
Thank You, Michael.
I Love You.
About dropdown menus:I personally don’t like them. Keep it simple. Many of those dropdown menus become total SiteMaps! A big mess and it desorrientates everyone! It’s smarter to use the big main buttons. Take a look at the site of apple (apple.com) they made only a few big buttons and have you ever got lost at apple.com? Well I didn’t. Don’t try to “safe” space with dropdown menus! They are annoying!That’s my opinion. The rest of the post is great!
Truden,
Ahh, I get ya now. :)
Noonoo,
I don’t like them very much either, but they can still have their uses. If a long list of links must be on the page, then a drop-down is often a good way of displaying them. :)
Michael, your blog rocks. Thanks for these tips man.Sorry, I usually have something more substantial to say. For now “your blog rocks” is what’s playing over and over in my head.
Easton,
Haha – My ego has no problem with that! ;)
And back at ya obviously. :D
Thanks so much for the DOMTabs link, exactly what I needed :)
Tom,
No problem. It’s a great script!
I use hidden or at least hideable lists in my sidebar. I wasn’t sure it would be a good idea at first, but I’ve grown to really like them.My sidebar is a fixed width, and based on a template with a very hard to edit PSD. So I don’t get more width for my main content area by doing this, but I have a lot in the sidebar … it helps avoid having to scroll up and down at the very least.With file browsers using collapsible trees to show you folders and their contents, I think most web users are already familiar with the concept.
Forrest,
You don’t necessarily have to get more space for your content. By collapsing those lists, you’re getting more space for the design to breathe, making it more useable (like you said!) for your readers. :)
i personally do make alot of use out of hiding divs and accordians
checkout jQuery for more ideas that look really cool too!
I also use dropdrop alot in my blog, especially for long lists like categories and archives. I also like the DOM Tabs but haven’t implemented it yet
That’s really worth to spending time on your post! As a blogger i feel really shame to say that i never know these ways! man… thanks for it bro
Dazzlecat,
I love seeing all the little tricks people pull off with jQuery! It’s an impressive library. :)
Space Code,
DOMTabs is a great script. If you get time to look at it, you probably won’t regret it. :)
tahnk you
yeh, i think the ‘one page concept’ is the great trend now!
All the given ideas are very helpful. You will no longer have to worry about the occupied spaces on your screen.
Thanks for the info,,, I love it
These tricks are really helpful if you need a good idea about how to change the web page dimension. If a website is able to run on the smartphone, this means that the website should be easy to change. http://www.squidoo.com/asigurare-rca-ieftin
Thanks a lot for this list, I’m checking them one by one..
co2 air