Aaron Kippola shares his musical endeavors

Aaron Kippola is a multi-talented musician who is known for his saxophone, guitar, drums, and more. He is currently working on several self-produced albums on which he sings and plays most of the instruments. Several years ago, I designed a logo for him and began work on his Album Covers. I also created a simple splash page in lieu of a proper website. After a long wait, I’m glad to announce the launch of his new site aaronkippola.com.

Design

Color Scheme & Layout

The site uses the same gray, white, and green color scheme as his logo. In fact, the logo is a key element in the minimalist site design. It stands out from the gray background in the upper left corner of the site. The layout is familiar with a horizontal navigation menu below the logo. Main content is on the left and a narrow sidebar is located on the right.

Boxes, Borders, & Backgrounds

Boxes with thin, white borders act as a unifying element throughout the design. The boxes surround regions such as the navigation menu, sidebar widgets, as well as individual page and post content. The separating effect of the boxes is increased by the creative use of subtle background images. An image of a stage floor with sprawling cables serves as the background for most pages. However, the contact page is bit more personal with a large image of Aaron faded into the background.

Webfonts

Embedded Webfonts are utilized for the navigation menu and widget titles. This allows for easy updating of widgets and menu items without having to create new graphics each time. Page titles use an image replacement technique to include graphical embellishments.

Content

News Updates & Blog Posts

Using WordPress as the Content Management System, Aaron Kippola can keep his site fresh by easily publishing his own dynamic content at will. The News page, which is also the home page, is where Aaron will keep us up to date on his musical endeavors including the progress of his recording projects and other important milestones. If you’re interested in learning more about Aaron on a personal level, his blog is the place for you. Here, he’ll share his thoughts on the music industry, review some gear, and maybe even rant about a thing or two.

Photo Gallery

The Photos page shows five thumbnail images from each of Aaron’s galleries. It also provides a link to each gallery. On the individual gallery pages, thumbnails are shown. When clicked, full-size images open in an overlay window. They open as a slideshow by default, but can be manually navigated as well.

Music

There’s no music on the site yet, but Aaron’s first album is in the mixing stage so it shouldn’t be long now. He plans on having free samples to listen to, and songs & albums available for purchase. Along with the music, he will also provide lyrics for all the songs. Eventually, he’ll add a calendar to promote upcoming gigs so you can see him perform and hear his music live.

Check out aaronkippola.com

Web Design Marquette, MI | Middle Ear Media - Creative design studio & web agency

Custom Guitar Pickups by Instrumental, LLC

Instrumental is a small, high end electro-magnetic transducer company that designs and manufactures custom transducers for small guitar companies. In other words, Instrumental makes guitar pickups! This is the first client site to utilize (a slightly modified version of) my new WordPress Theme MEM Core.

The Instrumental web site benefits from all the built-in goodies of MEM Core such as responsive design, custom nested drop-down menu, customizable header, customizable background, multiple widgets in sidebar and footer, threaded comments, automatic link icons, and beautiful web fonts.

The color scheme and fonts have been modified to fit with the Instrumental brand. Also, a custom page template is used for the products page so it pulls content from the individual product pages and links to them. The individual product pages are set up with an image thumbnail gallery at the bottom of each. Clicking on a thumbnail brings up the full-size image in an overlay window that acts as a slideshow and cycles thru all images within that gallery, but also allows manual navigation.

It is vital that Instrumental’s products can easily be purchased online. So, I implemented a simple yet effective e-commerce solution. Each product page has an “Add To Cart” button. When clicked, it brings the user to the checkout page, also known as the Shopping Cart. From here, they can add or remove items, change quantity, and when they’re ready, click the “Check out with PayPal” button. This button brings the user to a PayPal order form where the payment transaction takes place. The Shopping Cart also shows up in the sidebar after the “Add To Cart” button is clicked.

Check out Instrumental

Web Design Marquette, MI | Middle Ear Media - Creative design studio & web agency

Tai Chi Healing Music is a great way to relax

It’s been ten years since I began this project. I guess it’s time to start promoting it. Tai Chi Chuan is an internal Chinese martial art that helps develop agility, balance, relaxation, and much more. As a musician, I wanted to find a way to combine my passion for music with the healing power of Tai Chi.

In 2002 I recorded Tai Chi Healing Music Volume One. After receiving such a great response from the first album, I began working on another installment and released Tai Chi Healing Music Volume Two in 2004.

I use a number of natural instruments to create a unique sound. These recordings feature such instruments as, Libaphone (melodic bamboo percussion), Kalimba (thumb piano), Pan Pipes (bamboo wind), Rain Stick (cactus), Shakere (gourd with netted beads), Hawaiian Drum (gourd), Conga, Doumbek (ceramic drum), Flute, Wind Chimes, and more.

The gentle earth rhythms and profound spirit melodies found in this music are meant to help induce a state of meditation in the listener. Perfect for Tai Chi, Qi Gong, Yoga, and Kung Fu. It can be used by anybody (artists, writers, etc.) for inspiration or relaxation.

In 2009 I registered a domain name and began working on a web site. It’s taken me three years, but it’s finally done. The site is very simple with basic info and contact form. The main attraction is the music. For each album there is cover art, a short music sample, and a “buy now” button. Clicking on the button brings you to a PayPal checkout page.

Hopefully, by offering free audio samples and making it easy to order, I can spread my healing music around the world and enrich the lives of many more wonderful people.

I’m currently thinking about starting work on Tai Chi Healing Music Volume Three, so there should be even more music to choose from soon.

Check out Tai Chi Healing Music

Web Design Marquette, MI | Middle Ear Media - Creative design studio & web agency

Free WordPress Theme “MEM Core” released

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 free WordPress 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, and completely free WordPress 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: Free WordPress Theme

Web Design Marquette, MI | Middle Ear Media - Creative design studio & web agency

Why DIY Websites are a bad idea

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.

Web Design Marquette, MI | Middle Ear Media - Creative design studio & web agency

Protecting the Upper Peninsula from unsustainable development, degradation and dangerous contamination

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

Web Design Marquette, MI | Middle Ear Media - Creative design studio & web agency

Chris Potter shares his Photo a Day project

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

Web Design Marquette, MI | Middle Ear Media - Creative design studio & web agency

Tamarack Custom Builders get a custom designed website

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

Web Design Marquette, MI | Middle Ear Media - Creative design studio & web agency

White’s Party Store, a true Marquette original since 1947

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

Web Design Marquette, MI | Middle Ear Media - Creative design studio & web agency

Sisu Spine provides consultative solutions to spine surgeons in northern Michigan and Wisconsin

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

Web Design Marquette, MI | Middle Ear Media - Creative design studio & web agency