Design Process of ShopDock 60

Design Process of ShopDock

Today I would like to share the design process of an ecommerce theme that I recently designed. Shopdock is an Ajax ecommerce theme where the user can quickly add/remove items to the cart with a single click. It is actually inspired by one of my sites, IconDock. The design process was quite challenging to make an Ajax shopping cart with a responsive design. I will explain why certain design directions are taken to handle the design challanges for both desktop and mobile.

Montreal Meets Ticket Giveaways 46

Montreal Meets Ticket Giveaways

A friend of mine, Francois Hoang, is organizing a design conference called Montreal Meets in Montreal, Canada Apr 7, 8, 2012. The speakers included Fabio Sasso, Shelby White, Radim Malinic, James White, and Scott Hansen. I have two tickets to giveaway. Comment in this post before March 23rd, 2012 for your chance to win one. If you are interested in purchasing tickets, I also have a 20% discount code for you: webdesignerwall.

CSS Social Buttons 114

CSS Social Buttons

I'm proud to announce my latest CSS experiment—The CSS Social Buttons. They are not another "pure CSS3" or "HTML5 canvas" icons. These icons use the basic traditional background-image technique. The purpose of these icons is to provide a cross-browser, consistent and versatile CSS that can be applied in any design, app or theme. Basically, it is one master stylesheet that contains various design styles. It allows you to display many different button styles by combining the CSS classes.

View Demo CSS Buttons

Download Demo ZIP

Giveaways: 2012 FITC Tickets 13

Giveaways: 2012 FITC Tickets

I've got two FITC Toronto 2012 festival tickets to giveaway and all you need to do is send one tweet for your chance to win. For those of you who don't know what FITC Toronto is, it's a design and technology focussed conference which is comprised of three days of learning, networking and partying, April 23-25. I will be attending the event as usual. This year's event has features over 70 renowned digital creators from around the globe, covering everything from HTML5 to making digital art.

CSS3 Image Styles – Part 2 98

CSS3 Image Styles – Part 2

Previously I wrote two tutorials on how to style the image element with CSS3 inset box-shadow and border-radius. The trick is to wrap the image with a span tag and apply the image as background-image. However, I recently ran into a problem with that trick while designing the PhotoTouch theme. The issue is that the background-image is not resizable and thus it is not a good idea to use in responsive design. Fortunately, I found a workaround to resolve this. So today I'm going to revisit this topic again.

View Demo Image Styles

Responsive Design in 3 Steps 208

Responsive Design in 3 Steps

Responsive web design is no doubt a big thing now. If you still not familiar with responsive design, check out the list of responsive sites that I recently posted. To newbies, responsive design might sound a bit complicated, but it is actually simpler than you think. To help you quickly get started with responsive design, I've put together a quick tutorial. I promise you can learn about the basic logic of responsive design and media queries in 3 steps (assuming you have the basic CSS knowledge).