CSS3: border-radius property

Since announced in 2005 the CSS3 border-radius property has come a long way to be supported in many browsers. It's what every web developer and designer have dreamed of - no more using images or multiple div tags to create rounded corners!

This is probably one of the most-used CSS3 properties and it's so easy to implement. Learning  the border-radius property is a breeze. Let's get started with some example code.

Simple Rounded Corners

The code:

.box {
background: #f9f9e0;
padding: 10px;
border: 1px solid #cfcf99;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

The -moz- prefix is for Firefox. The -webkit- prefix is for Safari and Chrome.

The outcome:

This box should have rounded corners for Firefox.

How The border-radius Property Works

First, let's go over the syntax. I used the shorthand property so all corners have the same value. The original properties are:

border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius

The border-radius properties can each accept either one or two values, expressed as a length (px) or a percentage (%) - percentages refer to the corresponding dimensions of the border box.

The border-radius Syntax:

border-radius: [ px | % ] [ px | % ]

The code:

.box {
-moz-border-radius: 10% 10px 10% 10px;
-webkit-border-radius: 10% 10px 10% 10px;
border-radius: 10% 10px 10% 10px;
}

The outcome:

This box should have rounded corners for Firefox.

The Mozilla implementation also behaves slightly differently from the specification when percentages are supplied. You can read more on the Mozilla Developer Center.

If all four values are supplied, these represent the top-left, top-right, bottom-right and bottom-left radii respectively. If bottom-left is omitted it is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is supplied it is used to set all four radii equally.


For more information on the border-radius property visit W3C on CSS Backgrounds and Borders.

Learning about Inbound Marketing

About two weeks ago, I registered for a webinar from Hubspot.com on Marketing in a Recession. Today I finished watching it. (The holidays are keeping me busy.) Yesterday, they had the follow-up video called, How to Combine SEO, Blogging, and Social Media for Results. I'm looking forward to watching that one. But for right now, I'd like to share what I learned about inbound marketing...

I liked the comparisons they made with the Budget vs. Brains. It was very easy to understand. With a budget, you're mostly thinking about the money; how much will get you so far. When you use your brains, you can become more creative with marketing and get more out of it; leads. So, how can you use your brains to do marketing with no money?! Simple, here's a list to start off with:

• TechCrunch
• RSS
• YouTube
• Technorati
• Facebook
• Twitter
• LinkedIn
• Del.icio.us
• slideshare
• itunes
• ebooks
• digg
• flickr
• viddler
• photobucket
• blip.tv
• upcoming.org
• revver
• yelp
• google groups
• podcast.net
• squidoo
• stumbleupon
• reddit
• mixx

Did I leave anything out? :)

And most importantly, when you publish content to these sites listed above, make sure it's QUALITY CONTENT. Give the people something interesting to read, help them out with a problem, and they're (hopefully) buy your product.

I've been doing SEO research all month on how cheaply I can advertise a new site I'm working on. It looks like now I have a lot of work to do!

Also, here's a parody of a music video for inbound marketing to help with motivation: http://blog.hubspot.com/blog/tabid/6307/bid/4437/You-Oughta-Know-Inbound-Marketing.aspx

Thanks to Hubspot.com for an awesome webinar. I can't wait to get time to watch the latest one.

A Few SEO Resources I Use

Search Engine Optimization is a big topic in the web design industry. There are so many SEO tools out on the web, that sometimes it can be overwhelming.

I've put together a small list of some sites for SEO and a book that I use for reference.

First the book, Building Findable Websites: Web Standards, SEO, and beyond by Aarron Walter. This is a good learner's book and a great reference guide. I think the author mentions just about everything a web designer can do to get the most out of search engines. From creating quality content for humans to read (not just for search engines to get a higher position on the results page) to how to make your awesome splash page (which is a big no-no in the SEO community) indexable for search engines. I recommend this book for web designers who are looking for fast information and need a quick fix for any SEO problem.

Now the SEO tools out there on the web. The first one is at http://www.perfect-optimization.com/web-page-analyzer.php. Here is where you insert of keyword or keyword phrase, the url, and you get results that analyze the Title Tag, Meta Tags, Link Texts, HREF Texts, Head Tags, Bold/Strong Tags, Page Size, IMG Alt Tags and Body Content of your website. The tool lets you know of a percentage you should have of your keyword and how well your site scores on the keyword density. It's free and a simple tool to use for keyword analyzing.

The same site also has a Site Link Analyzer at http://www.perfect-optimization.com/site-link-analyzer.php. This tool is also free. It checks for any broken links and how well your site does with indexing. Links include any kind of links as well.

And last but certainly not least, http://www.seomoz.org/. This is probably one of the best online SEO resources today. My favorite article is on Search Engine Ranking Factors. They go deep into detail about almost every word on a website for analyzation. Check it out here, but I warn you, it's a long read (and well worth it): http://www.seomoz.org/article/search-ranking-factors#f3.
Like I said, this is probably the first SEO site I would go to when having major problems. I highly recommend it.

That's all I have for right now on SEO help, just a book and a few bookmarks that I wanted to share.

2009 Southwest Calendar

I decided to publish a calendar of the pictures I took while on vacation in the Southwest earlier this month. Have a look at http://www.lulu.com/content/4520096.

I took it and so should you

A List Apart has their survey up for people who make websites for 2008.

May Vacation 2008

With my husband's parents and I, we traveled to Las Vegas and left out of Los Angeles. We visited Page, Arizona, Bryce Canyon, Lake Powell, Zion National Park, Death Valley and a few other places in between. The highlight of the trip was the Left Fork Trail (The Subway) in Zion National Park. Photos taken by Andre.

What I like about Firefox 3

On June 17 of this year, Mozilla released the launch of Firefox 3. I've been using it for about a week now and I'd like to share what I like about it. (And maybe what I don't like about it, but it's kind of hard not to like Firefox.)

What I like about it:
I'll start with the address bar. A lot of browsers today have the feature that when you type in what you're searching into the address bar (fire, for example), hit enter and you get a page of the search results by your chosen search engine. But what if you type "fire" and you could see the matching search result pages being populated as a list as you type? That's the new feature in Firefox 3.


As described from Edward Lee:

"Firefox will remember the text you typed and the page you selected, so next time when you give a similar input, Firefox will give a higher rank to those pages. It even matches partial inputs, so I can even type just "p" from planet, and Firefox knows to put that above other pages that just happen to also match "p"..."

Here's an overview of what you can do with the new address bar in Firefox 3 (from Firefox 3 Revealed):

• Search your history and bookmarks for any combination of words while you're typing
• Restrict your searches to bookmarks, history or tagged pages only by prep ending your search terms with "*", "^" or "+" respectively.
• Match whole phrases by enclosing words within double quotes
• Provides search results ordered by frequency and recency.

Also, it is rumored that the address bar will replace the search bar in later versions of Firefox :)

Next is the Places feature, which you can organize your History and Bookmarks. I don't have a need for this, nor have tried it out, but it looks like it has a boatload of options. Instead I use Bookmarks in the Google Toolbar.

The Download Manager has been improved in Firefox 3. It now lets you pause downloads to resume later, especially large downloads. And they will stay paused when you close Firefox and restart it back up.

Well here is something I don't like about Firefox 3; that you still have to restart Firefox when you install an add-on (extensions, themes, plugins). According to Firefox 3 Revealed from sitepoint.com,

"This feature was planned but didn't make the cut because it involved core changes that were too invasive."

Oh well. Maybe next time.

Okay. Now for my favorite part: CSS Improvements.
Firefox 3 now supports more CSS2.1 and it seems a lot of bugs have been fixed. Such as support for negative z-index values and inline-block. (IE7 still doesn't support inline-block.)

These are just a few things I wanted to point out with the new Firefox 3. Of course, there are tons of other stuff like, HTML 5, APNG (animated portable network graphic) , Microformats, and SVG (scalable vector graphic) support. Be sure to get a copy of Firefox 3 Revealed from sitepoint.com.

I found a secret stracciatella yogurt

Every time I come back from Germany, I always miss the yogurt and quark. I'm not a big fan of yogurt, but I recently bought a cup of Stonyfield Farm Organic Vanilla Truffle whole milk yogurt. It was on sale and I decided to get that flavor.
So this morning, I opened it and mixed the cream with the truffle at the bottom. Took one taste and it was like stracciatella from Europe. BTW, stracciatella is vanilla with chocolate shavings. You can find more info here.
I plan to buy more of this stuff. I think it was the first time I ever really enjoyed yogurt in the States.

02/10/2011 Edit:
Stonyfield Farm doesn't make the Organic Vanilla Truffle whole milk yogurt anymore. Instead try the Stonyfield Farm Organic Chocolate Underground whole milk yogurt. It's still the closest taste I've found for stracciatella yogurt in the USA.

Featured in Create Magazine for May/June 2008

I totally forgot to write about this!


My design for the El Patio Motel web site was chosen as number 1 in the image battle for web sites. See the full page for more information.
It was featured in the May/June 2008 issue.

My Favorite Post by FreelanceSwitch: 12 Breeds of Client

12 Breeds of Client and How to Work with Them

http://freelanceswitch.com/clients/12-breeds-of-client-and-how-to-work-with-them/

Creating an Outlined, Rounded-Corner Box Using CSS

On a Web project I'm currently working on, I created rounded-corner boxes with outlines. At first I couldn't find any tutorials on this to get an idea of how to start. I played with the idea for a couple of hours and came up with what I have pictured to the left.

This is a fixed-width box, so the height is elastic. I started measuring the width I needed. In this sample the width is 250 pixels. From there I created two images in Photoshop for the top and bottom of the box and saving them as pngs to keep the transparency.

After that, I constructed my HTML. I used a table to contain the box. The table has 3 rows and 1 column like this:

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>

Then I created my styles for the top and bottom of the box and the inside of the box.

.top250x14 { background-image: url(images/250x14Top.png); background-position: top left; background-repeat: no-repeat; width: 250px; height: 14px; }

.bottom250x14 { background-image: url(images/250x14Bottom.png); background-position: top left; background-repeat: no-repeat; width: 250px; height: 14px; }

.boxColors { border-left: 1px solid #cfcf99; border-right: 1px solid #cfcf99; background-color: #fff; }

.sidebarBox { width: 247px; padding: 0; }

The classes top250x14 and bottom250x14 are for the top and bottom images of the box. The class boxColors creates the left and right borders of the box and gives the box a white background color. The sidebarBox class gives the width for the inside of the box with considering the left and right border widths. I'm not sure about the one pixel that is left over from the sidebarBox class. It needed one less pixel in order to align with the top and bottom box images correctly.

Now let's put it all together:

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="top250x14"></td>
</tr>
<tr>
<td>
<div class="boxColors sidebarBox">
<h3>Sample Box</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam pretium turpis sed nisi. Sed condimentum metus eu nibh. Suspendisse vitae tellus sit amet pede placerat malesuada. Ut non libero nec nibh hendrerit pretium. Integer neque. Duis purus risus, scelerisque vitae, dignissim nec, sodales semper, metus.</p>
</div>
</td>
</tr>
<tr>
<td class="bottom250x14"></td>
</tr>
</table>

Download the files used:
outlinedrounded.zip

Comparing Photo-Sharing Sites

I've been researching today on what web site I want to use to share photos. I compared Flickr, Shutterfly, Snapfish and Picasa. Here's what I found:

Flickr - more community-driven

• a Yahoo! company - can use yahoo id to sign up
• can search for photos without logging in or becoming a member
• comes in other languages
• can invite family and friends to view photos
• basic accounts are free
• can organize photos by tagging them or using collections and sets
• can make stuff like cards, photo books, dvds, etc.
• map function - map where you took your photos
• tons of ways to upload photos

Shutterfly - more product-driven

• free unlimited photo storage
• picture sharing
• pick up prints at Target stores
• lots of photo products
• order prints
• Shutterfly Collections - 2 web addresses used to share photos with friends, add comments, and add other photos
• Shutterfly Studio - upload, organize, edit, share, order, and create

Snapfish - product-driven

• owned by HP
• 20 prints free with first upload
• unlimited storage
• photo sharing
• lots of products
• must register or log in to view other pages than homepage

Picasa - community-driven

• owned by Google
• photo sharing
• over 1 GB of storage
• friends can download photos at same resolution to print
• download other friends' albums to keep a copy for yourself to view and add comments

So, I've decided to go with Picasa. It's simple to use. I'm a fan of Google. Plus I don't need to order prints. And if I do, I'll choose Shutterfly, because I've used them before. Flickr is overwhelming to me, there's just too much going on with the web site. I like that it's people-friendly and has a large community, but I don't want that. I really like the fact that with Picasa your friends can download a photo of yours at the same resolution to print or whatever. That won me over.

Billboard Design for Small Businesses

The other day I noticed a billboard off of one of the busiest interstates in Florida. It was for a small business. There was a graphic or icon of the company enlarged as it being the whole billboard itself. I didn't recognize the graphic and looked for the company name. At the very bottom of the billboard was the company's web address, in small print. It was so small that I couldn't read it completely as I drove by. This was badly designed.

I took another look at billboard designs from major or familiar companies of the general public. Such as, Budweiser, Coke, Heineken, IKEA, and etc. These all use some sort of icon or graphic, such as a logo, that's recongized as a household name. Just like in the Budweiser billboard, they're using the clouds as the crown logo. Recognized companies are free to do that, to use elements of theirs in different ways. Such as enlarging a logo or graphic or some sort of element that belongs to the company. Or even a certain color, as with some IKEA billboards I have seen - yellow. Another example I see everyday is the Yellow Tail wine. A few years ago they used the logo as being most of the billboard with an illustration of an animal or something with a yellow tail. Now they have it as the illustration enlarged, taking up most of the billboard space, with the yellow tail and their logo small off to the side or bottom.

Small start-up companies shouldn't do this yet. It's confusing for the new viewer. They need to first establish their brand and be known to the general public before they can go all out with enlarging random graphics. Instead they should enlarge their logo or name to let it be known. Having the name of the company or the web address written small and almost hidden on a new billboard is not helping the company out. Let the name get out there first. Plus add an icon or graphic that goes with the business. If the small company is into real estate, then have a house graphic or photo with a sale sign. If the small company is into pet care, then have a photo of a dog or cat or even an illustration of animals. But the make the name of the company stand out against the graphic elements, not vice versa.

Veerle's Blog

I can't say enough how much I love Veerle's blog. I've decided to dedicate my first blog post of the month to her.

Almost everyday I visit her blog to read up on what's new and take a look at the archives. Today I was reading a post about a billing software that she wrote about. As I was looking through it, I noticed she had a screenshot of the application. It was a listing for an invoice and she had her rate listed on it. Now I know how much catching up I have to do on my skills so I could make the same! Anyways, the point I want to make is how honest Veerle is. And even though I don't personally know her, her blogs are like mirrors of how I want my future to be. She's a true inspiration to me and to many others as well as I noticed in the dozens of comments she gets on her posts!

Her blog is really helpful for me. I've learned about so many new applications and techniques to use as a freelancer. And this is perfect for someone new in the freelance world. Her designs are very unique also. I don't see where she finds time to even write a post. I barely have time to even comment!

I think it would be really great to meet Veerle someday maybe and get a chance to talk about design. (Maybe even work for her one day...)

Current Design I'm Working On...

I just designed a new layout for the El Patio Motel website. This project is half for fun and the other half for my first freelance work.

The El Patio Motel is located in Key West, Florida and is decorated in art deco style with a lovely garden and roof sun deck.

Here's why their site looks like now: www.elpatiomotel.com.
Here's my design:


I got inspiration from Komodomedia's website. I'm still working out how I want the Rooms and Rates section box to display and I left off the "s" on Room in the design. Oops. I also still want to add a web badge for the Make a Reservation link and maybe some graphic "hanging" down from the top of the page to display a comment area for people to say what they think after staying at the motel.

The first step I took in this project was of course drawing the design out on copy paper with the golden ratio. (I have a template that I can print out to draw up site designs.) I already had the design in my head for about a week, but couldn't find the time to sit down and draw it out. It only took me two days, the weekend in this case, to draw my design out and then go into Photoshop and make the comp.

I still have the content page and a form page to go, then I'll start developing it using XHTML and CSS. This usually takes 3-4 days, about 2-3 hours per day.

Hopefully when the new site is completed, I can sell it to El Patio, if they like it. I would offer them a good deal, because they would be my first real client as a freelancer. If not, I think it makes a great portfolio piece!

Designing/Developing for the iPhone, the Next Big Thing?

I recently came across the August 28th article by Craig Hockenberry entitled "Put Your Content in My Pocket" from ALA. The main focus of the article is on Mobile Safari and how you can "clean" up your current site to render as expected for iPhone users.

Craig goes on explaining all kinds of things to consider when designing or developing a website for the iPhone. For example, the resolution of the iPhone screen is 320px by 480px, text should be at least 40px large (or use percentages or ems for compliant web standards), and using microformats for links to phone numbers. Also he gives you tips on how to style a separate CSS for the iPhone and using any AJAX or JavaScript.

I've only read part one so far; part two is more on design, which I can't wait to read. I think these articles should be read by every web designer and web developer out there. One reason comes from part one of the articles in that Craig states,

"Many of these ideas can be useful and effective with other mobile devices. The processing power of these devices will continue to increase, bringing an end to a "dumbed down" mobile web. The iPhone may be just the beginning of an exciting new chapter in the storied life of HTML."

I personally think this is extremely important for the age of cell phones with Internet service. I'm not going to jump on the buy-an-iPhone-now wagon, but if Apple plans to sell over 10 million device that use the Internet by 2008, I'm sure I'm going to read and study as much information about designing and developing for the iPhone and other cell phones as I can.

New Site I Checked Out - Create Network

For the past week now I've been on the Create Network web site, part of Create Magazine, and I still haven't seen everything this web site has to offer. I can't remember how I got to it, probably through some blogs I normally read. The Create Network is a site about networking designers; from graphic designers to photography. You can sign up for free and post some of your portfolio pieces. You can talk with other designers and check out the job board. They even have this image battle on which your uploaded images get rated in these random "battles" that other people vote in. I've also been listening to their podcasts to get some more info on who they are and how this got started. Here's where you can subscribe to their casts.

From what I know so far is that Create Magazine is located in Orlando, Florida and their site, Create Network, is loaded with useful stuff for all types of designers!

Organizational Management

Here we go, the main reason why sometimes work just sucks. Is it just me or does every company have organizational problems?

It starts in the morning and my main supervisor is at her desk looking over an email I sent the day before. She calls me to her desk and yells at me to not take copy from my other supervisor. My other supervisor gave me different copy the day before for a web page when she was not at her desk. I changed the copy, because it all looks the same to me and some copy was missing. I replied back questioning her why he would give me different copy for the same page.

So I get yelled at for taking instructions from one of my supervisors. This is insane, because this slows down the project we're working on. I talked with my main supervisor and she is supposed to straighten this out, and she told me to always bring her what my other supervisor wants changed. I do this by sending her emails of the changes and I always keep backups of the old web pages. I have like 8 versions of the home page right now.

But really, it nerves me that my supervisors can't get together when someone wants something changed. It probably won't take but 5 minutes for everyone to agree that this button needs to be blue or this text needs to be to the right. Honestly, I'm learning so much from this experience, about organizational management. I'm a very organized person by nature and my supervisors are what gives me the most stress, not the work!

So, I've decided to make a list to share or reference for myself on organized workflow within a small team of 5 or so:
1. Know who all is working on the project and get their contact information
2. Make note of each person's responsibility in the project
3. Make a timeline and follow it
4. Create a request for change form with deadlines for reviews
5. Have weekly meetings to discuss what's been completed, what's being worked on, and what's coming up.
6. Have a meeting with everyone to discuss even the simpliest change on a web page
7. Assign a person to be in charge of the final decision

Justified Text

What is it about justified text on a web page? I recently designed a web page with lots of text and one of my supervisors asked if I could justify the text so that the ends of each line line up. The main reason I don't use justified text much is because you get rivers in the paragraphs. Rivers are the spaces needed to justify the text and when you have about the same amount of space in each line it looks sort of like a river going through your paragraph.

Oh well, I justified the text so everyone will be happy.

Finding Myself...Again

With all web designers, graphic designers, and artists is it normal to always be looking for yourself? Your style, your trends, your signature? I remember reading something about this in either How to be a Graphic Designer Without Losing Your Soul or somewhere else about how designers can't find their style. This would be difficult since design trends will always change. Plus, if you're a freelancer, you're always having different designs and feels for each client. As a designer you will always have to adapt to what the client wants.

The only thing that could help you keep your style is your own web site. This provides what trends, colors, fonts, styles, etc. that you like. Because you won't be able to incorporate your nice two color contemporary, abstract design from your web site to a client's web site or print project. Unless they actually want that and lucky you!