Making of folding paper an art. Very inspiring.
(Source: tumblr.com)
Fireworks is the way to go!!!
When it comes to creating High Def mockups Fireworks surpasses Photoshop. While I love photoshop for working with bitmaps, FW streamlines the design process and allows for quicker layouts, more precise creation and manipulation of vectors, and advanced organization (using pages, frames, symbols, etc.).
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. :)
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
}
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!
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.
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!
