witola.com

I was reading my daily round up of design and tutorial blogs today and came across this great article on web typography. With so many fonts out there to use, why use the same "safe" ones all the time in your design? There are countless others that come standard on both the PC and the Mac.

Here is a run down from author Amrinder Sandhu from his article Revised Font Stack. The font stacks and stats for both serif and sans serif are after the more jump.

Revised Font Stacks

* Some of the fonts, like: Garamond, Baskerville and Didot are not as readable on screen as Georgia. Feel free to make your own selection.
* Due to smaller x-height; Caslon, Didot, Garamond, Baskerville and Hoefler Text should be set at minimum of 14 pixels or above.
* Lucida Grande, Futura and Tahoma are mechanically obliqued to fake an italic.
* Geneva, Baskerville Old Face and Big Caslon has no bold and italic. They are faked to bold and italic.
* Avoid using Helvetica or Helvetica Neue for body text, especially below 14px.
* Futura, Gill Sans and Franklin Gothic Medium should be carefully stacked and used because of their unusual weight.

Continue reading

Tweener who you say? Well I gotta tell ya after getting this new job I am doing more Flash work than ever before! I do remember quite clearly letting them know I am not in any way a Flash programmer, and their response was, "Don't worry, we'll show you."

Well a 15 minute quick review shadowing a fellow designer at the corporate office while there for 2 weeks, was simply not enough for me. I am left to my own smarts and a FLA file he made on the fly to help me with the code. It's just how to get started that has had me in a quandary.

In short, instead of using the timeline and Flash's built in Tween class, Tweener is another class onto itself. It makes things so easy and if you want something to move across the screen, rotate while doing that and stop at a specific spot and then ease back like on an elastic band, Tweener is your new friend. You tell it what, when and where and it does it for you - without you having to know Action Script language and other back end Flash code. Simplistic and a God send.

All documentation, files etc. can be found by clicking on the above Tweener image! These are the guys who created this wonderful script: Zeh Fernando (Project Owner), Nate Chatellier (Project Member), and Arthur Debert (Project Member). I found the initial documentation a little vague and just needed a in-my-face tutorial to get me to visualize the way to initiate it. Here are two sites I found to help me with this:

Have fun, pass it on and be well. I need to get back to work!

Sitting at the desk of a new co-worker today I noticed on her wall was a cheat sheet for some HTML code. Nothing big I thought until my eyes gravitated to the bottom of the sheet: Made by www.ilovejackdaniels.com Hmmmm intriguing indeed I thought!
I looked up the site and was greeted by this message: The site formerly hosted at ILoveJackDaniels.com has, at the request of the Jack Daniel's trademark team, been moved to the new domain AddedBytes.com. Please update your links, bookmarks, address books and mental notes. Please direct any questions, comments or problems to dave@addedbytes.com.

and re-directed to AddedBytes.com where I found all sorts of useful cheat sheets for coding HTML, PHP, CSS and the like. Enjoy fellow web designers and developers!

AddedBytes.com is the online playground of Dave Child (dave@addedbytes.com), a web developer and internet marketer from Brighton, on the south coast of the UK. Read More about Dave and Added Bytes. Thanks Dave!

A very exciting press release at my new job today!

H.I.G. Ventures, LLC today announced that one of its affiliates has completed a significant growth capital investment in Triad Digital Media, LLC, a Tampa, FL-based online advertising services company.

Founded in 2004, Triad Digital Media is the market leader in creating, managing and operating online media programs for leading retailer and e-commerce websites. Triad partners with large e-commerce websites such as Walmart.com, CVS.com, Dell.com and SamsClub.com and others to help them monetize their online traffic via targeted advertising placements and content. Triad creates, hosts and manages focused sections of each partner’s websites and uses contextual and behavioral targeting to bring a highly relevant demographic to advertisers. Triad’s approach, which in addition to custom content includes banner ads and sponsorship programs, reaches customers who are in a highly sought after ‘shopping’ mindset. This offering provides great value to advertisers and is unique in the digital media advertising market today.
Continue reading

I miss having the time to read my daily blogs like I used to, but came across this great series from one of my favorites: Chris Coyier, whose one site CSS-Tricks has helped me immensely.

In the series he takes you from the design process of making a webpage layout, to the slicing and coding process - where CSS makes the design come to life. Next he takes you through the process of integrating that code into a CMS (content management system) like WordPress. This way everything (posts, feeds, updates) are dynamic and site wide. I hope you subscribe to his RSS feed, check out his other blogs and enjoy the series.

I commented that I hoped there was a 4th in the series to show us the process in prepping and encoding the photo gallery, contact form, shopping cart and Twitter feed. We'll all have to check back in to see!

Part 1 starts from absolute scratch in Photoshop, with just a few provided resources from the client. We design the homepage and skin for the site.

Part 2 shows how to slice up the design from Photoshop into XHTML/CSS.

Part 3 shows how to convert it into a WordPress template.

A few weeks ago a designer and blogger I have been following, as well as very active Twitterer,  Graham Smith of imjustcreative,  announced a series of logo round ups he was posting. I figured I'd take a look and found these words:

This is Part 10 of the Logo Design Round-Up series. This ongoing series showcases a collection of logos and brand marks, self submitted by a bunch of freelance designers and creative folk in many creative areas. These designers use the logos to sell, promote, brand and market their various skills. If you want to be part of this logo design series, then details can be found at the bottom of this post.

Well I was excited and got to work following the specs to submit and write a quick synopsis on the the logo treatment for my personal business Anubis Creative. Hey, free advertising and a link from a well known blog site, who wouldn't, right?

After a long day at work I decided to check some email, read a few of my favorite blogs and Retweet some valuable info to the design community and... Well to my amazement Graham posted an announcement about the latest submissions! Anubis Creative was on the Part 11 blog post in living color. Excited I texted a friend and just hope people make some nice comments. Maybe even a new project would be great, the visibility is wonderful and much appreciated - hence the posting here talking him up!

Remembering though that as Graham puts it: "This is not a competition, it’s not a best of, it’s not a who has the best logo, it’s not a collection of logos that I have chosen. They are logos supplied by those that wanted to be part of this post. And a huge thank you to everyone who has submitted."

The following is an article I read on a blog regarding front-end developers and coding practices and thought I would pass it on. It is by Doug Neiner, an Editor at Fuel Your Coding and is president of Pixel Graphic Design Studio. He is addicted to new technology, and specifically loves spending time with WordPress, Ruby on Rails and jQuery.

What follows here is a series of 10 things to remember and practice on each web development project. I have listed them here in order of importance as many of the steps build on each other. If you take nothing else away from the reading, please take Rules #1 and #2 to heart and practice them. I think solving those two problems will lead to better design and better implementation in websites across the Internet.

1. Charge Enough, and Then Some

Especially in hard economic times, business and individuals alike are trying to cut costs and keep projects down to a minimum. Due to this knowledge, we as web developers try to move through each phase as quickly as possible. Front end development, however, take a substantial amount of time if done properly. Not adequately charging for that time leads us as developers to skip over things we know are important just to keep the project within the budget. The rule is simple… you normally won’t take the time to do it right if you don’t have the time to take. The only way to get more “time” as a developer, is to guarantee the time we DO spend is properly compensated. At that point alone can our hearts and minds be fully plugged into our projects… and only then can we take the time to follow the remaining 9 rules.

2. Educate The Designer

For those who are a designer/developer all-in-one machine, this one should be easy. However, coders who work with or for a designer have a unique responsibility. As many designers come from a print background, it is up to you, the developer, to educate them on the possibilities available to their designs. No… I didn’t say let them know about the 150+ jQuery plugins you use, or your thoughts on using a UL/LI combo vs a series of A tags. I said educate them to the possibilities. Help them understand how their design might display on different devices. Help them understand how to leverage repeating backgrounds and tiled patterns to achieve great designs with minimum file size.

Don’t leave the creativity solely to the designer either! This is your chance to prove you are creative as well by finding the perfect technology solutions to meet the needs of the designer. Telling them “it just isn’t done that way” for every request is a sure-fire way to cause frustrations on both sides. Put your mind to work finding ways around hurdles.

Note: Rules 3 through 10 build off these first two rules. Some of the following rules require additional graphics from the designer, and all the rules take time to follow. Make a commitment to rules 1 and 2, and the remaining rules will both make sense and make your finished product that much better.

3. Think in Layers, Not in Slices

Even today, we still use the phrase “cut up the design” to describe the process of moving a design from Illustrator or Photoshop into the finished HTML/CSS layout. While this is still largely accurate, its name belies the former concept of slicing a design into pieces and reassembling it (usually in a table) back on the HTML page.

That was the old web. The new web uses the concept of layering, stacking, and z-index to achieve designs with depth. As a coder, be sure to get layered PSD files or layered AI files from the designer vs. a flat design. This will allow you to have much more flexibility in how you put together a web site. Remember, when working in layers, consider the HTML elements that are essential to the structure before resorting to adding additional divs and spans. You can use a repeating vertical pattern on the html element, and a repeating horizontal background on the body element without bringing the dreaded div#wrapper in to solve your background woes.

Continue reading

OK, here is an example of how I find things...

1. First I heard a bleep on my TweetDeck and saw a tweet from my favorite blogger Chris Coyier from CSS Tricks.
He mentioned he just posted a screencast on how to re-create a CSS trick on this other site.
2. I watched the video, thought it was cool, and scrolled to the end of the post to see others posts/comments.
3. Then I scrolled past one where he commented back to someone and nosy me wanted to know what was up.
4. I read both and came across this

Jack Franklin says:

Great stuff Chris.

I noticed you have the HTML Ipsum icon in your menu bar, where can I get that program from, I’ve been searching for ages and I can’t find it

Thanks,

Jack

Chris Coyier says:

Use fluid.app and make a menu bar app from this URL http://html-ipsum.com/fluid/

5. So I Googled the app and... check this out and review the first 1 minute video on the sidebar. Very cool...

http://fluidapp.com/

6. The html ipsum app he was talking about is cool as well

This is how I find these things out, one thing always leads to another...

I recently went through a 16 part tutorial on ThemeForest.com and I was enlightened on the process of taking your Photoshop design and integrating it into WordPress. There are endless themes you can choose from to customize your own blog, but for a designer or someone who already has a site branded, it is important to be consistent and merge the two.

It is still continuing, but we are all waiting for author Drew Douglas to hurry up, I can't wait to finish this already!

Anyways, in reading my daily blogroll of incredible writers and informative designers, I came across this list from the site http://www.noupe.com. Many thanks for author Cameron Chapman. Cameron Chapman is a writer, blogger, copyeditor, and social media addict. She’s been designing for more than six years and writing her whole life. If you’d like to connect with her, you can follow her on Twitter or at her Personal Website.

WordPress

WordPress is a free blogging platform that can be modified to be used as a CMS.

So you want to create WordPress themes huh?

This is one of the most complete WP theme-building tutorials out there. It consists of 25 separate lessons and covers how the WP templating system works, The Loop, post meta data, search forms, calendars, comment templates and pretty much everything else about themes in WP. If you want to build a theme completely from scratch, this is the tutorial to show you how.

How to create a simple WordPress theme

This tutorial gives instructions for creating a basic, simple WP theme that includes the header.php, index.php, sidebar.php and footer.php template files, in addition to the style sheet. It’s very simple and straight-forward, but a great place to start if you’re new to building WP themes. The basic steps can easily be adapted to building more complex themes.

How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

Here’s another very complete tutorial, offering up 11 lessons on how to create a WP theme. It focuses on creating a theme with good SEO, valid and logical semantic markup, separated trackbacks and comments, two widget areas, and all the basics you’d expect from a WP theme. The lessons are ordered logically and include theme development tools and information about the WP template and directory structure.

How to convert any web template into a WordPress theme

Sometimes you don’t want to design a theme from scratch. Maybe you’ve found the perfect theme (or designed one), but it’s just a regular web template, not a WP theme. This tutorial will show you how to convert that web template into a WP theme without too much trouble. It also includes a link to a video tutorial showing how one template was converted.

How to Create a WordPress Theme from Scratch

This tutorial shows how to take a basic HTML/CSS template and convert it to a WP theme. It’s incredibly complete, covering every aspect of WP theming. It also explains how themes are structured and how to create the core theme files.