Really, it should never be content vs. design; it should always be content and design together, harmoniously collaborating to get you those conversions you want.
Sometimes, though, the design and content are at odds.
The example here is Tom Hapgood’s design mock up for Rocky Grove Sun Company, whose site we’re expecting to launch this month.
Tom is using WordPress, the Pods CMS plugin, the WP e-Commerce plugin and various other free plugins to produce a site that the guys at Rocky Creek can easily edit as technology and their business change.
This is important for Rocky Creek, since their website will have a wealth of technical information about solar power, as well as galleries of their work which they want to be able to update easily. The site owners are also writers and speakers on the subject of sustainable energy, and they expect to have new ideas to share (“Maybe the occasional rant,” says owner Jimis Damet) as well. But they’re not especially comfortable with internet technology and don’t want to be. Our goal, then, is a website with a content management system over which they can have a high level of control, without a steep learning curve.
Tom is also using an HTML5 Boilerplate as a starting point on this project, so there’s a lot of innovative technology happening. An attractive design, too, combining the down to earth feel of the company with a bright, fresh look.
But when I got the original mock up, I wasn’t completely happy. If you look at the two designs, you probably won’t be able to guess why. If you were to click on them, though, you’d probably notice that the text doesn’t read sensibly in the earliest one.
The text was written first, and I was sort of imagining a column on the left and a column on the right. Not a design decision — just what happened to be in my head as I was writing.
For the left-hand column, I wrote text in a classic formula:
- point A
- point B
- point C
- and therefore conclusion
For the imaginary right-hand column, I had photos with captions.
When Tom created the page, he had the cool idea of putting the photos in a different spot: horizontally, right across the middle. He asked for a 75% reduction of text, and put the new, briefer paragraphs in the four corners of the page.
Reading right to left and top to bottom, as we English speakers do, it read like this:
- point A
- point B
- point C
Now, I’ve had enough designers admit that they don’t read the text when they build a page to understand that interrupting the cogent flow of my argument wasn’t the plan. But it definitely weakened the page.
What’s the solution? I did offer to rewrite, since I didn’t have pods and things to work around. Writing the page nearly always takes less time than designing it, so rewriting can be a better choice than redesigning. However, we were able instead to move the elements around. The introduction is now at the top, updated to stand alone and complementing the rotating gallery which the client suggested. The conclusion and original tagline are set apart visually with check marks to make a strong statement for visitors to see immediately. The longer text setting out those proofs that Rocky Grove is the best source of solar power are below the photos, back in the right order.
For some visitors, the lengthier text will be below the fold, but that’s okay. The content above the fold is strong enough either to move visitors to call the company or to scroll down and read further. The keyword-rich text is there for search engines, too, to make sure that they offer the site to the people who need it. I think the second take is bolder, too, and Tom feels that it’s “sunnier” — which is a good thing for a solar power company.
When we build sites, we often do a certain amount of back and forth between content and design. There’s nothing wrong with that. Just make sure that the two work together when your site goes live.
I am so glad I found your website. You offer some great information to all of us who are stumbling are way to greatness. My problem is I can’t seem to wrap my head around technology (writing code, understanding technological references, and the how to’s of even the simplest technological creations)in a manner that confirms to me that I am achieving success, that I’m on the right path, or that I executed a task correctly. It’s an affiliated blog and I have learned to code a few elements…sometimes it works, sometimes it doesn’t(and then I spend days or weeks trying to figure out what a particular error means and how to fix it). The layout on my blog is not so great because I can’t figure out the coding. I’ve found a few websites with tutorials which is helping a bit and I would like to learn more. For me, the color on the blog is visually pleasing I just need to adjust layout. So I am searching this site for more help. Any suggestions? Thanks. Have a great day!
You know, if you’re having fun learning, then you should go ahead and continue. If not, there are plenty of good quality Blogger templates that you can upload. That’ll give you a nice look without the investment of time in learning the tech.
I took classes in web design and got certification for html, because it’s my job. You need to know basic code in order to make your blog look good consistently. So I have the tech basics, but I don’t design sites myself because I don’t have that particular talent.
My #1 suggestion would be to let an artist design your site, whether by hiring a designer or by using a pre-made template, and focus on what you’re best at. That’s what I do.
However, if you’re having fun with making your own design (and I certainly had fun in my classes), then you might think about making your header smaller so it’ll fit in the white space and also so people can see some of your main content and know what your website is about. Move your content up above the ads for the same reason.
Thank you for the feedback. I am having fun learning and designing the page. I am currently using a template and I think that is a portion of the problem. My design ideas go beyond what I am able to do within the boundaries of the template. Plus, my lack of knowledge doesn’t help. LOL. I am trying to switch the ads around but they only seem to move within a certain perimeter. I will look into taking a web design class and check out the link you listed above. Thank you for your help.
Sure — happy to help. I look forward to seeing how your site changes as you work on it.