Posts Tagged "CSS3"

The Great Portfolio Redesign of 2013

I haven’t redesigned my portfolio site in ages. It’s undergone minor “realigns” in past years, but this time I started from scratch. I give you the new Blue Sphere Studios!

Blue Sphere Studios
This redesign features a layout that changes to adapt to whatever device it’s viewed on.

All the buzzwords are in there: HTML5, CSS3, and most importantly, responsive. With mobile becoming more and more of a factor for the web these days, responsive design the skill to have right now. That is, doing away with specific mobile versions of websites and developing one website that actively “responds” to the device form factor, be it a desktop with a 30-inch monitor, tablet, or the smallest of smartphones.

Responsive design was just starting to show on websites around the time of the 2011 An Event Apart Conference, but the following year at the same conference, it was all about mobile, and responsive design took center-stage.

Next to the slow but rewarding change from websites with table-layouts to the css-based design, responsive design is the biggest change in thinking for web designers. Mobile-viewing is growing and continues to grow exponentially, while the desktop experience grow has slowed, and your next website redesign must have a responsive design or you are leaving a big part of your audience with a less than happy experience on your website.

A responsive design makes a difference!
A non-reponsive website (left) will leave your mobile users squinting or zooming in and out, while a responsive design (right) changes the layout on the fly for a better mobile experience.

So check out the new Blue Sphere Studios website and let me know what you think!

Brand-new FileMaker.com

Months of work has led up to a brand-new FileMaker.com. This version of the website sheds the 3 or 4 (more?) previous designs, and brings the entire site into a single, unified design:

New FileMaker.com
The new FileMaker.com
The new FileMaker.com

The previous state of the website had iterations of old designs from years and years past running together simultaneously, with their own sub navigation, their own css, and to a degree, their own structure. As you can imagine, this was a huge headache for updating the site. Just to illustrate what a mess this was for the user, here’s random handful of pages on the old site, each pointing out 6 different sub navigation designs:

Sub-navigations
Yep, this is all the same website
Sub-navigations

We invested the time to bring all these different generations of the website under one, brand-new design and architecture. The sub navigation is now pretty consistent across the entire website. It was a big project up-front, but I know that it will really pay large dividends in the coming years with future product launches and general maintenance.

The global navigation underwent a huge overhaul. The old global navigation:

Old nav
Old
Old nav

…and the new one, using the superb protofish dropdowns:

New nav
New
New nav

As a side note, I made a big push to use some forward-thinking CSS 3 techniques, and drop full support of IE6 (Hallelujah!). Small CSS 3 enhancements like rounded corners, drop-shadows, and pseudo-selectors sped up development time, allowing me to literally re-code the old site in this new design in the insane project schedule we have here.

This was a huge effort, and a big redesign of the site was something that I have been wanting to do since I came onboard. I jumped at the chance to get it done in the small window of opportunity that I had. Congratulations to the web team for a job well-done. Now if only we could get a break–onto the next product launch…

—-

And since this took so long to write and post, FileMaker 11 has launched already. Bring on the purple!

An Event Apart in San Francisco

An Event Apart
A sea of fellow coders and their Macs
photo by kris krüg

I was fortunate enough to attend this year’s An Event Apart web conference at The Palace Hotel in San Francisco for the last two days. It was a fun two days of web design and development goodness! With big names in the web development community such as Jeff Zeldman, Eric Meyer (with whom I got to have lunch with the first day), Jonathan Snook, and Dave Shea, to name a few…I was in awe. These are the pioneers of the web standards movement–guys whose books and articles on the web made it possible for me to be where I am in my career today.

The sessions were a good variety of talks, ranging from high-level looks at what is happening in design right now, to nitty-gritty, head-spinning code. Not surprisingly, jQuery, a Javascript library that I loved from the first time I used it, took center stage at this conference, with every speaker mentioning, evangelizing, and even using jQuery in their demos. Yes, with jQuery, you too, designer-guy, can write javascript!

I loved how Twitter was used there too. AEA set up a live feed page where any Twitter updates with hash tags such as #aea or #aeasf were automatically added. I could see what others in the ballroom were thinking in real-time as the speakers gave their talks. Unfortunately, the only time I updated my Twitter was when I disagreed with Nicole Sullivan’s frowning on location-based CSS:

AEA Live Feed

With the ever-changing nature of the web, it’s vital for web professionals to be able to take time out of the grind of their work and see what others are doing, and what is coming. I came out of the last session more energized about my work and what I do than I have felt in a long time, and already eagerly waiting to go again next year!

Um, Apologies to my Twitter and Facebook friends who were bombarded with geeky web speak for the past two weeks!

Some of the few pictures that I took.