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.
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.
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.
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.
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.
This Friday giveaway is sponsored by UPrinting, a shop that provides a wide range of online printing services. We are giving away 3 sets of 250 die-cut UPrinting business card printing to 3 winners. Each winner will receive a set of 250 business card printing with free shipping. To enter this contest, all you have to do is write a comment in this post. Contest ends Dec 29, 2011.
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).