What’s New?

Now that I have returned home to San Diego, I am very excited to announce my latest project.  San Diego based Tattoo Fun provides custom temporary tattoos for clients such as Barack Obama, Ford Motor Company, San Diego Chargers, San Diego Padres, Pittsburgh Steelers, Office Max, Coors Light, Rockstar energy drink, and the list goes on…  I was hired to clean up the existing site, provide new content, and bring the old Miva Merchant site to Miva 5.5.  After 11 years and several designers their code had become a tangled mess of nested tables and the flow had become rather disjointed.

Site: http://www.tattoofun.com
Miva Merchant URL: http://www.tattoofun.com/Merchant2/merchant.mvc?

Conversion University

For modal windows i use I use jquery thickbox.

Features:

• ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it’s 58k.
• The ThickBox JavaScript code and CSS file only add an additional 15k (only 10k by using the thickbox-compressed.js) on top of the jQuery code. The CSS file could additionally be compressed if need be.
• ThickBox will resize images that are bigger than the browser window.
• ThickBox offers versatility (images, iframed content, inline content, and AJAX content).
• ThickBox will hide form elements in Windows IE 6.
• ThickBox will remain centered in the window even when the user scrolls the page or changes the size of the browser window. Clicking an image, the overlay, or close link will remove ThickBox.
• Due to the ThickBox creator’s view that transitions should be tailored by individual authors, ThickBox windows do not implement fancy transitions. Feel free to add them as you see fit. Is this a feature? Well, some might say it is.
• ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).

example 1 (single image)

example 2 (gallery)

example 3 (inline content)

?height=300&width=300&inlineId=myOnPageContent

example 4 (iframe content)

?KeepThis=true&TB_iframe=true&height=400&width=600

Example 1
Example 2
Open iFrame Modal

example 5 (ajax content)

Scrolling content
No-scroll content
login (modal)
Update ThickBox content

by: Matthew Muller
I knew this was coming.  I’ve noticed more and more sites are defining font-sizes with “em”.  But I’ve held on kind of like when CSS took over tables way back when. I liked tables. They worked (and still work) fine. Although even today I use them for certain applications their time had come. And so it seems the days of defining font sizes with pixels has also come. They still work just fine and defining a size based on something that I didn’t quite understand was a little intimidating. So as with everything I did a little investigating.

Richard Rutter’s article How to size text using ems helped clear up the confusion.  So I dove in, with a copy of course, oops! Oh well at least this way I’m committed. After my first jumbled mess of overlapping and ridiculously large fonts sizes, I went back to my old method. When I start to get too many colors or “things” on a page I delete them ALL. It doesn’t matter how cool or how much time it took to get them to their pixel-perfect state. They are in the trash and I’m emptying it.

I searched out every “font-size”, “line-height”, “color:”, etc. on my style sheet and removed them. I set my body text (62.5%) for now. This seemed the easiest way to me. 1.6em then acts like 16px, that was language I understood! Then I listed only what I would need: header, footer, content, and sidebar. Oh, and my Hn tags. I set them to what I thought they should be. Sidebar, at little larger than the content text. The footer smaller than the header and so forth.

Finally, I uploaded. To my surprise it worked! A few little tweeks with line heights and I was in business. Simple sometimes really is better. Now if I could just clean up my desktop (I really like that background photo)…

5 Essential Features of Effective Websites
by: Matthew Muller

• Structure
• Content
• Content Management
• Analytics
• SEO

7 Steps to a Successful Website
by: Matthew Muller

• Define and Discover:
  A few questions to ask yourself at this stage:
  • Why do I need a website?
  • Who is my website for?
  • What do I intend to deliver with my website?
  • What goals to I hope to accomplish with my website?
  • Who is my competition?
  • What is my competition doing to promote themselves?
  • How can I improve upon my competition?
• Design:
  • Photoshop mock-ups
  • Wireframes: Create a basic sitemap showing the structure and flow of your
• Create:
  You probably have an idea of what you would like your domain to be by this point.
  • Hosting/Domains
  • Do I need to purchase editing/ftp programs or does my web designer provide a content management system?
• Deliver:
  Now that you’ve created your new website. Its time to deliver.
  • Foundation
  • Structure
  • CSS, HTML, PHP
  • Features

  Photo galleries, maps

• Promote:
  Reach your clientele.
  • SEO
  • Marketing
• Maintain
  • User experience
    • Deliver fresh content (cms)
    • Remove out-of-date content
  • Contact
    • RSS
    • Online forms
    • Email
  • Visitors
  • Analytics
  • RSS Feeds
• Review:
  • Have I fulfilled my intentions?

Companies like GoDaddy.com are great for purchasing domain names- just beware of all of the additional features they will try to sell you. Often times they are quite sneaky about it! I recommend purchasing a minimum of five years. Keep in mind that you do not actually purchase your domain name, you just lease it, and there are evil companies just waiting to buy them the minute they expire. Of course, they are willing to sell them back to you, at a price! Several years ago I learned this the hard way and my domain (mwmuller.com) is still owned by a company in Australia. They are impossible to reach by phone or email for that matter and charged me well over $500 to lease my name back from them. Be aware!

With different content I needed to specify sidebars and eventually content style and conditions.  I know I could specify template to do this.  …and for now thats what i’m going to do!

just add

<?php
/*
Template Name: NAME OF YOUR TAMPLATE
*/
?>

to your regular page.php file and change at will!

Since my wordpress blog has multiple personalities I needed to specify a specific sidebar based on category.

In order to do so I had to replace the initial:

<?php get_sidebar(); ?>

with a conditional statement:

<?php
$category = $wp_query->category;
if ( is_category('16') ) {
include(TEMPLATEPATH . '/sidebar2.php');
} else {
include(TEMPLATEPATH . '/sidebar.php');
}
?>

Now when category “16″ is viewed  it returns sidebar2 and when all other categories are called it returns the normal sidebar.  This worked all well and great for archive.php, it did not function with single.php (specific post pages). For that I had to edit the single.php which was just fine since i had also wanted to include/exclude different features/content for each category.

I replace the content in single.php with:

<?php

$post = $wp_query->post;

if ( in_category('16') ) {

include(TEMPLATEPATH . '/singleWebDesign.php');

} else {

include(TEMPLATEPATH . '/singleMyBlog.php');

}

?>

then i created two separate single.php files with the appropriate content.

The results allowed me to have specific content for my family’s and my blog while my web design blog(this page) maintained it’s appropriate content.

Then came my next problem…

The archive of website additions returned the appriate side bar, however the archive of any child category did not.  This has an easy fix, simply add additional category ids to the original conditional statement.

<?php
$category = $wp_query->category;
if ( is_category('16')) {
include(TEMPLATEPATH . '/sidebar2.php');
} else if ( is_category('62')) {
include(TEMPLATEPATH . '/sidebar2.php');
} else {
include(TEMPLATEPATH . '/sidebar.php');
}
?>

However, I did not want to add every child site to the list every time i added one.  So I needed a more sophisticated solution.  After several attempts to find the root category, parent category and so forth, I realized that I already had the answer.

<?php
$post = $wp_query->post;
if ( in_category('16') ) {
include(TEMPLATEPATH . '/archiveWebDesign.php');
} else {
include(TEMPLATEPATH . '/archiveMyBlog.php');
}
?>

and

as an effort to keep this site up-to-date we installed Wordpress as more of a CMS system than a blog.

-view this site

just made the leap from Google’s Blogger to Wordpress.

Outgrowing Google’s Blogger it was time to install Wordpress.

Features

• rss read on home page to include our news, nps news, and guest comment feeds
• guest login/comments
• yellowstone news/current events

Added Google’s Dynamic Feed Control function to MWMuller.com. For this installation I used the code created by google’s wizard and simply stuck it in the appropriate area (where I needed it to display). After reviewing the controls (javascript and css) I re-wrote the parts I need to include the relevant files and information. Finally, I integrated the css file to harmonize with the rest of the site’s color format.

Added an area to MWMuller.com for green information and links to good causes. By choosing me as you web designer, you also help support these causes, just thought you should know.
- view page