1. Put some text limiting parameters in place
Setting character and word limits – both in writing for your staff and in the code – will ensure that your article titles and article content will fit nicely within their designated spaces on the page.
In the example below, this nonprofit’s main page is pulling in blog articles with a wide variety of title and text lengths which makes the page look sloppy. Setting up title parameters to keep the title no longer than 2 lines (A below) will keep that title lined up with the date on the right and content parameters (i.e. how many characters or words to have before the Read More link) would help keep big blank spaces off the page and prevent text from flowing below the accompanying photo on the left (C below). All of which makes a cleaner, more visually appealing page.
Also check for any miscellaneous icons that your article feed is generating like this little folder icon – and get rid of anything that could distract (B below). It doesn’t have to be Stepford perfect, just in alignment enough for people to feel like all is right with the world when they come to you site (even if they don’t know exactly why)!
2. Give yourself some white space
Check all your images and see if you have enough space around the edges so the images / graphics don’t look like they’ve been cut off.
In the example, the Request a Greeter button (A below) looks squished with very little white space above and below the text, and it doesn’t coordinate well with the Donate button which has a different amount of spacing around it.
For the 3 square ads / graphics in the footer, each needs to be adjusted to allow more white space all around between the graphic and its border (B below). The middle one technically just needed more space at the top but looks fine adjusted all the way around as well. And for the last item (C below), we all at some point get stuck with a logo we have to accommodate on the site that may not be a transparent gif or the specific color we need so that it shows up well on our site background. Ideally you would want to contact the logo owner and ask for options that can be used on your site, but if they don’t have those options, try creating a box behind the logo in the color of the logo background (with enough white space) instead of trying to crop the background out.
3. But not too much white space
White space is a valuable part of design, but sometimes too much white space just becomes dead space – especially if it interrupts a website visitor’s flow through your site.
I see this a lot with scrolling sites where the long main page is divided into logical sections of content (hopefully an exact screenful) usually separated by color in the background. I’m not sure if pre-designed WordPress templates are just extra generous with spacing between sections or if WordPress programmers are feeling the grandiosity and wonder of their own designs and leaving in these ginormous spaces because they can. But as a person is scrolling down, all they want to do is get to the next section more quickly – not stare at blank spaces as they scroll. It’s very easy to leave enough padding to look good but get rid of any significant gaps that could disrupt the flow.
4. Think about scale
With the ‘go big or go home’ trend in website content, we are seeing lots of big text, big photos, and big graphics on websites these days, and it’s important to keep everything close to the same scale.
In the example below, this oversized site shows the tiniest social media icons. We show an alternative that is more in line with the scale of the site overall. We used squares to not be too similar to the large photo circle above it but still tying in with other square elements on the page.
5. Keep your program photos big
Thumbnail photos are still appropriate for certain areas of your site like secondary news items where the photo is not as important as the news itself; but larger photos should be used to show program impact. In the example below, the nonprofit has a program participant profile as the main photo and then a slider below it with tiny photos that are also program participant profiles. Enlarging the photos doesn’t take up much more room but they are now more impactful and website visitors are more likely to click on them to read more.
Also – because the page was fairly photo-heavy (even before making the 3 photos larger), the ad next to the main photo promoting the walkathon doesn’t really stand out and actually looks like it’s part of the main photo when it’s not. So in our “After” mockup we show what it would look like with a simpler white background, using the event logo, which helps it to stand out on its own.
6. Make it easier for people to get to the info they need
Since content management systems have flourished, website menu systems have become more easily convoluted. I often see an item on a main page that links to a landing page consisting of only one paragraph with a Read More link and then you have to click again to actually get to the article. There used to be a one-click rule, that everything on your site had to be reached with one click. This is unreasonable these days as sites are getting very information-heavy and you don’t really want a ton of menu options. The current rule of thumb is a 3-click rule; but if you make the person click more than once to get info, make sure that the interim pages are relevant and necessary.
In the same example above. the nonprofit promotes an event next to the slideshow – their annual walkathon. The button says “Register Your Team Now” – but when you click you end up on a page that has the event logo twice and you have to choose a location; this takes you to a location landing page with a brief overview of the event with another link that says “Click Here to Register.” Then you actually get to a separate microsite for the event – but not the actual registration page – you have to click AGAIN to get to that page. So in our mockup above (under #5), we show the main page ad redone with 2 buttons – one for each event location – and those buttons should take the website visitor directly to the main page of the appropriate event microsite. None of the pages skipped in this process have any info not already on the microsite, so they are not necessary.
7. Modify your site template a little
Some of the biggest indicators that a site design is outdated include: a gradient or textured background usually in darker colors, a border around the site itself, and rounded buttons with heavy gradient. Sites that look like this are really in need of complete makeovers not just because of the look, but the code is going to be outdated and it won’t be a responsive site that works well on mobile devices. But if the budget is tight and you just want to get it to look a little more modern, some simple adjustments to your style sheets can help. In this example, we did a mockup with the overall site border removed and just removed the bottom half of the background to add some brightness and openness to get rid of the boxed-in look.
8. Don’t ignore the tablet view in responsive design
For those of you who have modernized their sites with a responsive design – make sure you check what your design looks like at different widths. It’s not just about the full screen view and mobile view. Many people will have smaller computer screens or will open your site with their browser not filling the entire screen (especially for those of us who multi-task with all kinds of windows open at the same time). It’s the tablet view that is often the problem – somewhere between full screen and mobile screen.
When testing your site, open in your browser and resize your browser until that exact moment when the layout switches to tablet view. What does it look like? In the example below, the full view has 4 columns for the photos, which switches to a one column view in tablet view – but with the photos sized strangely and not looking quite right. Rather than directly switching to one column like the mobile view, it will look much better to go to 2 columns in that interim tablet view. http://m25m.org/
9. Line up your dropdown menus better
Creating dropdown menus is easy but making them look good can take a little bit of effort. You have to decide where the best placement is relative to the main menu item – centered directly below or off to the left or right and how to “connect” it visually to the main menu item so they look like they belong together. You also need to make sure the menu looks good dropped open over whatever you have below the main menu.
A good rule of thumb: if you have a straight line below the main menu items, use that line as the starting point for your dropdown menu – it will just look cleaner. In the example below, the dropdown menu starts awkwardly between the main menu item and the straight top edge of the slideshow. In our mockup, we’ve moved the top edge of the dropdown to line up with the top edge of the slideshow and added an arrow to connect it to the menu visually. This “connection” can also be done in many other ways including changing the color of the main menu tab to match the color of the dropdown.
10. Look at how your logo fits within the header
Sometimes our logos just don’t fit exactly the way we want them to whether it’s in the perfectly square social media profile boxes or on our website headers. So you can either design the website around the logo or adjust the logo to fit within the website. Either way, I’m a big fan of having slightly different variations of the logo that will work best in different specific scenarios. In the example below the nonprofit was clearly going for a slimline top menu that would not take up too much space as a fixed menu (that stays in place as the website visitor scrolls down the page); but their logo is an awkward size to really keep it slimline so they ended up with a big chunk of wasted space below the menu. One option would be to push the logo down into the slideshow as a banner look (option 1) or to create a horizontal version of the logo that would fit better (option 2).