Live Blog: Better Blog Design on a Budget

Blog design is a combination of aesthetic as well as function.  In our everyday lives we are all designers.  Look know further than the appliances you surround yourself with in your home and how you utilize them.

When creating a blog you have two choices with design: hire Someone or DIY.  There is the saying that you get what you pay for so keep that in mind.

When hiring a blog designer ask:

  1. Do they have a portfolio?
  2. Do you like them?
  3. Be clear with what you want
  4. Know the budget (e.g. flat pay vs. hourly pay)
  5. Know what their services provide (e.g. design, maintenance)
In going the DIY Blog Design route understand “what is the web” with regards to how it relates to DIY concepts.

Know that with structure HTML is considered sloppy, XHTML is considered strict, and HTML5 is considered more modern.  HTML and HTML5 work with how browsers handle files like how media files are displayed or audio files are played.

With the Formatting you need to know Styles which are rules.  Great sources to learn the style language are CSS-Tricks and HTMLDog. HTML Dog is a site with a companion book that covers CSS and HTML.

Now that you know the basics of the web and how you are going to approach your website’s design you need to ask yourself WHY ARE YOU KEEPING A BLOG? This will help you understand parameters of what kind of design will best be suited for your blog.  If you are unsure of your exact design needs then look around at other blogs to see what resonates with you.  See where your moments of perfect clarity (or good design) are.

USABILITY

Do not make the user have to think when navigating – make content obvious and self-explanatory

Visitors scan, they don’t read.  Their eyes go from left to right, then down, then left to right, etc.

We don’t make optimal changes

Speed is essential (designer and developer consideration)

Follow a visual hierarchy

Visual Hierarchy example of better way to organize content to make easy for the user

NAVIGATION

Where can I go from here?

Where am I now?

Can I search for something?

Be consistent

Example of questionable web design. Clockwise from top left: 1. Website 2. Filler Content 3. Item that was searched for 4. Ads interrupting the center of the page

TESTING FOR USABILITY (Figure out your content)

Testing the site for 1 person is 100% better than not testing the site at all

Testing with 3-5 people will reveal 80% of issues

Guided vs. Unguided Testing – Ask questions then don’t talk (which is hard), but record reactions

Video test – record what is going on during testing

Be nice to your testers

COLOR – some sites to help plan are Color Scheme Designer, ColourLOVERS, and Color Hunter

TYPOGRAPHY – Type Kit and Google Web Fonts are helpful sites

Do not use more than 3 fonts on a site and use them wisely (e.g. heaviest font should be the header font)

RESPONSIVE WEB DESIGN – this is the BIG trend in web design right now. MOBILE FIRST!!!

DIY HOSTING?

Tumblr – your content is trapped in that ecosystem, which is hard to retrieve when wanting to remove or copy

Blogger – mobile version as option these days (responsive design at work)

WordPress – Jim’s preference with a core code that is not edited.  This platform is like play-doh with how we get to mold.  There are many plug-ins to use that add custom functionality to your web design.

WOO Themes – $150 inclusive access to all themes or free themes *as an option

live theme viewer makes it so you don’t have to upload to see what it looks like

DOMAIN NAMES – you rent a domain name and have to keep paying rent or it can be swiped and sat on with an increased asking price

HOSTING – where pages live.  You can choose for wordpress to host or go to another party like Dreamhost that you pay as they host

OTHER TOOLS AND STUFF

Google Web Master Tools

Google Analytics

Web Developer Toolbar (Firefox/Chrome)

Firebug (if you really want to get down)

A List Apart

Smashing Magazine

Web Designer Wall

This presentation was done by Jim “Mister Bondage” Doran. When not pounding the shit out of people, Mr. Bondage is a professional Web designer/developer, WordPress expert, faculty at CCBC, technical book editor and international artist. Learn more about roller derby athttp://chesapeakerollerderby.com/ and Mr. Bondage at http://jimdoran.net/ .

This live-blogging recap was done by Kia M. Ruiz of Bodhi Bear

  • http://www.mosthost.net Darren

    Nice summary. I think for starters who aren't sure how deep they're going to get into blogging, starting off at Blogger is not a bad idea. Tumblr is cool, too, but it's a very unique culture. Blogspot helps you learn all the basics. If you like blogging you can move on to your own platform.

  • http://jimdoran.net/ James Bondage

    Nice recap!

  • Pingback: Fitbloggin Redux | Bodhi Bear