Thursday, August 16, 2012

Ghostly International presents Matthew Shlian from Ghostly International on Vimeo.

Making of folding paper an art. Very inspiring.

(Source: tumblr.com)

Monday, June 11, 2012 Sunday, January 15, 2012

This video illustrates the creation process of a Groceries Shopping List Icon Set I designed yesterday.

I got this idea from a Timed Lapsed Screen Shots video of the design of a homepage I saw recently and thought it was a pretty neat way of recording what goes into the design process. So I searched about it and found a post that gives directions in how to take the screen shots using terminal and put together this video using iMovie. 

Nice when wanting to look back at your work. :)

Wednesday, December 21, 2011

Media query to target ipad vertical layout

Trying to control a particular layout when orienting the iPad vertically was driving me insane… until I found this sweet query to tackle it:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
// Styles
// Styles End
}

I had tried different cominations, but what really made it was the “orientation: portrait”. Same thing works for the landscape orientation. The only difference is that the “orientation” should be set to “landscape”.
While ideally the layout should just fall into to place without having to specify rules for one or another orientation, there are sometimes instances (particularly when dealing with multiple columns) that being able to target a specific orientation is crucial. 
So always thing twice (I mean 3 times!!) any specific styles you want to place in this query. I can tell you that it will hit you back when making changes to the design. On the other hand if handled carefully you can get a lot from them.
The credit for this query and many more is to Stuff and Nonsense who posted them on the Hardboiled CSS3 Media Queries article.
Saturday, September 24, 2011

Home Screen Icon for Iphone and Ipad

I found a sweet piece of code that enables you to create a an icon for your website that can be used when adding it to your home screen on the iPhone or iPad. 

<link href=”path/to/your/icon.png” rel=”apple-touch-icon” />

Without this piece of code the device will take a screen shot of your web page and create an icon of it. You can imagine how that looks on an icon.

To get nice and sharp icons, create them at 154x154 - 72dpi.

More about tips on web apps development for the iPhone here: 10 Tips for New iPhone Developers.

Before start using CSS3 Media Queries make sure mobile devices are not resizing your sceen

I got stated optimizing for mobile devices a web app I’m working on using CSS3 Media Queries, and while I was able to change the layout, color and so forth, it was driving me crazy the fact that the devices where resizing the browser screen to the standard desktop size, making the layout seem tiny.

Then I found out the missing piece:

Mobile devices assume your website is optimized for desktop computer unless you tell them otherwise.

10 Tips for Designing Mobile Websites | By Keen Street

To avoid this is necessary to use a meta tag on the header section of the HTML page to set the with of your webpage to the with of the device display:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes” />

More about this and nother “must-know” things when designing mobile devices here: 10 Tips for Designing Mobile Websites. Thanks Keen!


Sunday, July 17, 2011 Monday, November 22, 2010

The forgotten a:visited property

At least forgotten by me, the a:visited property is a quick and neat way of making your designs more usable and to even “sensitive” to the touch. 

Read More

Sunday, November 7, 2010

Home Inventory App

Looking for an easy to use app to do my home’s inventory I found one that seems to do the job pretty well. This app is What You Own Home Inventory 4.13 for Mac. Also available for the pc, this app offers a nice interface to quickly add items on your inventory, and attached to them detailed information (such as the purchase price, replacement cost, make, model, brand, etc.) but also images, and receipts and other docs. Pretty slick!

Read More

Tuesday, May 11, 2010
Didn’t think a CSS grid system could be so useful until I stared working with 960 grid. So far it looks very promising :) http://960.gs/