The Changing Face of Information

Designing for the web and designing for print are, of course, two very different animals, but not as different as you might think. Websites have a lot in common with magazines in the way they structure information on a page: leading with attention grabbing headlines, using boxes and color to call out important information, even organizing content into sections and pages. Those annoying subscription cards that fall out of magazines are certainly the paper equivalent of pop-up ads.

The differences mostly have to do with formatting. With a print piece, you know exactly the size and shape of the page, and you can completely control where everything appears and it what order. Websites are by nature more fluid; adjustments need to be made for different browsers and mobile devices, and viewers have more control over small details like font sizes, but you still have a fair amount of control over where content appears on your web page, the size of the images, font styles, and how the pages break up.

kindle-iconI recently completed formatting an ebook for the Amazon Kindle. The ebook format is like a bucket of fluid content, which the reader software pours into pages – what appears on each individual page depends entirely on the screen size and the reader’s choices of font style and size. Kindle users even have a small amount of control over the font and background colors. The format doesn’t really give the designer any control at all over font styles, colors, image placement… It was very difficult to even control where page breaks occur, which was essential for my project, a book of photographs.

In the end, creating a book for the Kindle was an exercise in patience and compromise. With ebooks, content really is king, to the point that you are forced to evaluate your content and the order it is presented in. Since you can’t rely on headlines, boxes and color to call attention to the important information, you have to make sure all your content is important.

There might be a lesson to be learned there, one that could be applied to websites and even print pieces as well.

Gary Goldstick, Author

Gary Goldstick, Author

Gary needed a new website to  replace two previous websites, one detailing his professional background and another promoting his first novel. The primary focus of the new website is the novel, but he wanted to be sure to include some of the background material from his professional site.

We organized and re-wrote the content from the two sites that we wanted to keep, and I created a simple, clean design that would get information about Gary and his book to the viewer quickly and easily. I also incorporated a video trailer for the book, as well as Gary’s new blog on business fiction.

“Jefferson designed and implemented my new author web site. He was required to aggregate information from two existing web sites and add new material that we both created. His experience, creativity and ability to immerse himself into my particular situation made the process smooth and pleasant. I would highly recommend Jefferson for any web design project.”

— Gary Goldstick


Off the Rack: Using Pre-made Website Themes

I recently completed websites for three clients: Healthy Home Business, sculptor Todd Rau, and composer David Macbride. On all three projects I used pre-made, “off the rack” WordPress themes rather than coming up with custom designs. The benefit to the client is that most of the design and layout work is done, saving time and money. The down side is that most of the design and layout work is done, leaving little room for personalization.

In the course of selecting pre-made themes for these clients, I have identified a few things I think every WordPress theme should have:

Healthy Home BusinessTodd RauDavid Macbride

Responsive design. It should go without saying that we live in a world where tablets and smartphones are the internet browsing tool of choice. Yes, people still look at websites on their laptop and desktop machines (especially in the business world), but an ever growing number reach for their phone or tablet when they see a website address. If your website isn’t optimized for viewing on all devices, you risk alienating a large part of your potential audience.

Adapt, which I used for Healthy Home Business, is an excellent example of how to do responsive design for WordPress, with some elegant layout solutions that I have started to use for my custom website designs.

Compatibility with IE7 & 8. On the other end of the scale, it is a sad truth that many people are still using Internet Explorer 7 and 8. This is often the case in offices that bought their computers during the PC boom in the mid-1990s and haven’t upgraded since. It’s tempting to chuckle and maybe put in a “please upgrade your browser” message, but again, why risk alienating part of your potential audience?

Portfolio Press, the theme I used for Todd Rau’s sculpture website, fell down a bit here – I had to add the IE condtional code that should be standard for any theme.

Customization options. Granted, the point of choosing a pre-made WordPress theme would seem to be that the design decisions have been made by the theme designer, but just about everyone wants to customize a little bit. At the very least, controls for changing colors (especially backgrounds and link colors), a few different page layout templates, and the ability to place a logo in the header, should be standard with any theme.

I used Weaver II for David Macbride’s website, and it absolutely excelled at this. In addition to several pre-made sub-themes with different color schemes and design options, it has a simple interface that allows customization of almost every part of the theme, and it even has an advanced options page that allows additions to the CSS code without editing the style sheet directly.

Using WordPress with a pre-made theme is an excellent low-cost option for your website, and there are thousands of themes out there to choose from. But not all themes are created equal, so make sure you choose one that will give you all the options and functionality you need.

As a standard service I can set up your WordPress website for you, including helping with organizing your content and choosing the right pre-made theme (with minor alterations where needed). Contact me to learn more.

Randall Jahnson

Randall Jahnson Screenwriter

Randall wanted a major design refresh for his website, with an eye towards simplifying the layout and paring down the content so as not to overwhelm site visitors with too much information. He wanted the look to be classic but not dated, so I went for a newspaper headline look with a modern, functional layout.

“Jefferson Powers is my go-to guy for web design – his technical expertise and design aesthetic have consistently yielded great results.”

— Randall Jahnson


Michael Romanos Photography

This redesign for photographer Michael Romanos provided an interesting opportunity to build a website strictly in HTML, something I hadn’t done for several years. Michael’s website is essentially an archive of images available for licensing, with no blog or other need for any kind of dynamic content. Additionally, the client has a passing familiarity with HTML himself, so a content management system really wasn’t needed either. The result was a simple website that puts the focus squarely on the photography, without any gimmicks.

“I had been sitting on my stale and outdated web site for years when I approached Jefferson for help. He listened to my ideas, improved upon them, offered suggestions and worked with me to produce a site in very short order that met all my needs, looks great, and was affordable. It’s been an entirely positive experience.”

– Michael Romanos


Distraction Entertainment

This was a brand new website for Distraction Entertainment, a film production company. They had an idea for the typography, that smaller words would burst out of the website page titles. They also wanted to use dictionary definitions as a design motif. I refined those ideas and put together a page layout that would confer a fair amount of information without overwhelming the viewer. I also consulted with the client on the content and organization of the site, advising on written content and image selection.

“Jefferson just completed my site and it looks awesome. He was so easy to work with, had great ideas, and knows his stuff. Each time I submitted web copy or changes, he took care of them right away. The site came together much faster than I had anticipated and I love having a great presence on the web.”

— Nancy Froeschle, Distraction Entertainment


That Monkey is Everywhere

One of the things I like about designing logos is seeing the wide variety of things they end up on. In 2005 I created the logo for Danger Monkey, a signature coffee blend at Pablo’s Coffee in Denver. Over the years it’s been fun to see the Danger Monkey turn up on t-shirts, travel mugs, chocolates and the like, and now that pesky monkey is bigger than life on the side of their delivery van!

You can pick up a Danger Monkey coffee mug here, but as far as I know the Danger Monkey van isn’t available for purchase…

Website Font Freedom

Until fairly recently, website designers have been limited to designing with a handful of fonts that came standard on most computers. Any use of an interesting display font required the designer to create an image using Photoshop or something similar, and any change to the text would need the image to be re-done.

But no longer! The recently developed @font-face CSS property has made possible to embed font files into a website itself, so now designers can use whatever fonts we want.

Or can we?

The legalities surrounding the use of fonts have always been complicated, and probably always will be. Most importantly, just about every font out there was created by a designer who needs to be paid for his or her work, a concept that the world of computer use is still coming to grips with.

Additionally, the font files on your computer are software, and as such are subject to the same ownership and copyright laws as any other piece of software. This is what can potentially limit a website’s use of a particular font – if a designer wants to embed a font, the use of the font software needs to be cleared.

Many type foundries (the companies that create and release commercial fonts) have responded to this development by offering complicated membership schemes where they host your web fonts for you. This is not optimal as your website is now reliant on an outside link to display its fonts properly. One alternative is to use one of the many free tools out there to convert your font files to the web font format and host them with the rest of your website, which is fine unless those font files are under copyright. Some font websites, like the excellent, offer free full web font packages that include all the files you need.

So, while designers have much more freedom to design for the web using whatever fonts they choose, we still need to look at the legalities and practicalities. I think the best bet is to build up a library of copyright cleared, embeddable fonts to use. With thousands of fonts available, it will still be much better than the handful we used to be stuck with.

The Importance of Being Responsive

According to a recent Nielsen poll, smartphones are in use by just over half of U. S. consumers. I only recently got one myself, but I find myself using it and my Amazon Kindle to surf the internet a lot more often than I use my laptop or desktop machines, and I can’t be alone in that habit. More and more internet users are going to be interacting with your website via phones and tablets, and you should be ready for them.

Luckily that’s not as difficult as it might seem. Thanks to some recently developed, and quite simple, CSS code, optimizing your website for mobile devices has never been easier. Just in case you aren’t familiar with the inner workings of websites, most of them consist of essentially two components: html code that determines the content of your site, and one or more Cascading Style Sheet files that tell the browser how to display that content. A relatively new bit of CSS code can now detect the width of the browser window, so you can change your website’s appearance based on the size of the viewer’s screen, and make it easier to interact with on smaller devices like phones. The web development world is calling it responsive design, and it is fast becoming an indispensable part of website design.

And yet it’s amazing how many websites aren’t doing this yet. A website without responsive design will usually display full screen on a mobile device, resulting in text that is too small to read without a lot of awkward zooming in and scrolling around. 

So if you’re thinking about a new website, or refreshing an old one, make sure you have more than just a desktop monitor or laptop screen in mind.