Word­Press is a pop­u­lar, open-source, Con­tent Man­age­ment Sys­tem built by hun­dreds of com­mu­nity vol­un­teers around the world. Although, I’ve been devel­op­ing Word­Press Themes for years, I finally got around to releas­ing my first Theme for pub­lic use. I call it MEM Core which is short for “Middle Ear Media Core” because I plan on creating many child Themes for it. Each child Theme will inherit the functionality of MEM Core, and will modify, or add to it in different ways.

MEM Core is a pro­fes­sional, cus­tomiz­able Theme with a clean look and respon­sive design. It works great on mobile devices as well as desktops and laptops. The Theme includes optional page layouts, customizable background, customizable header image, customizable navigation menu, and multiple widget support in the sidebar and the footer, and much more.

Follow the link below for more details, a demo, and of course to download the Theme for your own use.

MEM Core Theme

The sales pitch for a Do It Yourself website might seem attractive when you see the ad on TV or in the sidebar of your favorite social network, but do you really have the time? Do you really have the motivation? For most people, the answer to these questions is no. Let’s take a look at some of the reasons why DIY websites are a bad idea.

Opportunity Costs are High

Compared to any other form of advertising, having a website is by far the most economical. Some people cringe at the thought of spending money to have a website designed, developed and hosted on the internet 24 hours a day, 7 days a week, and 365 days a year. At the same time, they’re shelling out cash for short-term print ads left and right. Maybe they are afraid of the technology, but more likely they simply don’t understand how beneficial it could be to their business.

Let’s be honest. The main reason why someone would consider a DIY solution is that they’re trying to maximize their gain for a minimum cost. Unfortunately, it’s not that easy. While the initial cost may be low, the opportunity costs are high. Due to inflexibilities and limitations, your search ranking ability could be diminished. Also, consumers can spot cookie-cutter template websites instantly. This type of site rarely encourages confidence in the user. If the site is too generic looking, it may cause confusion because of inconsistency with the organization’s identity or brand. Additionally, the turnover rate will be greatly reduced.

Another reason why people go for DIY solutions is they want control of the site’s design and layout. Maybe because they’re control freaks, but sometimes from a genuine artistic desire. Even so, lack of experience in UI and UX often lead to poor design choices, which often lead to unsatisfactory user experiences. These are the sort of things that cause users to leave a site promptly and never return. This is fine for the amateur, but it is unacceptable for a professional organization or business.

Websites are Complex Systems

Websites are just good looking graphics, some text, and links right?. Wrong. Websites are complex, dynamic, multilayered systems that exist and evolve over time. Creating and maintaining them requires fundamental knowledge of numerous underlying technologies and concepts.

Consider the following: AJAX, Analytics, Animation, Apache, APIs, Audio Formats, Blogging, Browser Differences, CGI, Content Management Systems, Content Management Strategies, Copy Writing, CSS, Databases, Data Feeds, Digital Image Manipulation, Domain Name Registration, E-Commerce, Forms, HTML, HTML emails, Image Formats, Industry Best Practices, JavaScript, JSON, Layout, Mailing Lists, Micro Formats, Operating System Differences, Page Loading Speed, Payment Gateways, Photography, PHP, Screen Size and Resolution, SEO, Security, Shopping Cart Systems, Social Networking Integration, SQL, Standards, Subscriptions, Typography, UI, UX, Web Hosting, Websafe Colors, Webfonts, WHOIS Privacy, XHTML… and the list goes on.

In addition to fundamental knowledge, it is also important to stay abreast of all updates and watch out for emerging technologies, concepts, and techniques. The world is changing, and the world wide web is changing even faster.

Hire a Professional

If you feel like you have the skills, motivation, time, and resources to maintain knowledge of everything required, then more power to you. You’ll probably be a great web designer and developer one day. If not, do yourself a favor and hire a professional. Your business or organization will be better off for it.

Full Disclaimer: I am a professional web designer and developer who would love to help you with your website needs, whatever they are.

Save The Wild UP is a non profit organization that operates in the Marquette area. Through public awareness and education they strive to protect the Upper Peninsula of Michigan from unsustainable development, degradation and dangerous contamination. Their original web site was designed in 2007 and had been modified numerous times since. It was in need of a major overhaul both in terms of user experience as well as content management. I redesigned their site to solve both of these issues.

Content Management

When the site first began, it was made of static HTML pages. Over the years, modifications were made. Content was added. Structural changes took place. A blog was added. Several databases were being used for various purposes. A lot more content was added. The original site wasn’t flexible enough to scale up with the organization as it grew.

The disjointed structure of the site made editing it very time consuming. Adding content was similarly time consuming and confusing. Blog posts could be made in the Content Management System, but all other content had to be added as HTML pages and uploaded via FTP. Also, special scripts had to be included so the home page would display recent blog posts.

In order to make things simpler, I redesigned the site to function entirely within a Content Management System. Now everything is connected and can be controlled from the Administration panel. Content is added there and content is edited there. The site is now completely scalable.

I also helped Save The Wild UP formulate content management strategies. Because the site contains so much content, it is imperative that the content be organized properly. Taxonomies including “Categories” and “Tags” can now be used to their full potential.

Organization and Navigation

The new site has improved organization of content and a logical layout. With roughly 20 pages and over 600 posts, proper re-organization of the main navigation menu was key to the redesign. To reduce the visual clutter, many of the items have drop-down options. Now a user can find almost everything in one place. The same place on every page.

If a user doesn’t know what section the information they are looking for is located, they can use one of the featured search boxes to find it. There is a search box in the upper right-hand corner of the site as well as in the sidebar of the homepage.

Also, blog posts can be viewed by the category, tag, or date published. This makes sifting through mountains of information and finding specific posts extremely easy.

The homepage (and several other pages) use special page-templates to dynamically combine elements in a user-friendly way. Just below the navigation menu is the Featured Post section. This area links to the most recent featured (sticky) post with a title, excerpt, and image if applicable. It also includes small links that bring up all other featured posts in a similar manner.

Below the Featured Post section is the Recent Posts section. This shows the ten most recent posts, excluding featured posts. The most recent post is shown in its entirety. Below it, the titles of the nine next most recent posts are listed as well as the number of comments for each.

To the side of the Recent Posts section is what is commonly referred to as a sidebar. The sidebar on the homepage contains social networking icons, another search box, a list of categories (each showing the number of posts within), and a tag cloud. The tag cloud was restyled as a list to be more readable. Also shown in the sidebar when applicable is a list of upcoming events based on the event calendar.

The news page (as well as all the category, tag, and archive pages) follows a standard blog layout. The sidebar on these blog-related pages contain social networking icons, categories, five most recent posts, five most recent comments, monthly archives, other links of interest, and the tag list. However, when viewing a blog post on its own page, the post is centered without a sidebar to enhance readability.

Near the bottom of each page is an area commonly called the footer. The footer contains several lists of various links to help retain the readers attention after reaching the end of an article or the bottom of a page.

Responsive Layout Design

Last but certainly not least is the responsive layout design. What’s that, you say? Responsive layout design means that certain page elements are modified to behave a certain way when viewed at a certain screen size. For instance, the width of the site gets smaller as the screen size is reduced. When the screen size gets small enough, there isn’t enough horizontal room for the sidebar so it moves down below instead of forcing a horizontal scroll. Many other elements are shrunk, altered, or moved at various screen sizes. This helps create a much better user experience for all potential users, especially for those in the rapidly expanding market of mobile devices.

TIP: If you don’t have a smart phone or mobile device capable of browsing the web, you can see the effects of the responsive layout design simply by resizing your browser.

Check out savethewildup.org to see the web site for yourself.

Chris Pot­ter recently had me redesign his photography web site. The old site was in a blog format and contained his “photo a day” project, where he added a new photo each day for an entire year. For the redesign, he wanted to feature these photos prominently and make it easier to view all 365 of them. I took all of these images and combined them into one slideshow gallery. Then I framed the entire gallery in what looks like a view screen on the back of a camera.

Slideshow

The images are displayed in a slideshow format. Instead of sliding across though, the current image fades out while the next image fades in. Each one is visible for about eight seconds before fading to the next image. There are “previous” and “next” arrows located on the left and right sides of the view screen which allow manual navigation through the gallery.

Thumbnails

There is a small “Thumbnails” button located on the upper right corner of the view screen. This button activates the Thumbnail drop-down overlay. In the overlay, the images from the current gallery are shown as semi-transparent thumbnails. Hovering over them makes the thumbnails fully opaque. Clicking on one will load that image in the view screen. Also, hovering near the left or right edge of the overlay will scroll through the thumbnails at a rapid pace which is very useful in such a large gallery.

Buttons

Another interesting feature of the site is how I incorporated the existing buttons on the back of the camera by assigning them useful functions. They all have gray icons that become colored when hovered over. When clicked, the icons move down one pixel. This helps give the illusion that the button is being depressed.

There are several utility buttons located in the lower right corner. The button with the star icon can be used to bookmark the site. The one with the envelope and pencil opens up an e-mail client and allows a user to contact Chris via e-mail. The button with the heart will share the page on Facebook.

To reduce the initial loading time of the site, the gallery is separated into 12 months. To navigate between each month, there are gallery buttons with left and right arrows located in the upper left.

In order to give it a realistic effect, I paid close attention to detail. The background image of the site (Chris’s night-time photo of a cemetery) can also be seen in the camera’s view finder.

This gallery is just a small example of Chris Pot­ter’s Photography. Look for an expanded site with more galleries in the future, and don’t hesitate to contact Chris for your photography needs.

Check out chrispotterphoto.com to see the web site for yourself.

Tamarack Custom Builders are known for applying sustainable ideas to their custom built homes and remodels. Owner Mike Potts and his talented crew were some of the first in the Marquette area to embrace green and sustainable building techniques. I designed and developed a web site for Tamarack Custom Builders earlier this year. The site includes a blog, a section to showcase the various projects they’ve done, and of course the usual information about and methods to make contact with them.

Some notable features of the site are:

1. @font-face

A relatively new method for including different fonts called @font-face was used extensively to embedded the ArchitectsDaughter font throughout the site.

2. Dynamic Page Creation

The homepage is created dynamically and includes content from three different pages. At the top is the first paragraph from the About page. In the Featured Project section, a link to one randomly selected project and its accompanying images are shown. Because its random, the homepage looks a little different each time it is loaded. The Latest Blog Posts section displays only the most recent blog posts.

On the Projects page, all of the projects are listed in random order. These are added dynamically from the Project sub-pages. Each one includes a link and (up to) three images from each project’s photo gallery.

3. Photo Gallery and Slideshow

For each project, details and a thumbnail photo gallery are provided. A click on one of the thumbnails brings up the full size image in an overlay window where it cycles through the images in the gallery like a slideshow.

4. Content Management

The Content Management System (WordPress) is set up to make it very easy for Tamarack Custom Builders to add more projects and photos in the future.

The site is light and earthy. I used a cream background, brown text, and green links. Also, several shades of green and yellow were used in the sidebar. The section titles on the homepage were rotated –6 degrees to make them more interesting. The navigation links employ unique styles for hover, active, and current page states. The current page state prevents the link from activating and thereby reloading the page.

There are also custom styled date boxes and comment bubbles for the blog posts. All images are given a special border that uses a background image as well as a box-shadow to create crisp frames for photos that seem to jump out of the page.

Tamarack Custom Builders truly care about their work, and their new web site clearly shows why.

Check out tamarackcustom.com to see the web site for yourself.

White’s Party Store now has a web site! Known throughout the area for their personalized customer service, and great selection, White’s is the place to go. White’s is a classic Marquette neighborhood store specializing in quality wines, beers, liquors, and brewing and wine-making supplies. Their new web site includes a photo gallery, historical information about the business, a blog section that will be updated frequently, and many ways to make contact with them.

Along with the web design and development, I also developed their logo and branding, and designed a print ad. I used cream lettering inside a red circle for the logo. For the favicon (or bookmark icon), I simplified this and used a cream double u inside a red circle.

The site is dark, but vibrant and modern looking. I used dark gray backgrounds, cream and light gray text, and vibrant green, red, and blue for titles and links.

They are centrally located in the Village district of Marquette just a few blocks from Northern Michigan University, Marquette General Hospital, and downtown Marquette. For visitors who aren’t familiar with the area, there is an interactive map and step by step directions to help them find the store.

White’s Party Store is a century old, locally owned and operated small business. They take pride in offering locally produced products including the finest Michigan made beer, wine, and liquor. Check out the photos page to get a glimpse of what they carry or subscribe to the RSS feed to stay updated on what’s new.

So, the next time you’re thirsty for a tasty beer (or whatever), do yourself a favor and stop in at White’s.

Check out whitespartystore.com to see the web site for yourself.

Sisu Spine, LLC is an independent distributorship based out of the Marquette area that provides consultative solutions to spine surgeons in northern Michigan and northern Wisconsin. They distribute spinal implants used to treat maladies of the spine including degenerative disc disease, deformity (such as scoliosis), trauma, etc. Their brand new web site is now online and fully functional.

The site is professional, refined, and inviting. It is meant to be used by orthopedic surgeons and neurosurgeons who specialize in spine surgery, medical device companies specializing in spine that are looking for distribution, and prospective employees.

The name of the company represents an homage to the strong Finnish heritage and culture found in the Upper Peninsula of Michigan. Sisu is a Finnish term that can be loosely translated into English as strength of will or determination. The name is very appropriate, as anybody with a serious spinal problem or injury can attest. The color scheme is derived from the Finnish flag, which is said to be inspired by blue lakes, blue sky, and white snow.

The concept for the basic layout and design of the site was formulated by Chuck Goudy, General Manager of Sisu Spine, LLC. Chuck had previously run another spine distributor company and had a very good idea of what he wanted his new site to look like. I took his ideas and developed the site around them, making minor adjustments and augmentations to fine-tune the layout and ensure proper functionality and usability.

Prominently featured on the site is an automated image slider that rotates through several images. It can also be controlled by using the left and right arrows found on either side.

The products page contains a list of featured products, which are links to their respective company websites. The products are categorized according to clinical use so as to be more useful to surgeons.

Special styling was applied to the product images. First of all, they were given a white border and gray drop shadow. The images are also semi-transparent. However, when hovered over with a mouse (or other pointing device), the images become fully opaque and the white border becomes blue.

While I do occasionally suffer from back pain, I’m glad that I’ve never needed a spinal implant. It is reassuring though, to know that local surgeons have access to these devices.

Check out sisuspine.com to see the web site for yourself.

I’m very pleased to announce the roll out of an e-commerce website for Dead River Coffee. They are located downtown Marquette, Michigan and are the area’s premiere coffee roasters. Go ahead, ask anybody. For years, the only way to get your hands on their fresh roasted coffee beans was to drive down to their shop and pick it up. Now this great coffee is available to the world at the click of a button.

The site was designed with stark minimalist intention and a purposeful simplicity to invoke a simpler time. The color scheme consists of only black, gray, and cream. The background is a textured cream color. The logo at the top is the same logo they use to stamp on a plain brown bag before filling it with the coffee beans of your choice. The logo, tag lines, page titles, and all other text are either black or gray.

Embellishments include the prominent use of tag lines in the header and footer, a large ring-shaped coffee stain in the upper left of the header, a custom coffee cup with coffee stain under it that separates the footer from the content of each page, and the one pound and half pound bags full of beans that overlap the photos on the product pages.

Also featured is a horizontal drop down navigation menu located under the header, a three-column layout for the main page, and beautiful black and white photos scattered throughout the site.

WordPress was used as the CMS. Several things were made possible by this including movable modules and dynamic content on the main page. The movable modules are actually text widgets that can be easily rearranged or exchanged in the administration panel of WordPress. Some of the content on the main page is added dynamically by pulling content from the “About” page and the “Order” page. Also, there is blogging functionality. The posts gets displayed in the “latest news” section.

I used some CSS styling techniques to make adding new photos easier. New photos added to the main page are automatically re-sized to match the width of the columns while still retaining their original ratio. Also, a thin dark border is added to all photos for consistency.

Last but not least, this is a fully functioning, fully integrated e-commerce site. The ordering process works precisely as one would expect. From each individual product page, or from the main order page that lists all products, a visitor can select one-pound or half-pound as the size and hit the “add to cart” button to begin the ordering process.

A shopping cart opens up as a modal window and displays all items in the cart, quantity, price and subtotal. It allows the visitor to modify the quantity, and displays an updated price and subtotal. By pressing the “check out” button, the visitor is taken to the “check out” page which is fully integrated with the same look as the rest of the site.

From here, the visitor can securely enter their private information. After filling in the “City”, “State”, and “Postal Code” fields, shipping is automatically calculated and a new total is displayed. By clicking “confirm your order” the transaction is sent to be processed and the visitor is shown a receipt page they can print for their records. An email receipt is also sent to the visitor.

The layout was designed to be flexible and allow for growth of content in the future. The site is being maintained by Theo at Dead River Coffee so bookmark it and check back often for updates. Seriously, if you like fresh roasted coffee beans, this is the place for you!

Check out deadrivercoffee.com to see the web site for yourself.

The latest site design I’ve completed was for Living Jukebox DJ Service. They are a Mobile DJ Service providing music entertainment for wedding receptions, bars, clubs, private parties, anniversaries, company picnics, etc. Based out of Plymouth, Wisconsin, they serve the entire Sheboygan area and beyond.

The site is dark, modern, and professional. I used a dark gray for the background color and various shades of gray for the background of graphics in the header and footer. The name of the business uses the Alba Super font, while the rest of the site uses the sans-serif font Verdana. The only exception is a call-out paragraph near the top of each page that uses the serif font Georgia.

Several colors were use for copy including off-white, and subtle shades of gray and gold. Links are colored light-blue so they stand out more. I paid a lot of attention to the style of the typography to make it visually interesting and easy to read.

The copy is complete, but there are currently no photos on the site. The layout was designed with a space for images on the right side. The site is being maintained by Dan at Living Jukebox DJ Service and should have some photos soon.

Check out livingjukebox.com to see the web site for yourself.

Revolution Healing and Martial Arts LLC was formerly known as Breathe Radiance and was located in Marquette, Michigan before relocating to Appleton, Wisconsin. Parnee has expanded her existing services of massage therapy and breath work to include an herbal sanctuary and martial arts classes.

I designed a web site for Breathe Radiance last year, but with the relocation and re-branding of the business, a completely new one was necessary. The name Revolution Healing and Martial Arts LLC comes from a quote by the founder of Cuong Nhu, O’Sensei Ngo Dong. He said, “Start the revolution within yourself,” and Parnee took that to heart.

The new site is dark, minimalist and modern. To brighten it up a little, I designed a custom graphic that resembles a super nova, or maybe the inside of an atom. This is meant to highlight the micro-macro connection between the energy of the atoms within us all, and ancient stars exploding in space.

The site features a drop-down navigation menu, a quote bubble on right side, and subtle background texture.

The content isn’t all there yet, but it’s getting close. The site is being maintained by Parnee at Revolution Healing and Martial Arts LLC and should have some photos and more information on offerings soon.

Check out revolutionhealingarts.com to see the web site for yourself.