Web Designer Wall

A wall of design ideas, web trends, and tutorials

@font-face Solutions & Suggestions 9

General StuffsCSS

spacer

In the last post I talked about the design aspect of using CSS3 @font-face, today I would like to extend this topic to the technical side on implementing custom web fonts. So what are the options for implementing web fonts? I'm going to review the three main methods of incorporating @font-face and explain the pros and cons of each method.

Share → Tweet

CSS3 @font-face Design Guide 53

TutorialsCSS, design, Javascript

spacer

Although CSS3 @font-face is supported by most major browsers (IE, Firefox, Chrome, and Safari), but not all. When it doesn't, your custom fonts might break the layout or come out with undesired results. In this article, I will explain the common issues with using custom fonts, picking the matching fallback web safe fonts, and how to create a perfect fallback font style with Modernizr.

Share → Tweet

Illustration Prints Available for Sale 29

General Stuffsupdates

spacer

Four of my illustrations (Koi, Peacock, Abstract Pheonix, and Japan 11-03-11) are now available at Society6 for sale as print media. They are available as: sketched canvases, posters, T-shirts, hoodies, laptop and iPhone cases. Society6 offers high quality printing on fine material. Or if you are looking for inspiration, check out the website for awesome art works done by artists around the world.

Share → Tweet

Make Your HTML Email 5½ Times More Mobile Friendly 67

General StuffsGuest Posts

spacer

Let's face it, ask most designers what their dream project would be and I bet none would mention designing and coding HTML Email. Designing email has a special place in my heart and I am excited to communicate with people through this challenging medium. So here's improvements you might consider making when you revamp or greenfield your next template.

Note: This article is a guest post by Josh Rubinstein.

Share → Tweet

Interview With Max Luzuriaga 44

General Stuffstalented people

spacer

I met Max Luzuriaga at FOWD conference where I spoke in 2010 (New York City). Max first impressed me with his portfolio site which is coded with HTML5 markup, Modernizr, and CSS3 media queries (but according to Max, his site is already "a little out of date"). At age of 15, Max is learning and doing various design and development works (web, icons, Javascript, PHP, iOS, Ruby on Rails, etc.). Max not only impressed me with his skills, but his passion reminds me that I have to keep upgrading myself and learning new things. I hope this interview can motivate more young talents to step into the industry.

Share → Tweet

Using iPhone GPS Map Without a Data Plan or WIFI Connection 51

General Stuffs

spacer

Today I would like to share something that is slightly off topic — how to use iPhone GPS map on the road without a data or WIFI connection. To be more specific, I mean how to use the iPhone Google Map as a GPS (without a network connection on the road) by pre-caching the map. This trick is very useful if you don't have a data plan or want to avoid the data roaming charges when you are travelling.

Share → Tweet

CSS: Elastic Videos 68

TutorialsCSS

spacer

While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-% and auto trick works with native HTML5 video tag, but it doesn't work with embed code using br or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve this. If you are creating a responsive design, this simple CSS trick will come in handy. View the final demo and resize your browser window to see it in action.

View Demo Elastic Videos

Share → Tweet
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.