A New and Improved LineberryDesign.com

Welcome to the newly designed LineberryDesign.com. The great thing about designing and building sites for myself is that I don’t have to worry about time and budget restraints. Here are some highlights about the new site:

Why a redesign?

Design is communication and redesigns should generally only accompany changes in communication. If a design isn’t best communicating a message, it should be realigned, not necessarily overhauled. This is good advice and helps prevent endless redesigns to compensate for a lack of message. Technology is a wild card in the world of web design, though. Things change, and they change quickly.

This redesign is the result of a few factors: one, the previous design no longer provided a good method of showcasing the work I was doing; two, I found myself having more to say, and, therefore, wanting to incorporate a blog; three, I needed to make adjustments for some rather large changes in the web design landscape.

Work is Beautiful

Portfolio Screenshot
Portfolio pieces get center stage in the new portfolio.

My new portfolio features a large screenshot and a write up of the process for each project. Of course, this means more work for me, but I think writing out my process gives good insight to prospective clients. A major shift was from a listed index of my recent work to a singular browsing experience: one project shown at a time. This lets me put a much brighter spotlight on each piece. Users can get, at a glance, the gist of a project. It makes large-scale portfolio navigation more cumbersome, but the portfolio is there to show my capabilities, not the overall number of projects I’ve completed; and, to that end, I think it succeeds.

Overflowing Thoughts

The blog section may have had the greatest influence on the overhaul. It meant moving from a completely hand-crafted site to using a content management system (CMS). I have a love for sites created completely by hand, every tag, every bit of white space in the code intentional, but I needed a platform to help me efficiently manage my site. Working with clients always gets priority, and a site that takes more time than is needed only gets further forgotten. So this site is now built on WordPress, and while I created the theme tag by tag, CMS’s have no choice but to destroy beautiful code; please don’t judge me by the aesthetics of the output code on this site. I blame WordPress.

I expect to use the blog as a repository for the ideas and concepts that tend to come up time and again with clients. I fear that the content will dry out, but this is an important part of the site, and I have high ambitions regarding it. Possibly a greater problem will be separating aspects of web development that I find interesting from aspects that clients find interesting. Speak to your audience.

Custom Taxonomies
Taxonomies complete the customized portfolio.

Interestingly, the move to WordPress allowed some rather cool features. The portfolio is managed as custom post types, distinct from posts, with several custom taxonomies: client, industry, and job type. Custom taxonomies in WordPress are just ways to categorize and organize posts in a tailored manner. What this means, though, is that, should it prove useful in the future, I can provide archive pages based on any of those taxonomies. I doubt I’ll take that step, but the ability is there. Also, in the efficiency bucket, each portfolio screenshot is only uploaded once and is resized for its various uses automatically.

I work so much on WordPress for clients, it’s about time I hopped on myself.

The Ever-Changing Landscape of the Web

Web technology moves at a fast pace. I’ve incorporated everything I’ve learned lately into this design. I’ve been implementing HTML5 on all of my latest projects, but this is the farthest I’ve taken CSS3. CSS is the language used to style websites; it’s easy to do, but incredibly hard to do well. CSS3 is the latest rendition of the language (and many parts of it are still being developed). One of the major enhancements it provides is a decreasing dependency on images. Images are lovely, but can be some of the largest size files downloaded for a site. Large files means slow loading. For browsers that support it, the gradients, shadows, and other visual effects are provided purely through CSS3. Fast. For browsers that don’t support it, either a fallback image is loaded or the effect is left out altogether. It’s a judgement call: is it worth the performance hit to load a couple of images and dynamically insert elements into the page to provide rounded corners to a couple of browsers that don’t support CSS3 rounded corners? It’s better to help the performance. But a 1 pixel wide repeating image for gradient fallbacks is worth it; it’s not much more for the browser to render.

CSS3 is great, but what’s really interesting is responsive web design. Responsive web design is a methodology to provide the best website experience from the same codebase for the wide variety of devices and browsers available. The layout and styles adjust to the varying constraints of different sized browsers and devices. I believe this to be a developing best practice for web design, and, while it’s no substitute for a true “mobile” strategy, it is fantastic for providing quality experiences across and unknown array of access points. Is it as fast and efficient as a mobile website? No, but it’s much better than a fixed width site with no consideration for small screens.

One More Thing

This isn’t as prominent of a feature, but I want to point it out because its a detail, and the details make the difference. The site is designed with a vertical rhythm. Every aspect is designed to align to a 7 pixel baseline grid. The font size is 14 pixels, the line heights are 21 pixels, and so forth. Many websites are designed on horizontal grids (this one is on a fluid horizontal grid), but few take into account a vertical grid. The reason is simple: it’s hard. Even mine falters on my resizable images (part of the mentioned responsive design), but for each vertical block of content on the page, the 7 pixel grid applies. Details like this add up to a sense of aesthetics. Most people won’t even notice, they’ll just understand that everything “belongs.”

Baseline Grid
Aligning to a baseline grid provides a vertical rhythm.