Having just finished months of work on a large responsive web project launch,  I thought it'd be cool to do a little round-up of some of my favourite tools and tutorials that I enjoyed or made use of. As a designer, implementing complex jquery or php can be frustrating at times, but luckily there are plenty of great resources to help get the job done.


Gridiculous
This is a sweet responsive CSS boilerplate grid system that I used for site structure. By the end of the design there wasn't too much left of it that hadn't been modified, but it was a great way to start, and helped to simplify the responsive design process down.

Flexslider
Flexslider is one of the best and most popular sliders out there. Easy to implement and easy to customize.

CSS MenuMaker
Some good starting points for nav menus here...quicker than designing completely from scratch if you like to play around with things.

Mobile Menu
Handy method of converting whatever your top nav menu is to an expanding icon based top menu on mobile.

Accordion
A cool tutorial on an animated accordion style dropdown lists/menu...useful for customizing for any content that you don't need to be visible right away.

Camera Gallery
Nice and straightforward, easy to implement full screen responsive gallery with carousel. Plenty of options as far as tweaking speed and animation

Tigra Calendar
If you need a quick datepicker, this is the item for you. Drop it in to your classes quick and you're ready to go. The actual jquery datepicker script is a cool product itself, and not hard to work with either. So if you are planning on making a lot of customizations, or need code that's more workable, i would use that instead.

Active menu PHP
The more I use php, the more I like it. Beyond your basic includes, it has some handy uses. Usually in a small site you can indicate the active link in the nav menu by adding a different class, but in a larger menu you want php to take care of that for you. Use the couple lines of code here and you're all set

A fitness club app I did some work on finally got released into the iPhone and Andriod stores a few weeks ago. The process really got me thinking about the growing number of variables in creating graphics.

Different resolutions and monitor sizes, different browsers with their own unique quirks, smartphones and tablet brands with variable operating systems. What all of it means, aside from lots of testing, is that something can't just be done once any more. It seems like any design work produced needs to be redone in a bunch of different ways. Even if you set something up to be responsive to the device it's meant for, it still involves extra work and having to be able to visualize what your design will look like in a bunch of different ways.

Just picture what it would have involved doing all of the extra designs and resizing back in the glory days of advertising before computers. But then I guess that's the catch...all of these new mediums for marketing are digital based. What a clever web these machines have weaved.

Having recently done another personal website redesign, I wanted to take a peak backwards to see how far the web has come. And really, what a difference over ten years makes! I think my first website was about circa 1999 or so, and from then, I've had four illustration site versions, and two design site versions, before integrating them this year. There is only one version I can't seem to find any files for. Obviously my own design and web work has improved over time, since, thankfully, I'm not in high school anymore. My visual interests as well, have morphed, shuffling among infographics, doodles and clean advertising looks.

The most amazing thing though, is the speed at which web technology evolves. At first, there was nothing but plain html to set-up your website with. All tables and nothing but. Then along came Flash which was hailed as the heroic smasher of restrictive web chains. Then came all sorts of graphic heavy ways of slicing up Photoshop files to get something that actually looked cool. The real gamechanger of the past five years has been CSS. The ability to distinguish presentation from content, and lay an entire site out in a clean, unrestricted fashion and then make easy changes across the site is a remarkable development. Lately everyone has seemed to turn against Flash, but it's still going strong, along with countless other impressive technologies like Ajax, asp, Jquery, CMSs, blogging and social media. Throw the newcomer html5 into the mix and it's pretty much the wild wild web all over again.

After several months in the making, the new website is finally launched. Featuring a ton of new portfolio content and a streamlined navigation system, jasondwyer.ca, is a new and welcome departure from the old site. I toyed around with several looks before going with clean and simple, which puts an emphasis on the work and not on the website.

One big reason for the redesign is that I wanted to include both my Illustration and Design work in the same website. Previously the two halves of me were kept separate, where as now I am just one creative entity. As my focus in art has been drifting into the fine art realm, that aspect has been given showcase room as well.

The other reason for the site redesign is that it has been a long time coming. The old sites were 2.5 and 4 years old, and a lot has changed in the web design world. I wanted to stay fresh with the new technologies and standards and have a web portfolio that is easy to update. The Bill Barilko artwork currently on the main landing page, is a tribute to how long it has taken to finally get around to making the changes. Not quite 49 years. but close enough.

www.jasondwyer.ca

In a world filled with knowledge, facts and numbers, a person can feel more than a little lost, trying to interpret all of the data and turn it into useful information. Infographics serve to bridge that gap between a whole lot of data, and an easy to understand image, that provides you with a concise summary of what you really need to know. Though not something most people stop and consider, the creation of an infographic involves the pairing of some serious brain effort, with visual flair, and one well done, is a thing of beauty.

Popularized in the current media by tech-savvy publication, Wired, the infographic look is a current trend in design that shows no signs of letting up. A great website for all things infodesigny is FlowingData. The blog is run by a data junkie, and features all things informational. Recent images include Winning Paper, Rock, Scissors strategy, Muppets Name Etymology and How a Giant Shark Took Down an Airplane. Some graphics are more useful and serious than others, but it's definitely worth checking out.
Flowing Data

Having been adding more web components to my site, I thought it would would a good idea to add a landing page to jason dwyer.ca. It made sense, since it's my main web focus, featuring my illustration, and it's the most likely domain to pop up on a search engine. Now a new visitor will be able to choose right off the bat between the design, illustration and blog portals, instead of having to find the links in contact sections. Hopefully it will enhance the user experience, and get a little a little cross-traffic happening. Eventually I'll just redesign everything in some nice fluid css, but until then...