Most people see and experience what’s called the “front-end” portion of a website. This is the part that contains the content intended for consumption, or perhaps products to be sold, or whatever the intent of the website. However, most websites require thoughtfulness and planning in a place very few people actually see: the “back-end,” or administrative area.
One of the most rewarding moments in my work is that first time I share with my client how they’ll be managing the content on their new site. If I’ve done my job well, I’ll get a response that’s something like “Wow, that’s easy!” The truth is that the back-end content management planning often takes a back seat to the front-end design and behavior. And that really is a shame.
The animated image above is from a WordPress site I worked on for a real estate company (kudos to the wonderful Advanced Custom Fields plugin). We worked together very closely to make sure their content management experience was compatible with their workflow, and we did it all before we even started on the visual design. There were at least three revisions before we were satisfied that we had created the most efficient workflow possible. This really worked to our advantage―we were all so engrossed in the content that the front-end portion was much easier to plan and design.
The point here is that there’s usually much more to a good website than the part you see while browsing the web. I now try to emphasize to potential clients that my pricing may differ from others because I normally build in time to plan and design a solid, sustainable back-end that can grow with your site and your content. After all, you’d never build a beautiful house with a lousy foundation, right? ;-)
]]>In The Elements of Typographic Style author Robert Bringhurst calls this font “one of the loveliest digital families yet made.” Created by the all Italian CAST foundry, Rialto dF is indeed a lovely font family, and one that I never dreamed I’d get my hands on. Adobe sort of slipped this one in while no one was looking… Or at least I wasn’t looking.
Anyway, I have no idea what I’ll do with it, but at least for now I can look forward to making up an excuse to use it.
]]>Luckney Animal Hospital is a different sort of animal clinic, and the Zierens wanted their logo and website to reflect as much. Dr. Zieren’s wife, Erin, is an architect, and she had a very clear vision of how they wanted to look to their customers: hometown and friendly, yet knowledgeable and compassionate. As we worked together, the result was what you might call a “yesteryear local vernacular” with eclectic layouts and typography. In the end, the final work was spot-on, and the Flowood community has an awesome new veterinary hospital at their service.
Visit Luckney Animal Hospital online at luckneyanimal.com.
]]>Occasionally I get to design for people that I love to work with. Lifecycle Solutions does amazing work right here in Jackson, Mississippi, and partnering with them on projects has completely upped my game. I designed their logo and website a few years ago, but I recently had the opportunity to revisit both and do some freshening up. The results are clean and simple, and we intentionally departed from more common tech themes to help them look and feel as unique as they actually are. Visit lifecycle-solutions.com to see the full site.
]]>To someone not versed in WordPress speak, that sounds like a bunch of hooey. But all I want to do is get all posts from a category that I created and order them by a custom field that I also created. Like any good WordPress newb I turned to Google and came up with this:
In my mind that totally should have worked. But it was actually ordering the posts by an older custom field that I had deleted. By using Query Monitor I was able to see that it was still sorting by this old query—I still don’t know where it lived. Anyway, after a sleepless night and a few more hours of table-beating with my head, I tried simply removing the post-type
parameter:
And boom! It worked exactly as expected. My only hang-up is that custom taxonomies can be mapped to more than one post type, so what if I really did need to indicate a single post type? Oh well. I guess I’ll find out when that need arises.
]]>Those were good times. I built a blog using Textpattern and participated in the community a bit. I even used it for some client work. It wasn’t long, however, before I realized that something more robust was needed for client work. How I found ExpressionEngine, I can’t remember, but its discovery opened up a whole new world. Whereas Textpattern had custom fields through the means of a plugin, ExpressionEngine was all about custom fields and organizing content however you preferred. Yes, ExpressionEngine is amazing, but it’s really big. And yet I built another blog using the free version and wrote a couple of short posts. And then my blog died.
I have no idea what happened, but I didn’t care enough to try and fix it. So this domain had a dead website for quite a while. Now let’s fast foward to Node.js and the popularity of static site generators. I had been using Node along with Bower and Gulp for local development tasks, and it was fun. It’s still fun. So that started the search for a “fun” JavaScript blog generator powered by Node. I tinkered with a few, but the simplest for me was Hexo. After installing and customizing a theme to my liking, here I sit writing my first post.
So, after all of that, I’ll be really honest about two things:
And away we go!
]]>There have always been a select few designers that really appeal to me, and they have almost always been those of a more classical, conservative nature. Of those, Massimo Vignelli was often criticized for producing the same style of work over and over again for all of his clients. However, given his long and successful career, one has to admit that he must have been doing something right. I see his work as a constant seeking of perfection—he did what he did, and he did it really well.
Mr. Vignelli passed away yesterday at 83. The design world will surely miss him.
]]>I received this check from a client last week and it totally made my day. After all, this is why I do what I do (in addition to providing for my family)—I want to use my God-given abilities to help people, make them happy, and get paid for it. And it would be great to get feedback like this from everyone I work with, but to be honest… sometimes I get the opposite.
One truth that has consistently revealed itself to me is that people generally have no idea what to expect when they seek out a website designer/developer. They don’t know how much a website will cost, how long it will take to complete, or even if they will technically “own” the site once it’s finished. So when someone hires Addison Hall Design, they look to us to clear up all of these unknowns, and normally I’m able to do that fairly well. However, there are times when I assume too much (I know, when you assume you make an… well, you know the rest) and my client still feels in the dark. Why? Most of the time I think it’s because we get in a rush—the client may have a really tight deadline that we’re trying to meet, or it may be that our plate is a little too full and we’re simply trying to juggle too many balls. Either way, it’s still my job to keep the client out of the dark and make them comfortable. If I don’t, things can get out of hand for both me and the client, and I hate to admit it, but it has happened before.
So, to everyone I’ve ever worked with, it’s not your fault if you felt confused or lost, or even a little taken advantage of. Nope, it’s not your fault—it’s mine. My job is not only to design and build you a fabulous website, it’s also my job to take the lead and guide the project. It’s my job to make sure you’re informed throughout the process and happy with the results. It’s my job to make sure you know what you’re spending your money on and you don’t regret spending it. Because when all is said and done, I want you to love your website and say, “Man, Addison rocks!”
]]>So, from this moment forward Addison Hall Design will be designing for all devices—not just desktop computers. And while I cannot possibly provide the perfect solution for every budget out there, I will do my best to provide an adaptive, usable experience for every client site on any device.
Here’s to the future of web design! Huzzah!
]]>No need to buy Photoshop if you simply need to touch up and resize your images. Paint.NET is a free image editing application for Windows that can do much of what Photoshop does. And if you use a Mac, check out Paintbrush. It’s not so great at color correction, but cropping and resizing images are no problem.
If you need to resize 10 or more images, it can get a little tedious to open up each one in your image editor and modify them one by one. But there are specialized applications made for resizing and modifying lots of images at once. FastStone Photo Resizer allows you to select as many images as you like, choose a new size (along with lots of other changes if you like), and output them all at once to a new location on your computer. (Note that the free version is for non-commercial use only. Go ahead and pay the license fee if you use it for your business—it’s worth it!) Mac users should check out SmallImage for a similar toolset.
Sometimes you need to access your web server and upload new files or maybe move some things around. To do so you need an FTP (File Transfer Protocol) client like FileZilla. Available for both Windows and Mac (Linux, too), FileZilla is open source software and, therefore, free to use.
There’s even a tutorial to get you started with the basics of FTP.
]]>What if you didn’t have to choose? What if you could simply develop one application and it worked on all of the major devices? Well, you can—mobile web apps with HTML5. 37Signals recently did it with their Basecamp web application. There’s nothing to install or update. You just point your mobile browser to your Basecamp account and you get a special, mobile-optimized version on your phone that works much like a native app. You can even bookmark it and save the bookmark to your “home” screen. Best of all, it doesn’t care which of the major phones you use!
Not too long ago, I had a discussion with someone about an iPhone app for college campuses. It sounded great: maps of the campus, class schedules, places to eat, and much more. However, my first reply was, “What if I don’t have an iPhone?” Mobile web apps are not only more cost-effective (build once and deploy everywhere), but they’re more consumer-friendly because they’re less likely to exclude anyone.
There are instances, I will admit, where an device-specific app may be more appropriate, like games, for example. The mobile web is more powerful than ever, though, so it should certainly be considered when beginning discussions about creating a mobile app. There are two big questions to ask yourself:
Does my budget allow us to build an app for two, three, or four devices?
If we choose to build for one device, can we afford to exclude the customers that use other devices?
If the answer to either of those is “no,” then it’s time to think about building a mobile web app.
]]>Perhaps the explosion of mobile web devices will force designers and developers to appreciate that same simplicity across all devices, big or small.
]]>Mighty web usability expert Jacob Nielson has just released an article that suggests while scrolling is acceptable, it doesn’t excuse website owners from prioritizing content. He has even included some interesting eye-tracking studies. Cool.
Read Scrolling and Attention.
]]>While working on the new Omni product page for Baron Services, I thought it a perfect candidate for the “lightbox” effect—you know, the screen goes dark and a small, inset window appears with an enlarged image, video, or other content. I set up the page and it was beautiful. It even tested well in all the major browsers: Firefox, Internet Explorer (versions 6 through 8), Safari, and Opera. However, one person at Baron Services was having trouble, and I could not reproduce the issue.
It turned out that the anomaly was Internet Explorer 8 running on 64-bit Windows Vista, and I could not figure out what was going wrong (I don’t have 64-bit Windows Vista to test). We had two choices: spend time and money trying to make the “fancy” version work, or drop back to a simplified, yet usable version in favor of wider compatibility. It was an easy decision—simple won by far, and it was not only a matter of budget. We needed to get a working version out quickly, so time was an important factor as well.
The final version incorporates a simple browser pop-up window so that the user still gets the feeling that they do not really leave the page, much like lightbox. No, it’s not quite as fancy, but it works and it launched on time and within budget. That makes both the users and my client happy.
]]>Handcrafted CSS: More Bulletproof Web Design is an attempt to share some of these details that matter most. By encouraging “progressive enrichment” to utilize advanced CSS and CSS3 properties that work in browsers today, to reevaluating past methods and best practices. This book will show how craftsmanship can be applied to flexible, bulletproof, highly efficient and adaptable interfaces that make up a solid user experience.
There’s also a video version on DVD that can either be purchased separately or bundled with the book.
I’ll be pre-ordering mine tonight.
]]>Like Ryan, the author of the post, I also was smitten by Mr Nielson’s site—the simplicity was refreshing, and still is. The markup is a little dated and it’s certainly not perfect, but it remains a shining example of what HTML was intended to be: marked up text. It contains no animation, no video, no bells and whistles, and hardly any graphics at all. It is not beautiful design; it is beautiful simplicity.
What happens when you add good design (not glamour) to simplicity? You get sites like this and this. Oh yeah.
]]>One of the biggest stumbling blocks when building a website can be its most important feature—the content. While the designer/developer’s job is to design and program the site, the client must gather and create the content. Here are a few notes to help get started. Additionally, I’ve included how I prefer to receive content.
Ninety-nine percent of the time, most of your content will consist of text. What does that mean? Focus on your text first! Without copy for your website, you have no website.
When writing the text for your website, remember to keep it brief and to-the-point. Research show that most users read websites somewhat like newspapers—they scan for bits of information.
How to deliver? A simple Microsoft Word document will do just fine. You get extra points if you reference your photo names within its associated copy. (Note that I said reference and not include—see below.)
If text is the star of your content, photographs play a major supporting role. Nothing dresses up a page better than a great image. Whether you take your own photographs or hire a photographer (or even hire an illustrator), it is helpful if you at least narrow down your image selection so that it won’t take hours to scour through hundreds of pictures. Name your photos something useful as well. For example, “board_members.jpg” is much more helpful than “DSC_011258.JPG” for obvious reasons.
Please also note that it is preferable to have the photos in JPEG or TIFF format and not embedded in a word processor document. If you would like to indicate placement of images within your text document, simply include the photo file name.
How to deliver? I prefer a CD or DVD with a common sense folder structure. What do I mean? Put your company history photos in a folder called “Company History” and your product photos in a folder called “Products”—that is what I mean. Also remember to name your photos something human-friendly!
In the right applications, video and audio can be great compliments to your primary content. You must remember that, like your text, video and audio must be brief and bite-size. If you have a 20-minute video that you’re dying to get online, you should probably consider breaking it up into at least four- or five-minute chunks.
How to deliver? CD or DVD is definitely the way to go. Regarding formats, video is preferable in either MPEG, WMV, or QuickTime. Those same formats are acceptable for audio with the addition of MP3.
Personnel directories, real estate listings, and even product catalogs all are typically database-driven. Your website needs will usually tell us whether or not a database will be helpful, or you may have an existing database that needs to be included.
How to deliver? Unless your database is really complex, it is normally best to simply export your tables to either a Microsoft Excel or Microsoft Access file. If you are creating your database from scratch, we probably need to discuss how to best set up the rows and columns so that importing will be problem-free.
The first thing I do for every new site (or redesign) is create an outline of the content and structure. This serves as a road map for both myself and the client. For me, it helps in planning the interface. For the client, it serves as a checklist for content—each list item represents a page, and that page needs content. Most outlines look something like this:
See? The process is not quite so frightening if you just take the time to get organized. Remember that your content is why users will come to your site and hopefully return, so take its creation seriously. Map out your plan and stick to it!