A WordPress Love Letter

Most of the web design industry may be on WordPress overload but majority of us still can’t get enough. The WordPress, “I’m Lovin’ It” faithful-following understand that it has quickly become one of the fastest growing, most popular content management systems (CMS) for blogging, if not the most popular CMS overall. It’s extremely quick to install as well as easy to navigate and master.  And they are consistently evolving across all platforms with simplistic, internal update features and plugins that are only a few clicks away in the backend.  Often, there are no external file downloads even necessary! One of the best parts is that it allows both web design companies and individuals alike to produce dynamic websites without extensive knowledge of web development or code writing. Unlike traditional HTML sites, WordPress is extremely cost-effective and easy to change over when you tire of the layout look.  If you want a fast turnaround with minimal time invested, look to web design firms such as Design Theory to supply you with a customized, stunning website with lightning fast turnaround at a start-up budget price.

If there’s a WordPress for Dummies TM (yeah, there really is) you have to know there’s some industry staying power and it is more than just a flash in the pan or temporarily trending on Twitter.  They’ve definitely invested in their place at the table of content management systems.  Some skeptics may wonder, well is it really that easy?  As a non-code writing web content designer, I can say yes it is.  And as I’ve quickly learned, if there’s something you don’t understand, there is a TREMENDOUS amount of help and documentation online you can find on nearly every aspect of customizing your WordPress website. If you can dream it, chances are it’s already been done with WordPress and documented somewhere tangible and therefore learnable.

WordPress also has one of the widest varieties of plugins and themes to choose from giving a seemingly endless realm of design possibilities.  Let’s look at some of the recently added & most popular layouts.  Looking for a simple way to showcase your photos?  Check out this Free Photo WordPress Theme. Have a blossoming political career or want to blog about and propel your choice candidates’ ratings?  Political Blogging WordPress Website gives you sound bites right on the homepage and yes that is our current Prez Obama on the 4th slide.  If those don’t titillate your visual & artistic senses, feel free to peruse these Top 100 Most Beautiful WordPress Themes highlighted by TopDesignMag.com.

While these great themes are indicative of the WP developer bug bite, WP and its growing community of contributing developers do their best not to skimp on flash or fun.  How creatively, fun are widgets! A Widget? For those who don’t know, it’s an on-screen device/application that can be installed and executed within a web page by an end user such as a clock, calendar, image, daily weather, etc.  This allows putting your own style & spin to most WordPress themes/layouts.  And speaking of spin…a great example of having more WordPress amusement can be the Flash Image Carousel plugin, which circulates a variety of images/photos in a cool, circular motion versus the typical, right to left slide show.  WordPress Plugins are great tools that extend the functionality of your WordPress website and currently there are 21,820 plugins available directly on WordPress’s website (as of today that is).

Another feature that we all love is the ease of Drag and Drop content editing which makes content placement a cinch with 2 clicks. Oh and the list goes on and on…With WordPress it seems that if you can conceive it someone creates it and that’s the best part of being WordPress user and fan.  So if you’re already an enthusiast or are curious about becoming one, check out some of the latest WordPress innovations via WordPress TV.  What, their own online TV station – what’ll they think of next?  Apparel?  Say it isn’t so…sorry we can’t because you can wear it loud and proud via WP Apparel.  Needless to say they’ve proven that the sky’s the limit and I’ll be tuning in to find out what’s hot from these tried, true and trendy website theme makers.

Lastly, to the Big W…if you couldn’t already tell –
Aw shucks, we love you guys!

 

~ Content Writing Inspiration ~
“A hunch is creativity trying to tell you something.” Frank Capra

Dear Designers, Please Learn Development

(and vise versa)

It’s been an ongoing debate since perhaps the beginning of time– can a person use their creative and analytical brains (right and left, respectively) with equal skill. Obviously, there were some who did it well–artist and inventor Leonardo da Vinci comes immediately to mind–but what about in today’s society, in particular the gap between web designers and developers.  Should there be an overlap in skill sets?

While I admit that having specialization of labor, as a whole, has brought many benefits to society, in this particular case of website creation the two divergent mindsets are working toward a common goal. It is less like a composer and a biochemist and more like an interior designer and an architect.

Because there is a shared purpose and desired product/outcome, even if the design and development work is split between two individuals, there is the expectation that they will have to communicate to each other to reach the client’s goals. It becomes necessary,even on a basic conversational level, for both the designer and developer to understand parts of the other’s job and associated vocabulary. Ignorance here will benefit no one.

How much more of an overlap might be necessary depends on what type of services you offer  individually. Obviously if you are a lone designer offering a PSD to HTML service, you’ll need to know HTML and CSS. If you are a solo web developer putting together a web app, being able to put together a cohesive user interface is a must. The right brain/left brain skill set overlap becomes then an extending of the basic level of understanding needed to interface with the other half–be it designer or developer. This is more, I believe, a matter of personal preference than a mandatory learning because it requires the individual to be confident enough in his or her skills to carry out the tasks of the other

While we can argue the merits of separation all day, the fact is that neither designers  nor developers operate in a vacuum, completely cut off from the other.  There is a symbiotic relationship between the two, put in place by the very nature of the work.  Considering how tightly the Internet connects us all together, it seems even more counterintuitive to fight to keep the right and left brains completely divided. After all they do make up one mind.

5 Clean Website Designs for Inspiration

Clean (clutter-free and simple) website designs are very popular and give your website a very professional look. Here are 5 examples of clean designs that we hope will really inspire you.

Scout Campbell Photography
Created by: Mark Dobmeier (Me)

Country Club Pet World
Created by: Mark Dobmeier (Me)

Coco’s Doggy Daycare
Created by: Mark Dobmeier (Me)

QSoft Consulting
Created by: Design Theory Team

Laser Med
Created by: Mark Dobmeier (Me)

Here are some common design features that you might find in the websites displayed above.

  • Clutter-free
  • Minimal design
  • Ample use of white space
  • Color schemes that use very few colors and are not heavily saturated
  • Clean edges and straight lines
  • Solid background colors (no textured/patterned backgrounds)
  • Typography that is well-composed
  • Powerful imagery

What are some examples of clean website designs that you’ve found?

Image Optimization And Why It’s Important

Have you ever been to a website that loaded very slowly? Did that website have some images that loaded abnormally slow, even though they weren’t that large in size? The reason for that may be that the images were re-sized improperly, most likely with a WYSIWYG (What You See Is What You Get) webpage editor such as Adobe Dreamweaver. This problem could have been avoided if the images were optimized.

Adobe Dreamweaver is a very powerful webpage editor that can be used to customize just about everything on your website, including specifying or adjusting the resolution of your images. When you click on an image you have inserted into Dreamweaver, you get the properties window, which allows you to specify the size of the image (resolution) and a host of other options.

Dreamweaver image properties

Notice in the the above example the image file size is 4162K. That means it’s about 4162 kilobytes (or about 4 MB) which is very large. Also notice that the W and H (width and height) values are both in bold. That means that the current size of the image (266 x 140) is not the actual size of it (4096 x 2160). If you click on the refresh button next to the image size Dreamweaver will resize the image to the proper size (4096 x 2160).

If you change the size of an image using Dreamweaver’s image properties tab, you will just be changing the image’s resolution and not the actual file size. Using this method to downsize large images will make the images load very slowly.

 This is NOT a good method for re-sizing an image for a webpage! 

Dreamweaver wasn’t designed to be used for editing images. The purpose of the width and height boxes in the properties tab is to specify a resolution (size) for the image or object you have selected if there are no dimensions specified. A much better way of optimizing images is with Adobe Photoshop.

Using Photoshop to Optimize Images

If you have Adobe Photoshop, then you have the perfect tool for optimizing your images to display on your website. Here are some quick and easy steps to optimize your image in Photoshop:

1. Open the image (File > Open)

2. Re-size the image with the image properties window (Image > Image Size)

Notice at the top of the window where it says “Pixel Dimensions:” that the file size of the downsized image is now 109.3K which is a whole heck of a lot smaller than the original image file size of 25.3 MB.

3. Instead of “Save” or “Save As” use the “Save for Web & Devices” option (File > Save for Web & Devices).

If you look at the top right corner of the Save for Web & Devices window you will see these options:

Most of the time, I alternate between the 70 and 60 quality setting depending on the size of the image. I have set this image to the JPEG High preset, which gives the image 60 quality by default. If you are re-sizing an image for a thumbnail (320 x 240 or below) 60 is a great setting because you won’t see any degradation in quality from the original. I use the 60 quality setting most of the time, unless the image is very large (1024 x 768 or larger).

Original quality vs 60 quality

The original on the left is full quality (no compression) and the optimized on the right is 60 quality. At this smaller size, it’s hard to see any degradation in image quality at the 60 setting. As you can see, the optimized image on the right has an estimated load time of 3 seconds for a 56k dial-up connection. Of course, most users today have cable and other much faster connections, but it’s nice to know that even on the slowest connection, the image still won’t take too long to load.

4. Upload the new and improved image to your website!

Now you’re ready to load the optimized image(s) into Dreamweaver or whichever editor you use for your website.

Video of Image re-sized using Dreamweaver vs. Photoshop Method

As you can see in this video, the image that was optimized using my Photoshop method (on the left) loads a lot faster than the image that was re-sized using only Dreamweaver (on the right). The optimized image loads almost instantaneously!

If you don’t have Photoshop, there are several other free tools you can use to optimize images for your website such as DynamicDrive.com’s Online Image Optimizer, which uses the same quality settings as Photoshop’s “Save for Web & Devices,” or RIOT (Radical Image Optimization Tool).

If you know of any other tools or methods you can use to optimize images, let us know in the comments!

WordPress and Google Analytics

The Problem: I, like many others, manage WordPress sites that I monitor with Google Analytics–which is an awesome tool.  Sometimes, however, I like to visit my site and see how content looks live.  Because I do a bunch of work on the go, it isn’t always conducive to filter out all the different IP addresses, so sometimes my visits end up getting counted and throwing my statistics off.  This could also work if you have multiple bloggers and don’t want their visits to get confused with the overall traffic of the site.

The Tools:

  • A text editor.  I use Notepad ++, but you can use whatever you like.
  • Your Google Analytics Code
  • Access to your WordPress theme

The Solution:

The solution is fairly simple, though it does require two minor adjustments on the part of the user.

First off, it will require that you login as an administrator prior to viewing your live site. This might take a little bit of getting used to, but what I’ve found is helpful is updating any bookmarks on my browser to go directly to the login page–just as a helpful reminder.

Also, some WordPress themes may allow you to insert Google Analytics code via their option panel.  While this might be helpful in most cases, this particular workaround will not function correctly without further editing of the theme.

For starters, I recommend first creating a backup copy of your site files.  Though this process should not mess with anything else, it helps to have a backup copy handy, just in case of something weird.  Also, it might help to edit your theme offline and then upload it, so while I know that WordPress does have a feature to edit code, I prefer to test offline prior to uploading.

Open header.php and locate the </head> tag.  Found it? Great! Now, right above it we’re going to add the following lines:
< ?php global $user_ID; if (!current_user_can('administrator')){?>
< ?php } ?>

What this does:

  • Sets the $user_ID variable to global. This allows us to use the built in user functions.
  • The script then checks to see if the user is not an administrator using the “current_user_can” function.

Right now, this code doesn’t alter anything.  That’s about to change!  Copy your Google Analytics code and plug it in between right after the first ?>

What you have now (depending on your Google Analytics code) should look something like:

< ?php global $user_ID; if (!current_user_can('administrator')){?>
<script type="text/javascript" src=" http://www.google-analytics.com/urchin.js "></script>

<script type="text/javascript">
_uacct = "UA-xxxxxx-x"
urchinTracker();
</script>
<?php } ?>

</head>

This should eliminate any logged in administrative users from showing up on Google Analytics as the script will only run if the user is not an administrator!

Alternatively, you can check if the user is logged in, and run it only if the user is not logged in. This is done by replacing if (!current_user_can('administrator')) with if (!$user_ID). (In case you hadn’t guessed, in PHP ! means “not”.)

Let me know, as always, if this works out for you, or if ! how I can help.