Awesome WordPress 3.4: Theme Customizer

WordPress logo

WordPress 3.4 has a number of exciting new tools and features. Over the next several weeks I’d like to share some of the highlights with you. Please do note that the current version of WordPress is 3.4.1 -which includes some important bug fixes- but because these features were included in the 3.4 “Green” release, I’ve chosen to reference the core.

One of these new tools is the Theme Customizer, which provides a WYSIWYG (what you see is what you get) editor for some style and display options.

To access the Theme Customizer page, you can reach it via a link directly under the active theme area.Alternatively, you can find it in the admin menu bar beneath your site’s name when you are logged in and viewing your site. You should end up at a screen looking like this:

Wordpress 3.4 Theme Customizer

 

Looking at the options on the left side, we can see that there are a number of things we can alter. (I am referencing WordPress Twenty Eleven. Depending on your theme, there may be varying levels of support for this, so be sure to check what version of WordPress your theme is compatable with.)

The top box drops down to provide the description of the current theme–though there isn’t an option to change it here.

The second allows you to alter the site’s title and tagline. If you make a change to either, you will notice that the preview on the right instantly updates. This is the case with all edits done from the customize page — hence the WYSIWYG feature — though none of the previewed changes take effect until you click the “Save and Publish” button on the top of the toolbar.

One of the coolest functions of the “Theme Customizer” tool is the “Color” option. This allows you to preview and select a change in color scheme– for example, Twenty Eleven has a light and dark color scheme built in– header text color, background color and link color.

WordPress Theme Customizer Color option

Clicking on one of the swatches displays a color wheel, which allows you to slide and select your color, or you have the option to input a hex value if you already know what color you’d like.

Layout does just what it says–allows you to select from the theme’s default layouts. It is important to note that this change seems to cascade throughout the site, so if you select “No sidebar”, you will not only be removing it from your homepage, but from your blog as well. If, however, you want to set all your pages to the same template with minimal amount of clicking, this is definitely the way to go.

Header Image lets you select a header image from the defaults, uploads, or upload a file. The uploader is much like the media uploader, allowing you to drag and drop the image or select it by browsing. The uploaded tab shows you images that you have uploaded previously. The default tab allows you to view all header images packaged with your theme. You also have the option to remove the header image entirely.

Background Image is, again, self explanatory. This gives the same options as the header image (upload, remove and, depending on your theme and your prior changes, uploaded and default). Once you make a selection, you are given the options of background repeat (change if or how your image tiles), background position, and background attachment (if the picture scrolls with your content).

While an option available in the Settings>>Reading menu, Static Front Page with the customize tool is easy to find. You also can preview how the front page will look if you switch it to a static page, or if you want to display your posts.

The option to customize your WordPress theme via a WYSIWYG editor gives you even more freedom and control over your site. If you don’t know CSS or don’t want to mess with the theme’s style sheet directly, you are no longer forced to choose a theme simply based on available color schemes or background. Are you a theme designer/developer? Then check out “Add Customizer Support to Your WordPress Theme” to learn how to add customizable options to your own theme.

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.

Top 5 Reasons Your Hair Salon Needs a Website

Maybe you’ve had a successful hair salon for years and your flow of clients is in and out like a Manhattan revolving door. Or perhaps, you just started one and are struggling to pack the chairs and fill the appointment book.  Regardless, both need a website.  It would seem that the latter would be more in need.  But here are the top 5 reasons why both do and how it benefits the one with the successful streaks AND the one that’s a little green at the roots.  Because the goals of a hair salon  aren’t to create just great client impressions when they walk out the door, but even before they get there or perhaps know that you exist.  How so?  Read on….

1st Show that You Are a Cut above the Rest ~ Perhaps you can highlight with the talent of Picasso or have the most stylish stylists in a 50 mile radius- if you don’t advertise it, word of mouth is probably not enough to keep your book of business on the incline despite a declining economy.  Grooming is one of the “extras” that many people can’t justify when the light bill is due and groceries are in need. In today’s tough economy improving the growth and profitability of your hair salon needs to be a high-priority and this is one tool you’ll want to have in the kit.  Having a website shows potential and repeat customers that you really mean business about your business.  It reflects another level of professionalism for clients and to the industry.  Remember, the goal is to create a great impression on a client both before they come to the salon AND after they see their reflection in the mirror.

2nd   Add Social Media Presence to Your Menu ~ Running a hair salon requires interaction with a lot of people and why not let that network work for you. What do I mean by that?  I mean getting people to Like You on Facebook, connect with you via Linked-In and chat about you on Twitter. With constantly changing styles, promotions, and products you shouldn’t have a problem finding topics to talk or Tweet about.  This is an ever-evolving industry and you can take advantage of that using the free resource of Social Media. Use it to show others that you are tapped into the most current trends in hairstyling, makeup, products or whatever your salon may specialize in.  And speaking of specialties, if you have one in particular-like you wax as smooth as a baby’s bottom or have a stylist who coifs with the precision of Edward Scissorhands-then Social Media is the perfect place to create hype about the talents in your establishment.

3rd Great Referencing Tool for the Trade ~ A website is a great place to let your work shine and the words of your clients work for you.  Often, word of mouth helps as much as it can hurt.  Letting others “hear” from current/past clients does influence decisions…especially in service-providing industries.  Most repeat customers would love say how Thomas keeps their true roots invisible or Shelly is a Shear-tress like no other AND see it in print!  No to mention that playing to a client’s ego in this manner, is also another way to keep their business at your business.  I mean this is an industry of vanity after all…

4th  Stylistas, the Cutting Floor to Web Design ~ A great look and feel website should engage visitors and compel them to spend time there.  You are in luck in this particular industry because the variety of website designs available can vary as much as shades of blond.  But you also have to know which to choose based on your demographics, clientele and other such factors.  Don’t forget that when selecting one, it should reflect both your vision for your business and the clientele walking through its doors. Keeping this in mind, don’t fail to have fun with it. I mean it isn’t a law firm for goodness sake-so you can push the envelope of creativity without seeming over-the-top.

5th  Picture Perfect Coiffing & Selling ~ Photo Galleries aren’t fabulous only in SoHo but can be just as spellbinding on the www while exhibiting your stylists’ work.  There are various choices to do so…like a slide show, a flip/style online book or even a Virtual Tour of your Salon while talent’s in motion.  It will be engaging and be a non-traditional way of showing off your talented team.

                               
Decide Who Will Make the Cut
~ If don’t have a salon website already but are now convinced you need one, here are some considerations when choosing a website designer and/or company:

Find one that you feel understands your salons demographics and how to reflect it on the website.

Know that imagery will be crucial for your website.  So make sure that you have “web-worthy” photographs to showcase the talents of your team and use stock photography where needed to beautify the site.

Make sure they will write your content with commonly used keywords that are frequently used when searching for hair salons, especially in your geographic region.

At Design Theory, we’d love to help you take your business to the next level of design and success. As such, we now have great packages specifically designed for hair salons that will help you blow away your competition.

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!