Responsive design all started with this article by Ethan Marcotte. Some people see it as a trend. But it is more than just a trend. It is a new design solution — it helps to resolve the design problems associated with the different resolutions and devices (desktop, laptop, tablet, and mobile). I'm going to share a list of responsive sites that I feel are nicely done. I've categorized the list into two categories: Adaptive and Fluid & Responsive.
FITC is hosting a conference called Screens 2011 dedicated to mobile development. The event takes place in Toronto between Nov 14-15th, 2011. It is a 2 full day of presentations covering iOS, Android, HTML5 (jQuery Mobile, HP/WebOS, AIR, FLEX, Windows Phone) as well as marketing and business of apps. I have two conference tickets to give away. For your chance to win a free ticket, post a comment in this post before Oct 24, 2011. If you are interested in getting the tickets, use the following coupon code to save 15%: mobile2010.
When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I'm going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles.
I am delighted to work alongside MOO in offering a 20 postcard giveaway for 10 readers. The winners can upload their own design to redeem the postcards (shipping is included). Also, one lucky winner will win $50 in print credit to use at MOO. If you've not come across MOO before, they just love to print - whether it's business cards, postcards, labels, stickers, MiniCards, greeting cards and much more!
Those who create responsive design for iPhone may be aware of the viewport scaling bug in iPhone Safari. The bug occurs when you set the viewport width to device-width and rotate the phone to landscape view. To see this in action, view the bug demo page with your iPhone and rotate the phone from portrait to landscape view (you should see the page being scaled up). This is a known bug for a long time. Today I'm going to share some tips on how to fix this bug.
Finding inspiration has always been part of my work and life. I created Best Web Gallery back in 2006 as my personal bookmark tool where I featured the best design on the web. I've featured more than 1700+ sites in the past years. Today I'm happy to announce the redesign. The new design gives the site a huge facelift and more functional.
I haven't written any Photoshop tutorials for a while. Today I'm going to share a simple tutorial on how to create reusable background patterns with Photoshop and CSS. I learned this trick from designing WordPress themes. The trick is to create one reusable transparent PNG background and use CSS background-color property to create various color skins. It is particularly useful for creating customizable and dynamic templates (see demos).