Our Process

Featured

Posted on February 13, 2012 by mkoenen

Your needs and an appropriate business solution that fits the culture of your organization are at the heart of our process. We first look to understand the philosophy of your organization to put the problems we’ll be addressing into proper perspective. Before designing a particular solution, it is critical to properly identify the problem to be solved, the goals you wish to reach and the metrics we’ll apply to measure our success. As we work through an iterative, incremental approach we’ll provide you with feedback at each step of the way, so that we can adapt when you discover needs that were not apparent at the outset of a project.

Our process has grown out of a quarter century of direct experience with consulting, training and software product development. While we emphasize the importance of requirements gathering, we avoid analysis paralysis by employing the principles embodied in Agile approaches and the Lean Startup Methodology of creating a Minimally Viable Product as early as possible to get user feedback that guides appropriate pivots in a our plan.

Use Google AdWords Advertising for Data Driven Design and Strategic Planning

Posted on May 1, 2013 by drron

Your strategy choices and design decisions should be data driven. Here is an inexpensive way to get started with a new web site that is not yet getting much traffic. You need to formulate hypotheses about your target audience and then be able to collect real data to test those hypothese and thus drive the direction of your strategy and design.

Before you invest a lot of money in either development or advertising, you should do some hypothesis testing. With Google AdWords you have complete control over your budget and you can target who sees the ads, e.g. geography and your choice of keywords. After you have made a small purchase of AdWords you’ll be able to use Google Analytics to observe the behavior of site visitors based on how you have configured the demographics you’re experimenting with and of course you can do A/B testing, e.g. comparing the effectiveness of two different wordings of your message on conversion rates.

Navigation for Mobile

Posted on February 20, 2013 by mkoenen

The navigation bar often becomes an issue when creating a responsive theme. As the width of the browser window shrinks it gets harder to fit it across the top, and the text and clickable area get smaller and smaller. If we keep them large and organize the navigation tabs in columns they push the content down. There is an alternative, however. We can place a simple menu button at the top. Click it and it expands to reveal the menu tabs. Click it again and the navigation items disappear Continue reading →

Custom Post Types

Posted on February 12, 2013 by mkoenen

Setting up Custom Post Types | Setting up Custom Fields | Templates

Setting up Custom Post Types

I was recently asked to create a custom post type for members of an association. Each member should be able to enter various kinds of information about themselves. Parts of this information would be pulled into other pages.

I will give a summary of what I did to accomplish this. If you need a more in depth tutorial read Justin Tadlock’s excellent article.

In order to create the custom post type I first created a folder in the ‘plugin’ section named ‘Partner Custom Posts’. Inside the folder I created a php file with the same name where I wrote all my code. The plugin needs to be activated in the plugins area of the dashboard.The code could also go into functions.php instead.
Continue reading →

Good web design is much more than graphic layout

Posted on February 12, 2013 by drron

What do you think a designer does? Designing for the Internet involves lots of levels that should be worked through. Many people start with visual design, because that is what non-technical people can see. And, of course, there is a benefit in quickly creating a visual design and easily having something to talk about. However, there is a lot more to consider in web design and the book “Elements of User Experience” by Jesse James Garrett is a classic in describing the different types of design that enter into a project.

The diagram below (from the book) illustrates stages we work through with clients, as we are providing a complete suite of services from design through implementation. Often, because what should really be the last step, the “visual design,” is the easiest thing for a client to think about, the other steps get skipped or only thought about later, after the site that looked cool ends up not meeting the business needs.

Time starts at the bottom and as you traverse the planes from bottom to top, the “experience design” artifacts that get produced go from abstract to concrete.

From the book “Elements of User Experience” by Jesse James Garrett

Good design requires understanding the objectives of a site in meeting user needs. Content Requirements outline “what” needs to be included in a site. Functional specifications outline the things we want people to be able to do with the content, e.g. download a white paper. Information architecture describes how information should be organized. WordPress offers categories, tags and custom taxonomies for organizing content. Interaction design describes how we’d like people to be able to use the information we have organized. For example, a bicycle tour finder web site would have a goal of helping site visitors to find a bicycle tour they want to take and book a reservation. The information architecture could include a taxonomy for geography, e.g. continents, countries, regions, cities, neighborhoods. Another taxonomy could include types of activities to do while on the tour, e.g. types of food, historic sites, musical performances, etc. Interaction design might then combine a way for a visitor to filter search results based on combining the places where you might want to go with the things you’d like to be able to do as you stop at various locations on your bike tour.

A really great visual design would need to know a lot about the things outlined above. At LoudFeed we do “Information Design” using tools to record these abstractions as part of a dialogue with a client. The artifacts of this dialog enable us to sketch a “user experience” that provides a blueprint for a web site that could be implemented with many different types of a visual design look.

A danger of only doing visual design first is the imposition of contraints on what could be implemented to meet a clients needs. Especially if the visual designer is not fully aware of extensive code libraries for addressing various client needs, then the costs of development can get out of control. This is because sometimes a visual designer comes up with a cool looking design that requires extensive custom coding. When people ask me whether we can implement something in software I answer that we can do anything with two constraints: (1) time and (2) money.

So if you want to save time and money, thinking about user experience design provides the visual designer with information they should have to give you the best possible results. At LoudFeed, visual design is one of the services we provide, but we often work with other visual designers, especially if that designer has a lot of experience in a particular space or a pre-existing relationship with a client.

Drop Shadow with Transparency

Aside

If you use CSS3 dropshadows you can specify the color with a hex-number, but if you need a transparent shadow, use this:

box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
   -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
   -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);

One Site, Two Themes, One Login

Aside

I have not tested this, but here is a good description of how to use two themes for a site and how to create one single login for both WordPress installations:
http://wordpress.org/support/topic/multiple-themes-one-site

Making Layout Easy With Box-sizing

Posted on January 14, 2013 by mkoenen

The default CSS box model can be tricky to deal with. The ‘width’ of a box does not include the padding or borders. Those are actually added on to the declared width to make up the final width of what you see in the page. So if you want a box to span half the page and you simply give it a width of 50% and then a padding of 20px, you end up with something wider than half the width of your page. Now you could do some math to figure out what percentage width you need to declare to make your box and padding span half the width of the page … or you could use the box-sizing property.
Continue reading →

JQuery Tabs Not Working

Posted on December 15, 2012 by mkoenen

Adding jQuery tabs to a website doesn’t seem all that hard – until you run into an unexpected problem.

First you need to go to the jQuery website and find the source code on the tabs page. Make sure that you copy the html into your page. Grab the bit of javascript in the script section and paste it into a .js file in your js folder. Then open your functions file. Since WordPress already includes copies of jQuery and jQuery-ui you don’t need to download them. Just enqueue them like this: Continue reading →

Is_home: Conditional for Blog Page

Aside

It is counter-intuitive, but yes, you have to use is_home if you want to refer to your blog page in a conditional – even if the blog is not in your home page.

Lets say you want to add a different image to the header only on your blog page. You would write something like:

1
2
3

if ( is_home()) {
    <img class="header-image" alt="" src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/images/myimage.jpg" />
}

What I would call the ‘home page’ is actually called the front page, as in ‘is_front_page()’.

Remove Unwanted Profile Fields

Aside

Below is the code you would use to hide unwanted Profile fields.

add_filter('user_contactmethods','hide_profile_fields',10,1);
 
function hide_profile_fields( $contactmethods ) {
	unset($contactmethods['aim']);
	unset($contactmethods['jabber']);
	unset($contactmethods['yim']);
	return $contactmethods;
}