Posts made in January, 2012


I’m a big fan of content over images in a website. That’s not to say that all images or graphic-based content is bad; I just believe much of what a designer wants for a website, and what is actually required to make that happen, are two completely different things. Many years ago, I was a child of the “table-based” design principals championed by slicing-capable programs like Fireworks and (unfortunately) GoLive. Graphic-based “table websites” load slowly, have the sliced-up feel to them, and frankly just look ugly. It’s taken a long time to break myself of the bad habits perpetuated by programs like these, and to see that I could build sites from a rendering using only a fraction of the images I would have used to. Over time, I will add more and more of the techniques I’ve learned to this, and today I want to focus on one of the most important: gradients. Gradients are everywhere, in every design you’ve probably ever seen. Because of these, it is sometimes harder to not use images, but not impossible. Recent advances in browsers capabilities have allowed for CSS gradients to become prominent features in a site’s design. Of course, not everybody has upgraded to state-of-the-art browsers, so we will have to use a variation of “Fallback Declarations” again in order to tastefully degrade your site to the capabilities of older browsers. Here’s the code: Markup: CSS: #gradient_box { /* Simple visual properties */ height: 100px; width: 100px; border: solid 2px black; /* Gradient code */ background: #FF0000; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); background: -webkit-linear-gradient(top, #FF0000, #00FF00); background: -moz-linear-gradient(top, #FF0000, #00FF00); background: -o-linear-gradient(top, #FF0000, #00FF00); } Here’s an example of how it will look. The code here is simple. First, you set the background color, establishing a base-level color for the element. After that, you add the IE-specific declaration filter. For this tutorial, I chose the “gradient” filter, but a full list of the different available filters for IE can be found here. Then, you add the vendor-specific prefixes (webkit, mozilla, and opera) and you’re done. Very simple! One quick note, while these features are not fully supported (waiting on you IE), you can add more colors to your gradient by adding more color codes to the end of the list. linear-gradient(top, #FF0000, #00FF00) becomes linear-gradient(top, #FF0000, #00FF00, #0000FF) and so on. You can also use transparency by using rgba values, assuming your browser is in the 21st century, of...

Read More

Definitely one of the higher-obtainables in my field, the loftiest of lofty goals, is the ability to embed fonts on a website. As it stands now, there are only about 15 different fonts (and their respective variations) available to every user on every computer. Even a first-year designer can tell you that will get pretty boring pretty fast. Enter @font-face. A CSS specification that came about in 1998 (with the rest of CSS2), this specific declaration allows you to specify any font you can name to be used in your website. Unfortunately, this isn’t a perfect world, and just simply saying you want to use a font, doesn’t at all mean that the font will actually show up when the user visits your site. Any time a font is called in a website, the browser will check for it in the user’s computer and, if they do not have it, the browser will change your fonts to something the computer does have. Whatever it changes to, you can pretty much guarantee that you won’t like it. So, how do we get our fonts down to their computers? Very simple: we embed them. An embedded font is a file (or files) placed on the websever with the site. When the CSS code calls for a font, the browser runs like normal, checking the user’s computer for the font. But, when it doesn’t find it, instead of defaulting to some lesser font, the browser now has another place to look: your embedded file. The browser proceeds to download and cache the font file, and you now have beautiful, custom fonts attached to any element on the site you want. Of course, no browser really is alike in how they handle these embedded files, so you have to make multiple different types of embedded fonts to cover the different possibilities. There are at least 18 different types of embedded fonts. They include .woff (Mozilla), .dfont (Mac OSX), .suit (Mac Classic), .eot (IE), .otf (also IE), .svg (iOS, new HTML5 standard), and .ttf (Windows). Most people will not have anything besides a TrueType (.ttf) or an OpenType (.otf) font file, so you will have to convert what you have into what you need. There are many different methods, online and off, to do this. After many trials and some errors, I’ve found the best to be the online convertor at the aptly-titled http://onlinefontconverter.com/. I’d like to credit the post at Paul Irish’s blog and the great guys over at Six Revisions for helping me learn about this subject. @font-face { font-family: 'Sketchy'; src: url('fonts/sketchy-webfont.eot'); src: local('☺'), url('fonts/sketchy-webfont.woff') format('woff'), url('fonts/sketchy-webfont.ttf') format('truetype'), url('fonts/sketchy-webfont.svg#Sketchy') format('svg'); font-weight:...

Read More

Past is Prologue


Posted By on Jan 15, 2012

Today is officially six months since I left my job at Global Designs. The time has been marred with ups and downs, from all over the spectrum. Mostly, my time there was a learning experience. Not only did I get real-world experience, but I grew into the man I am now and really became an adult during my time there. Not many people would freely admit this, but I quit my job. Up and left. Came in one day and told them I wasn’t coming back. But, I personally don’t find this to be a problem, because it was either them or me. Let’s start at the beginning… Five years ago this May, I graduated from college. That’s not nearly as big a deal for me as it was for people of my parents’ generation, but it was still the biggest accomplishment of my life up to that point. My eyes were wide with hope and excitement. I got to step out (somewhat sure-footed) into the world and make my way. I found a nice job in my field before I left college so, I got to put time in while going to school. And when I graduated, the sky was the limit. Eventually, I rose to the position of Project Manager. Pretty-much second in line at this company, I thought I had it made. I could work directly with my boss (the owner) to make the company run smoother and more efficient and, with my newly found spare time, I could brainstorm the ideas that would take the company to the next level. Then, the event that ruined the collective hopes and dreams of America–the Great Recession–hit. Like many people in my line of work, I counted myself lucky to still have a job, and was willing to sacrifice a lot to keep it. So, when the first of our 3 designers was fired, I kept it cool. I thought, “this will blow over soon and I’ll only have to do the extra work of this missing person for a little while.” That little while expanded into six months, and when the only other designer (besides me) quit, I became worried. I later learned the stress drove them to the breaking point. It wasn’t until two weeks after, when it was apparent that the company wasn’t hiring a new designer, that I knew for sure that I was in trouble. So many people lost their jobs, that news of their losses outweighed the other story: the story of the people left behind. “The New Normal,” as I called it. So many people had been fired or laid off...

Read More