The plan was to add Quicksand to the team page of our website, which is a great place for this type of application.

Smooth Shuffle

The idea behind Quicksand is to create an easy transition between sets of data that overlap at some point.  This seemed perfect for our team page because some of our employees work in more than one department, and it is very hard to visually represent that type of overlap in an easily understandable way.

I set up Quicksand on the team page so you can choose from six different categories, and the pictures for everyone in that category will shift over into a smaller group.  The shifting effect is really where the beauty of the plugin is, with each picture sliding smoothly into place.  Most of the work I put in to this project involved making sure all of the data groups were correct and making sure the site worked properly in all of the major Internet browsers.

Results

Everyone has been really pleased with how the team page turned out, and I think it makes sorting through our staff here much easier for visitors and clients.  This plugin has helped reshape our website and avoid navigation problems as we hire new people and the Mudbug Media team continues to grow.

Click here to see Quicksand in action on our team page.

While turning to the internet for most purchases can help you avoid the pitfalls of shopping centers, a poorly designed or unsecured online checkout can be much worse than standing in line all day.

Every ecommerce site should pay close attention to its shopping cart and checkout functions, and with tons of open source and subscription options available, there’s no reason to ever have a problem checking out online.

Open for Business

When the Mudbug Media team first started working on an ecommerce site for local lifestyle bag manufacturer Hadaki, the first thing we looked at was how to improve their shopping cart feature. 

After comparing the merits of nine different services, both open source and subscription, we settled on OpenCart, a PHP-based online shopping cart system.  It turned out to be a perfect blend of form and functionality with all of the security features we were looking for.

OpenCart already has persistent form validations built into the software to protect against database injections and cross-site scripting attacks, giving you a built in level of security, but we decided to go one step further.  To make sure all transactions are secure, we used a secure socket layer protocol during checkout so all information remains private.

Checking Out

Over 50 percent more visitors have checked out Hadaki’s site since we revamped the shopping cart, and more visitors generally translates to more sales.  Word of mouth matters in the ecommerce world, and if people are having trouble checking out or if they feel shaky about typing in their credit card number, online sales will quickly plummet.

By paying close attention to every step of the online shopping experience including the checkout, retailers can make sure customers end up glad they went online in the first place.

I really think open source is the way to go when it comes to shopping carts.  A project or application being brought into open source will need to have solid standards already implemented.  Open source also means that people, most likely the ones actually using the program, are constantly making updates, so you end up with very user-friendly upgrades, and that’s half the battle.

OpenCart is also highly customizable, so it’s really easy to seamlessly blend the shopping cart into the rest of the site.  This creates a continuity of service that allows customers to easily navigate through the complete shopping experience.

Web developers and programmers have the tools and skills to update websites themselves.  If you aren’t planning on going back to school and need to make frequent updates to your site, you may want to consider using a content management system.

Content management systems have become increasingly user friendly and allow you to organize your website in such a way that it is accessible to everyone.  The trick is finding and implementing the correct CMS for your needs and budget.

What is a CMS?

If you have a website or you are thinking about hiring someone to create a website for you, it’s because you have information you want to put out there. That’s the first step.  What comes next is deciding how you want your information to be presented.

A content management system allows the website owner to control what the website looks like without first having to get a degree in web design or programming.  A CMS organizes the different types of information on a site, allowing for regular and easy updates through a user-friendly interface.

Do you need one?

If your site is purely informational and doesn’t require constant updates, you can probably get away without using a CMS.  Some law firms, for example, are perfectly happy with a website that features basic information such as who they are, their specialties and where they are located.

Other law firms may want to highlight their views on the latest legal news and important cases they won or that may affect their clients.  In that case they would probably need access and control of their site instead of having to request updates through their web developer.

That’s where a CMS comes in.

Choosing the right CMS for you

The most important thing about a CMS is making sure that it is the right fit for the site it manages.  Too many web development companies learn one CMS and then try to shoehorn every single client into that system regardless of the client’s needs.  This saves time and money for the developers because they get to be lazy and not keep up with emerging systems and it is seen as a way to keep the clients out of their hair since they will be in charge of their own updates.  The problem with that is the client ends up saddled with an expensive CMS they either don’t need or can’t use because it isn’t designed to do what they need it to do.

Here are three of the many systems we use and recommend:

WordPress – This is the CMS we use for MudbugMedia.com.  It’s great for a site that might have five or six static pages that don’t change very often, like our “About Us” and “The Team” pages, and a few that change on a much more regular basis like our blog.  Another good example of WordPress in action is the site we designed for Ursuline Academy.  The site allows school officials to easily update the site with current events, weekly updates and school wide reminders for the students.  This CMS really pays off if you are interested in blogging and/or disseminating a large amount of information to a widespread audience.

ExpressionEngine – ExpressionEngine can be seen as a step up from WordPress.  While both are convenient and easy to use, ExpressionEngine allows for more dynamic content.  The website we help update for Ochsner Health System is run by ExpressionEngine, which allows them to easily manage multiple web pages.  If you check out the locations page on the main Ochsner site, you will be presented with a plethora of information.  Ochsner can go in and change the details for each location to ensure visitors to the site get exactly what they are looking for.  This would be a much more tedious process in WordPress, but ExpressionEngine allows for this kind of optimization through the admin site, making it much easier to make multiple changes at once.

Drupal – The larger a site gets, the more difficult it is to manage information on the site.  Drupal is designed for large sites that feature dozens of pages of individualized content.  The Audubon Institute website is a site we have worked on that uses Drupal.  There’s a lot going on with the site.  With more than a dozen locations throughout the New Orleans area, the Audubon Institute’s website faces the challenge of presenting a ton of information in a clear and easily understandable way.  Drupal allows site administrators to go in and monitor each page’s content and mix in a variety of different dynamic elements.  While WordPress and ExpressionEngine typically do not require much training in order for the average user to master the updating process, Drupal is more involved but can really pay off for larger sites.

Adding a CMS into a project estimate definitely ups the initial cost.  That’s why we make sure that you need a CMS and if you do, we pick the CMS that’s right for you and gives you the biggest bang for your buck.

In the end, there are two major ways to implement an application for a mobile device:

• As a mobile web app (Translation: As a web-page that is designed to be viewed on a mobile device) (e.g. mw.weather.com)
• As a device-specific application (Translation: As an iPhone/Blackberry/Android/whatever-specific application) (e.g. anything in the iTunes App Store)

Mobile Web App

A mobile web app is, at it’s core, a webpage or script, living on a server that you control.  This offers a number of advantages and disadvantages.

On the up side, it can be used by any device that has a working web-browser (indeed, you can set the tool up to work on desktop computers just as easily as on a mobile device).  And because the application lives on a server you control, updating the application is incredibly easy – update the local copy, and you have updated the application for all of your users.

On the down side, the application needs a connection to the Internet (because it’s a web-page), and is limited by the speed of your connection to the Internet (which on a mobile device can mean that your data is traveling by digital mule-train).  Some of the speed issues can be mitigated through the use of dynamic web-page technologies such as javascript, which can help reduce the amount of data that is being transferred (because you can download the core once, and then dynamically update only the information that you need), but some devices (notably Blackberries) have limited or non-existent support of dynamic technologies such as javascript.

Device-Specific Application

A device-specific application is an application built to be downloaded to and run specifically on a particular type of device.

The single biggest benefit of this is that you no longer need the Internet to use your application.  This means that your app will be able to work even in those hard to reach areas (because it’s on the device, not the internet) and your application will be markedly faster (because you are no longer waiting on the internet to provide the information).  Additionally, you can more readily take advantage of device-specific features, such as GPS, camera, and microphone (should you want them).

The core problem with building an application for a specific device is that the application is device specific, meaning that you will have to build additional versions if you want to support additional types of device.  A further issue is that distributing updated versions of an application to your team is more complex than in a web-app form (for starters, your team will have to download the updated app to their mobile device).  Finally, while most of the application development and distribution systems are free, Apple charges $100/yr or $300/yr for the privilege of creating applications which can be distributed in-house (ad-Hoc, limited to 100 iPhones on the $100 plan, or Enterprise Distribution to an unlimited number of iPhones on the $300 plan).

So What Is Best For You?

In the end, this is going to come down to you, your wants and your needs.  A couple of rules of thumb can apply though.

If you have to support a wide variety of devices, it will probably be more cost-effective to create a mobile web app.  However if performance matters, creating an application that runs on a specific device will provide a marked improvement in speed and reliability.

If you are dealing with dynamic data – data that will probably have changed every time that the user starts the application (e.g. weather data) – having a mobile application on the device will only provide a marginal performance advantage (since the app will have to download the new data every time it starts up).  If the application deals more with relatively static data (e.g. reference material), a device-specific mobile application will provide much better performance.

Better idea? Make it mobile. Dynamic content is why web browsers entered the mobile arena. Also, wherever an emergency occurs, someone has a cell phone in a pocket or purse. You don’t have to walk away from someone who’s injured or wait for a computer to wake up. Instant info gives instant help.

The trick to building effective mobile versions of existing web pages is to cut out everything except what people need for mobile use. For Ochsner’s ER page, we focused on the widget and minimized images to provide a quick-loading page with exactly the information needed in case of an emergency. We kept the address, phone number, hospital photo and link to Google Maps for directions.

The Google Maps integration works with any mobile browser. On an iPhone, clicking “Map it with Google” loads the Maps application and gives you directions. On other mobile phones, Google Maps loads within the page. Either way, you’re on your way.

We’re hoping you never actually need this particular feature. We’d like it to go entirely unused. Just in case, though, bookmark ochsner.org/er on your mobile browser so you can check wait times without any hassle or delay.

Let’s be careful out there.