The Future of Web Design for You

Future of webdesign New york 2011

Sometimes i’m pleasantly surprised to find out that innovations have happened that will greatly effect the way I design, develop and think. Over the past 72 hours I had the opportunity to learn from some of the best minds in the web design & development world at Future of Web Design NYC. This delightful Carsonified event is centered around the idea of progressions in the industry and hopes of leaving it’s attendees with a pocket full of new tools, ideas & a list of like-minded connections.

As I expect HTML5, CSS3 & Mobile were the most popular topics but not introduced away that let you get your feet, you we’re thrown in head first and it was great!

Brandon Mathis, Sass & Compass

One of the first impactful sessions that I attended was by Brandon Mathis who is a part of the core development team at Compass. His sessions gave an overview of Sass, and how to leverage the power of Sass using Compass. If you’ve used LESS in the past then you can understand the idea of compiled CSS. Sass has a similar concept but offers so much more. One thing that really showcased its power was an example using social media sprites. With Compass you can specify a directory for all of your sprites static & hover states and then with a few lines of code, generate all of the CSS for your sprites. Writing the CSS for 50 sprites could take an hour, with Compass you’re looking at 30 seconds. I also love the fact that you don’t need to write out the vendor specific prefixes for CSS3, with Compass mixin’s, you can just write the base for each style and it will generates the vendor specific prefixes when you compile the CSS.

I suggest taking a look at the slides from Brandon’s session on Sass & Compass : The Future Of Style Sheets Now, here —> http://speakerdeck.com/u/imathis/p/sass-compass-the-future-of-stylesheets-now

“if it’s not responsive its not web design”

It’s been a long time coming and luckily i’ve been getting my hands dirty with media queries for my mobile feedback platform SquaQr. It’s seems that the consensus amongst everyone in the design/development community is that going forward you must design & architect your sites with a responsive layout. It’s one website, no matter the device, a user must have a good experience. Media queries have been available to us for years but are just now being used in full capacity. Again and again responsive web design became a speaking point and each speaker had deep insight on the topic. My personal favorites were Steve Fisher(HelloFisher.com) & Aaron Weyenberg(AaronWeyenberg.com), both were very entertaining speakers at the core but had relevant examples and clear solutions.

HTML5 Device API & Web Workers

I thought I knew a lot about HTML5 until Tim Wright introduced the device API’s and web worker. The addition of these to features to the HTML5 spec truly helps developers push the web into the future. Web workers allow you to run multiple javascript files in parallel with each other, as where the DOM previously was limited to running one script at a time. Tim gave a great example of how this might be beneficial. So in Yelp you have the option on the Google map to allow the location pins to reload onces the map has moved, but as it works now the map is moved then a script runs and performs a search for locations on the current view of the map. With web workers you would always show the locations pins and a script wouldn’t need to perform a new search every time the map is moved.

Through the device API we can easily access & interactive with mobile devices. Security is certainly an issue but once we can access a devices camera, contact lists, applications a whole new world is opened up for developers. The device API is still in the works but the WC3 are expecting to have a full spec doc released in March 2012, in the mean time you can see some of the details here(http://www.w3.org/TR/dap-api-reqs/).

The future of web design is no longer the future and we now have the tools to make it what ever we want. Thanks again to Cat, Carsonified & all the speakers for making Future of Web Design such a great experience, I look forward to seeing you next year!

CSS3 & HTML5 from a generalist

Smashing Magazine recently posted an article defending the generalist (jack of all trades) in the web design industry. Having a basic knowledge of a vast number technologies versus having copious knowledge of a few specific technologies, get you much further in the world of web design and development. Not only does it allow you to stay nibble and ride the waves of the industry but its more fun and at the end of the day you are a more valuable asset to your clients.

Every few months a browser update is released with more support for CSS3 & HTML5 and in turn allowing me to throw away old technologies. So needless to say this is an exciting time for front end developers. For years we’ve relied on jQuery, heavy javascript or even Flash to handle what would seem to be basic user interface enhancements. jQuery isn’t going away anytime soon but i’m confident that in the next 5 years Flash will be phased out. When I say phased out I don’t mean Flash is going to be dropped from Adobe’s product line, as it’s still very strong as an application platform but it will no longer be needed for user interaction in web design.

Between CSS3, HTML5 & jQuery all needed user interaction can be accomplished. CSS3 can handle smooth transitions for just about everything and once it’s supported in all browsers, CSS3 can produce complex animations (Check this animation Paul Hayes made using CSS Transforms). Though it’s far from perfect right now, HTML5 will allow Drag & Drop functionality making it possible to develop interactive web application just using HTML & CSS.

As a generalist, I will continue to play with these technologies until something better comes along but the bottom line is that there are good things over the horizon for the web designer. Long live the generalist!

Stay in the loop with the CSS3 & HTML5 updates here:


CSS3 Denver

http://www.css3.info/




HTML5 Denver
http://www.whatwg.org/

It’s Live: 1st Door Software

I’m excited to announce the launch of 1st Door Software’s new website, it can be found at 1stDoor.com. This was one of the funnest sites I’ve had the pleasure of building, much of the pleasure came from my exploration and convergence of HTML5, CSS3 & jQuery. All of these tools working together made for an easy development process and some clean interactivity. Unfortunately due to some confidentiality issues we weren’t able to launch the site with all of the applications that 1st Door Software had developed, but more will be added soon.

1st Door Software - Homepage - HTML5

1st Door Software - XF Diary - jQuery & CSS3

Letterpress is Magic

John Myers from 1st Door Software approached me in February about redesigning his website and creating a new logo for his business. John develops very high quality applications for iOS so he needs to represent that quality with his first impression, be it the website or a business card. Today, a website has depth and an unlimited canvas to tell a story, but a business card as a medium truly limits designers in many ways. A high quality business card goes a long way when creating an initial impression. Business card production can be done through internet vendors in a very inexpensive way but for 1st Door Software it was important that we created a unique and high quality card that represented their brand and in this case letterpress printing was the best process for the job.

Denver based print shop, Foils & Dies have been letterpress printing for over 20 years and after seeing just a few of the business cards they had printed in the past I knew they were the perfect company for the job. The letterpress typically uses magnesium or copper dies that a inked and smashed on top the paper to create a mild indentation that is a reverse of the die. Letterpress as trade is slowly fading away so I was very excited to have the opportunity to use the process, here are a few shots of the print shop and the final results.

Business Card Design - Denver - 1st Door Software

1st Door Software - Business Cards

Foils & Dies Denver

Letterpress Denver

Love for Field Notes

I’ve grown this affinity for pocket journals that I use almost exclusively for ideas & project related notes. They have been my savor on many occasions allowing me to quickly look back and refresh my mind on things that happened with projects in months prior. One of the best pocket journals i’ve used is by Field Notes, they are simple, durable, they use good quality paper and are constantly coming up with new styles. Just last week they release the Dry Transfer _________ Edition, allowing you to typeset your own book, the idea is simple but the results are awesome.

Looking forward to getting my 3-pack next week!

How To Typeset Your Field Notes:

Field Notes - Dry Transfer Edition

Type Setting Fun with Field Notes

Futura Field Notes