Blog entries about web design & development, our clients, our projects, our company, and more

Recreating bostonwebstudio.com

Posted July 07, 2009 @ 10:20 AM, by Marc, in BWS — 3

Seventeen months have passed since this website was last redesigned and, while there were a few attempts made in the meantime, this version—the sixth version—feels the most suitable. It started back in March of this year and, in what seems to be a welcome trend, very little time was spent in Photoshop; just enough to create the handful of images seen throughout the new design. Beyond that, Photoshop was only used for color-to-hex information, pixel-specific measurements, and the occasional 15-minute period when I just needed to see a spinning beach ball. Much of the remaining ‘design’ work was done while writing the HTML and CSS.

Designing while coding is my new BFF.

When I started developing the HTML and CSS, I briefly fantasized about using HTML5 and some of its new elements, but opted to stick with old faithful—strict XHTML, of the HTML4 variety—for now. Converting the markup to HTML5 is certainly on the to-do list, but I’ll wait until it’s more fun than only updating the DOCTYPE. Once more browsers support the new elements, I’ll happily take the time to rewrite some of the HTML.

After writing the HTML and the CSS, and doing some browser/environment testing, the ExpressionEngine development got underway. I setup EE to manage quite a few areas of the website: the blog, the portfolio, the testimonials, the strategic partners list, and the <h1> content at the top of the home page.

Comment spam is curbed by the Akismet extension for EE, and form validation—for the file upload form and the blog comment form—is handled by the wonderful jQuery validation plugin.

I used CSS 2.1 and CSS 3, sparingly, to provide a more satisfying experience for visitors who use better web browsers. For example, there are semi-transparent elements that become opaque when hovered over, there are rounded corners on some elements, there are drop-shadows on select pieces of content, and there’s even animation-like transitions that occur when a visitor hovers over many of the clickable elements.

:first-child and :last-child, among a few other CSS 2.1 and CSS 3 selectors, pseudo-classes, properties, and values, were used to keep the markup clean, where applicable. I also dabbled with ::selection, so go ahead and select any text on this page and if your web browser supports it, you’ll see white text on an orange background.

For any visitors who are using older web browsers that might not support some, or all, of these little fanciful treats, the new design will still render well enough. All of the content will remain legible, the navigation will still work, the forms will still work, etc. In fact, it looks decent in Internet Explorer 6, and that web browser is nearly eight years old.

Alright, enough with the technical mumbo-jumbo.

All-in-all, this new design aims to be much more helpful to potential clients by giving them a closer look at who Boston Web Studio is, the work completed so far, where particular skills and focuses lie, what we’re looking forward to in the future, and much more.

---

---

---

• Previous: Password-protect a Subdomain with Plesk
• Next: Comparing Apples to Oranges