Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I'm going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They are simple CSS properties such as min-width, max-width, overflow, and relative value — but these properties play an important part in responsive design.
If you follow Web Designer Wall, then you have noticed the PSD2HTML banner ad on the sidebar. PSD2HTML is not only my long time supporter, but they are also one of the most recognized vendors in PSD slicing services. Today I'm happy to partner with PSD2HTML to give away PSD to HTML slicing services to you. We are giving away 5 prizes (worth $200 each). To win one of the prizes, leave a comment to this post. The giveaway ends on May 31, 2012.
Update: the contest is closed and the winners are: David, André, Andrew, Donna, and John.
Although WordPress has made it very easy to create a custom WordPress theme, but it still takes time to learn and build it. So I've created a Base theme based on the free Basic theme from Themify. I've stripped out the framework and the extra functions that you might not need. It includes only the basic styling, responsive design, custom menus, and widgetized sidebar. This Base theme is intended to let you build your custom themes using it as a foundation. The main goal is to save your time and simplify the work flow. It is great for non-coders and quick client works.
One of the common challenges when designing responsive design for mobile is the navigation menu. If the site has many sections or pages, it gets challenging to squeeze all the items into a small mobile resolution. The navigation most likely ends up running into multiple lines or the buttons stacking on top each other. So I'm going to review some of the design solution and provide a quick tutorial on how to create a mobile navigation with jQuery.
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.