Did you know that the district of Gangnam in South Korea has approximately 6.6 people per square foot of space? “How is that even possible,” you might ask. Well, the reason is simple: despite the small size of Gangnam (it’s a third of the size of San Francisco), the district is able to fit boat-loads of people because every person and most businesses are housed in high-rise condos.
Why are condos so important? Back when cities were first being made, there was a big problem: there was not enough housing for everyone. Space was limited and a city could not allocate too much space for housing, because it needed space for businesses and roads as well. So, some genius architect had a brilliant idea – build vertically.
By building vertically, a city was able to accommodate more people with limited space. More people = more labor available = more people with jobs and money = more taxes for the city government = more customers for local businesses.
So how are condos related to web design? Website space is virtual, so you have an unlimited amount of space at your disposal. You can make websites as long as you want. However, screen sizes are fixed, and so the more space your website pages take up, the more scrolling people will have to do to browse your website. This makes it harder for people to find what they want. This also means more clutter on your website.
What does it mean to “build vertically”? For websites, I suggest that you build vertically to save space, just like building condos saves space in cities. Computer screens are 2-D, so you’re not actually building vertically. What I mean is that in web design, there are ways to hide content and show them at the click of a button. This content exists, but is not seen, so it’s like it’s being tucked away in a 3rd dimension, only to be visible when called upon. This is how I came up with the analogy of building vertically.
Here are 4 ways to build vertically, “Condo Style”:
1. Lightbox
Lokesh Dhakar single-handedly revolutionized the game with his Lightbox plugin. Lightbox allows content to be superimposed over the current web page. The great thing about Lightbox windows is that they aren’t real windows, so when you close the windows, you stay on the same page – no pop windows involved or having to click the “back” buton. Lightbox was originally intended for image galleries, but with some Lightbox clones, you are also able to load inline HTML and Youtube videos.
Where to get ’em? Lightbox is the original version, but there are more versatile clones out there. For general usage and Youtube lightboxes, I like Shadowbox. For WordPress, I recommend the Easy Fancybox plugin.
2. Accordions
Accordions are blocks that you can press to show and hide content. They’re great because they’re very easy to use and the title of the accordion makes it obvious what revealing the accordion will show. The following is a great example from a French culinary website called Unowhy?
Accordions can also help you reveal supplementary information. If you use Google search a lot, you will have noticed the new Google image search design: when you click on a photo, it shows a bigger version, along with important data, like the title, size, and the domain where it was found.
Where to get ’em? Use the accordion script by jQuery UI. You can also make one in CSS using CSS3 animations as well (here’s a beautiful accordion example by CoDrops). For WordPress users, use the Accordion Shortcode plugin.
3. Tabs
One of the first websites I designed as a freelancer was for Indigo restaurant. Visible menus are really, really important for restaurants so I typed out the menu so that it could be viewed right on the website. The problem was that Indigo has over 150 items (lunch, dinner, dessert, pupus, wine, and martinis) and each item had their own description. Listing them all would’ve created a page longer than Lindsay Lohan’s criminal record. The solution? Use tabs.
Tabs combine multiple content areas into one by making them all share the same visible area. Each time a new tab is clicked on, it will reveal the content related to it in that visible area. This greatly reduces the vertical space of the website. And like the accordion, it allows people to choose what content they want to see.
Where to get ’em? Chris Coyier has an excellent tabs demo and tutorial using jQuery over at his website, CSS-Tricks. He also has a great CSS tabs demo. For WordPress, use the postTabs plugin.
4. Responsive Design and Media Queries
With the popularity of mobile browsing on the rise, it’s important to be aware of responsive design and media queries. Mobile screens are very, very limited in size, so a good web designer usually eliminates or replaces certain website parts to fit a smaller screen.
The example above is taken from SBnation.com, one of the prettiest responsive sites out there. Mobile visitors to SBnation.com will see the the regular menu replaced with a drop down menu and certain superfluous widgets, like “Recent Posts,” will be hidden. This ultimately results in a mobile website with a very light-weight interface containing only the important stuff.
Where to get ’em? If you want to learn more about responsive, you can read How to Make a Responsive Site. For WordPress users, it’s best to find a theme that is responsive.