Cardeo Design Blog, Code, Design, WordPress, Minimal, CSS, Freebies, Twitter, Facebook, Social Media

Photoshop To HTML

Are you familar with rockablepress.com? They’re a book company, from the good people at envato.com, specializing in Web Design books. They just released their latest book titled Photoshop to HTML, which is a guide to taking your website designs from Photoshop to HTML.
Continue Reading »

Optimizing your images for Google and SEO

Image optimization for SEO is something that often gets overlooked in website optimization. There are a number of simple techniques you can apply to your images to make them easier for Google and other search engines to find. Therefore, improving the overall optimization of your website for search.
Continue Reading »

Coding an animated news ticker with jquery and CSS

Alright, about time that I’m back with a new post! For this tutorial, I’m going to breakdown creating an animated news ticker using a little jquery and CSS. The tutorial is based on a jquery plugin developed by textotela.co.uk, and I recently built it into the homepage of recork.org. If you head over to textotela.co.uk, you’ll notice there are some instructions on installing this plugin. The problem is (being a beginner at jquery), I had a hard time filling in all the blanks that are not described on his website. Therefore, I thought I would break it down for beginners to make it easier to understand and install.
Continue Reading »

O’Reilly books now available in the Apple App Store

I was surfing around the App Store the other day, and to my delight I noticed that O’Reilly is now offering a number of their titles as iPhone/iPod Apps! I’ve been a fan of their books for a little while now (currently I’m reading Twitter API Up and Running), so I was happy to see they had made the jump to the App Store.
Continue Reading »

The web design process: part 2

Time for part 2 of 4 in the web design process series. Today I’m going to cover Photoshop comps, reviewing your goals, and coded comps. Check out the overview below to see all the main steps in the design process.

Make sure you check out part 1 in the web design process series.

Overview

» Defining the end goal
» Navigation planning and sitemap
» Hand-drawn rough layout
» Photoshop comps
» Review comps to ensure the end goal has been met
» Coded comps (alpha)
» Dynamic content integration
» Browser testing
» Launch checklist
» Soft launch (beta)
» Launch and promotion
Continue Reading »

Creating A Mouse-Down Link State With CSS

Creating a mouse-down link with CSS is actually quite simple. We going to use a technique that uses the “a:active” link selector. In your CSS simply add “a:active” to your style sheet and assign it some attributes, as shown below: Continue Reading »

Code Ready Filler Text with html-ipsum.com

For the longest time I always used lipsum.com for when I need to generate lorem ipsum filler text for my web projects. Recently, I came across html-ipsum.com, which is a step up from from lipsum.com.
Continue Reading »

Writing Better HTML

There’s a great post over at smashingmagazine.com recommending 12 Principles for Keeping Your Code Clean. It brings up stuff like using the Strict DOCTYPE, encoding special characters, proper indentation, and more.

One note on indentation. I used to tab out my code in the past. It’s quick and makes it easier to read. However, if you are a designer that is coding the same website on a MAC and PC (this happens occasionally for me), use spaces to tab out your code, not tabs. Notepad will not recognize the tabs and it will display your code in one big line for the entire page! Talk about annoying. It will recognize the spaces though – so space it out to be safe. It’s a little harder to read but it will save you a headache down the road.

ASCII Character Codes Cheat Sheet

Ever wonder how people make some of the special type characters you see online like: ™ ® » © Ü ? It’s really quite easy…
Continue Reading »

Taco Html – Html Editor for Mac OSX

A couple of years back I came across Taco Html. Besides from being the best icon in my doc, it is a great HTML text editor. Even better, it is a free download!
Continue Reading »