Jennette Fulda Make My Blog Pretty
Slides are here – with many links.
Ms. Fulda is an experienced Web designer who helps improve their blogs. Also – she sometimes gets a little splotchy and it’s nothing to be alarmed about.
What is good Web design?
That’s up for debate
Site should be both 1) usable & intuitive and 2) aesthetically pleasing.
Excellent boot – Don’t Make Me Think
Beautiful design draws people in – we love beautiful things.
Usable vs. Pretty is a balancing act.
Good design = good user experience.
Basic Tips.
7-9 menu items (secondary items should be in a drop down)
Don’t overstuff the sidebar
We read from top to left – it’s good to organize your content that way. Eye scanning studies support this. People SCAN and look for the important stuff, so we need to put it where they can see it.
Important stuff goes at the top. Things like: Navigation, RSS feed, Search Bar, About Statement, Social Media Links.
See Ad sense for maps for ads, based by google, for optimal ad placement.
Use the footer – great for secondary stuff.
Don’t make your header too tall. Put the important stuff “above the fold.”
Don’t make your site too wide. You don’t want to scroll in two directions.
How wide should my site be? You can use analytics to find the average screen resolution.
Leave room for the chrome/skin.
Main content area is usually 400-500px wide
Sidebar is usually 1 column 300-320px or two columns each 160px wide.
Standard ad sizes are:
300 X 250
160x 600
Avoid slow loading pages. You have between 4-8 seconds before they leave.
Avoid using too many scripts.
Have you posts load before your sidebars, if possible.
Resize your images to the actual size.
WordPress will adjust images for your site.
Don’t make music Autoplay. You might be a work
Use safe, web based fonts.
Google Web fonts.
Categories of Fonts:
Old style, Sans-serif, script, Modern, Slad serif, decorative.
Serifs are the little slope-y things on the ends of the characters – they have variable widths. Sans-serif font have all widths the same.
Don’t use decorative for everything. Only use one type of each font on your site- for example using two different sans-serif fonts make it confusing and odd. You really just need one.
Make text legible. Not too Small, or too big – watch color contrast.
Don’t use crazy colors unless you have a reason to. USe a pleasing palette of colors.
See: kuler.adobe. com
Try pulling colors from a photo you like, or a painting, to generate your pallette.
Be consistent with your styles and layout.
She’s suggests hiding the blogger.com users remove nav bar….
Use a favicon to present a more professional, polished image a blogger. It needs to be in the iCO format.
There’s online tools to do this, and a free photoshop plugin (see slides for links)
Design for your user, not for yourself.
Good design know no language.
Do you see what I see? Test in Internet Explorer, FF are the dominant browsers.
Chrome and Safari – you can/should also test using these.
Analytics will help determine what browers your visitors are using. IE has different versions which behave differently.
For Mac, you can try parallels, Virtual PCs, to install Windows for testing. browsershots.org. browserlab.adobe.com (free for now).
Feed readers format things differently. Don’t freak out. Your RSS is okay – the browser is doing it.
Check on mobile.
WordPress.org/ <- mobilepress to create an on-the-fly mobile version of your site.
You can customize blogger themes.
Use images when appropriate. Don’t steal. Check out creative commons content for images.
You can search flickr for CC content.
iStockphoto.com for stock photos. The credits expire after a year
Social media buttons – try Sharethis.com & addthis.com or make your own. There are free ones you can use that may match your site. Try to be tasteful.
Image editors photoshop, gimp, picnik.com
Avoid special effects for the sake of special effect.s
Firefox plugins to support Web design: measrureit , firebug, Web developer toolbar
Be inspired by other people. But don’t steal.
CSSREMIX.com for inspiration.
You have to spend either money or time to make a site great.
Great recap, Jim! Thanks for being on-hand to help me answer questions, too. Good seeing you at FitBlogin'!