Never before has cross-platform consistency been so crucial. As a result, I’ve noticed more and more websites pulling elements from mobile app interfaces and incorporating them into their designs. The explosion of responsive is pushing websites toward a mobile friendly structure in order to create a seamless transition from web to tablet to mobile. Perhaps this is also due to the ridiculous amount of people surfing the net with their phones. TechCrunch predicts that mobile will become the dominant global internet platform in 2013. As a result, the population is becoming more accustomed to mobile interfaces as opposed to websites.

The following outlines some pros and cons to mobile elements in web design:

1. Hidden Navigation

The ability to hide and show your navigation is becoming very common on websites. Three simple horizontal lines has become universal for the “menu” icon indicating that there are more options for your user. One of the biggest benefits to this feature is that it saves space. It allows you to utilize that big dynamic image without distraction and lets you use the same menu design when transitioning to different devices. Incorporating interesting transitions give a unique and modern feel to your site. However, it isn’t always an effective method of displaying your navigation. Some users will not instantly recognize that the icon will open your navigation. Users should not be forced to learn how to find the next page they are looking for -- it should be obvious. Intuitively navigating information is arguably one of the most important elements of a website so it can be risky to tamper with.

Image Source: www.paperandpaint.dk

2. Flat Design

We used to live in a world with gradients galore, every element casting a shadow, texture on texture, and those lovely bevels. This supposedly flashy approach no longer wows it’s visitors. A simplified and classic aesthetic has won over these artificial design techniques. Trends are moving toward solid colours, clean layouts and sharp typography. This type of design translates well to mobile devices. With such a little screen you need big flat blocks of content that are easily navigated. Decorative textures and artificial effects provide little significant value to the purpose of a layout. Although you’d think losing these flashy effects would make it difficult to design buttons and links that “pop”, there are many effective ways to do so with bright, contrasting colours. This minimalistic approach actually emphasizes usability. The bottom line is that simple images convey messages more quickly than complex visuals.

Image Source: www.builtbybuffalo.com

3. Simplistic Icons

Many sites are dropping navigation type in favour of icons. Quirky illustrative elements are visually pleasing and simplify navigation in terms of messaging and the amount of space they take up. They also break up the enormous amount of copy some sites provide, which gives your viewer’s eyes some relief. Icons allow for seamless menu integration if you are building a responsive website thanks to their scalability and simplicity. As I previously stated, easy navigation is imperative in creating a successful user experience. Icons for primary navigation only makes sense if it’s obvious. Be careful that you’re using images that display a message universally. It is easy to think your illustration is showing personality, but it could be confusing your users. Using a hover effect with explanation copy can help, but suddenly your clutter-less design is crumbling.

Image Source: www.jacksonvilleartwalk.com

4. Large Typography

In the past a common point size would be 12-14, but more recently websites are moving toward 16-18 for their body copy. Large copy commands attention. If you want to get a point across, using big type will do that. Using various fonts in different sizes is opening the door to beautiful typographical artistic websites. No need for photos or illustrations if you know what you are doing with your font book! This technique translates well onto mobile devices allowing easy read-ability on smaller screens. Just be careful… if you have a heavy content website you walk a fine line of becoming obnoxiously long.

Image Source: www.gummisig.com

5. Modular Layouts

Using a grid-like system of organizing web content has been gaining popularity. Perhaps due to the massive success of tiled websites like Pinterest. Even the new Windows 8 platform utilizes this approach. These layouts are very flexible, making it easy to change the look and feel of your site without changing the layout. They are arguably the most effective structures for responsive websites. The module chunks of content allow for fluid repositioning, easily transitioning to a stacked format. Although grids can support innovative design, it can also be argued that it restricts creativity and is a little boring. They can make designers feel trapped within the borders of boxes. It’s not effective for all websites so choose the approach carefully depending on your content. It is perfect for portfolio or inspirational image-based websites.

Image Source: www.etchapps.com

Conclusion

There is sure to be growing pains as mobile devices explode in popularity and we dive into the world of responsive design. It seems like we are on the right track to figuring out how we can utilize similar design techniques across all platforms in a cohesive, sophisticated, and (most importantly) user-friendly way. I predict that we will continue to see the lines blurring between desktop and handheld device design.

Every Wednesday we share a new infographic, showcasing a different topic within the world of eCommerce. Infographics are a great way to soak up a ton of interesting data in a visual way, and since we enjoy them so much here at Demac Media, we thought we’d share! This week’s choice shows you 10 Ways to Increase Online Sales. Check it out below!

(click on the infographic for a larger resolution)

Source: Under 30 CEO

Here at Demac we have a few clients now that enjoy using Business Vision Essentials (BVE). It’s a full fledged ERP system and it’s pretty robust in what it can do. Between Business Vision and Magento we can sync inventory, price and sales. That’s just the short of it. It doesn’t sound like a lot, but there is a lot happening in those three sects of an ERP system. But before that, we need to connect to your remote Business Vision Install.

Connecting

Before writing any code you’ll need to get your hands on the Pervasive ADO.NET Provider and add the reference to your project [Pervasive.Data.SqlClient]

Once this has been referenced it’s time to start coding!

To start off -- the connection string:

var connectionString = "Server Name=[ip address];Database Name=[Physical directory of database]"

In best practice it’s good to put variables such as connection string in a file that’s much more open to editing (ie app.config).  There may be times where you need to change the connection on the fly and it’s really handy to have this easy to edit without needing to edit your code and recompile.

“But security!!!” I hear you scream. Don’t worry, your server has a strong firewall and ip-blocking with your staging and production server ips whitelisted, right?

Pretty self explanatory.

After this, veterans of connecting to MS SQL through C# will find the rest of the code to be eerily similar.

var conn = new PsqlConnection(ConnectionString);
var cmd = new PsqlCommand();

To those new to Pervasive Sql and MS SQL this may seem a bit confusing so I’ll explain. The PSsqlConnection variable is ONLY used for opening the connection. Once the connection is open…

conn.Open();
cmd.Connection = conn;

the PSqlCommand takes over the connection. The PSqlCommand is what is used to execute any queries you want to pass. PSqlConnection is only used to open the connection. However, it’s important to be aware that the presence of this variable is still important. These two variables work in tandem with each other. If you .Close() the connection the query won’t execute.

An important argument to set on PsqlCommand is the CommandType

cmd.CommandType = CommandType.Text;

This tell Pervasive what kind of command you’re actually sending to it. You’ve got three options in this enumerable.

CommandType.Text;
CommandType.StoredProcedure;
CommandType.TableDirect;

In most cases you’re likely to use Text, which is just passing in your average query.

One other argument you may use is setting the Parameters

var exampleParameter = new PSqlParameter("@ExampleParameter", "Parameter Value");
var exampleParameterTwo = new PSqlParameter("@ExampleParameter2", "Another Value");
cmd.Parameters.Add(exampleParameter);
cmd.Parameters.Add(exampleParameterTwo);

The order in which you add your parameters is crucial, I’ll explain why below.

Let’s say you need to insert these two values into a new row in a table called ExampleTable:

var psqlQuery = "Insert Into ExampleTable ( ExampleColumn, ASecondExampleColumn ) Values (?,?)"

Whaaaaaaat? What? What is this… this trickery?

Yes this looks extremely confusing, but it’s actually quite simple. To see the bigger picture let’s recap all our code that we’ve used so far. I’m also going to add one more line of code that will complete the picture.

var connectionString = "Server Name=[ip address];Database Name=[Physical directory of database]"
conn.Open();
cmd.Connection = conn;
var conn = new PsqlConnection(connectionString);
var cmd = new PsqlCommand();
cmd.CommandType = CommandType.Text;

var exampleParameter = new PSqlParameter("@ExampleParameter", "Parameter Value");
var exampleParameterTwo = new PSqlParameter("@ExampleParameter2", "Another Value");
cmd.Parameters.Add(exampleParameter);
cmd.Parameters.Add(exampleParameterTwo);

var psqlQuery = "Insert Into ExampleTable ( ExampleColumn, ASecondExampleColumn ) Values (?,?)"

cmd.CommandText = psqlQuery;

As you can see PSqlCommand is the control center for your query. In this class we have:
1) The connection class (already opened)
2) All your parameters you’re passing through
3) Your Sql Query

To explain the odd question marks used in the sql Query, the ?’s actually represent what PSqlCommand is holding in its Parameters argument. This is why it’s so crucial to make sure you add your parameters in the correct order.

What’s left to do?
Execute the query!

var result = cmd.ExecuteNonQuery();

This returns a datatype of int.
Now that all that hard work is done, it’s time to let our PSql Classes take a rest.

cmd.Dipose();
conn.Close();
conn.Dispose();

This is actually a very crucial and often overlooked step. If you never close the connection, it remains open, if your connections are remaining open… well… find out for yourself if you’d like, but it’s nothing short of trouble.

Now what if a big error occurs during the preparation or execution of your query? Will the connection remain open?? Yes. It will. Don’t worry, I’ve got your back.

var connectionString = "Server Name=[ip address];Database Name=[Physical directory of database]"
var conn = new PsqlConnection(connectionString);
try
{
	conn.Open();
	cmd.Connection = conn;
	var cmd = new PsqlCommand();
	cmd.CommandType = CommandType.Text;

	var exampleParameter = new PSqlParameter("@ExampleParameter", "Parameter Value");
	var exampleParameterTwo = new PSqlParameter("@ExampleParameter2", "Another Value");
	cmd.Parameters.Add(exampleParameter);
	cmd.Parameters.Add(exampleParameterTwo);

	var psqlQuery = "Insert Into ExampleTable ( ExampleColumn, ASecondExampleColumn ) Values (?,?)"
	cmd.CommandText = psqlQuery;
}
finally
{
	cmd.Dipose();
	conn.Close();
	conn.Dispose();
}

This is only the beginnings of learning PSql. PSql has very set and defined tables and columnnames that interact with its frontend to deliver the data. We here at Demac, have built out robust methods and classes that help us efficiently getting integration up and running efficiently between our systems. Every client has a different need however, and we’re always ready to tackle the next big challenge.

We’re excited to share yet another Magento Enterprise site launch with you, this time for Books for Christ.

Books for Christ (BFC) serves the Christian community in Canada by providing an array of Christ-centered products at an affordable price. BFC’s online catalog has grown from a mere 5,000 to over 100,000 titles since 2005, and is continuing to add new and inspirational products daily.

Both Books for Christ and Wizkidz (another Demac Media eCommerce build) are controlled from one backend installation of Magento.

Key Site Features:

- Integrated reward points for customers to use at checkout
- Yearly membership option for customers to get discounts on products
- Quick view for products (scroll over with pop-up)
- Tier pricing options (setting different tiered pricing for different quantities as well as customer groups
- Adjustable price slider on left hand side of category pages
- Book finder module on home page

How many emails do you get in your inbox each day? And how many do you actually open and spend the time to read? As an email marketer, it’s not an easy job to get engagement, let alone a conversion from an email campaign.

Despite this challenge, email marketing can be one of the most effective tools to reach your audience as it allows for the opportunity to really cater to their specific needs.

Most people receive tons of “batch and blast” style of email communications in their inbox every day. With this kind of general messaging, most readers may not be so engaged. Instead of this generic approach, try tailoring the messages using the information you have already collected.

Your email list is not only a group of customers that consented to receiving your messages, but it is a cultivated list of users for which you have collected valuable information. It’s this information that can be used to help you target and personalize your campaigns.

1. Personalized and Relevant Content

Make the messages personal and target users based on their individual details and online behaviour. Create content that will speak directly to your customers and consists of content relevant to them specifically. Even simple data such as name, gender and location can be used to send effective and customized campaigns out to your users. Address your readers by name and tell them about the sales, events and content appropriate to them.

Examples:

- Tell users about events or sales happening in their area based on their address information
- Send only the products geared towards your individual customers based on gender or age range

2. Event Based and Triggered Campaigns

Your customers are providing some great information with every action they make your site. Use this information to target them appropriately and setup automatic campaigns based of events or actions.

Examples:

- Thank your loyal customers by sending offers and discounts on their birthday or anniversary of their first (or x^th) order
- Send post purchase emails with suggestions on what to buy next based on a recent  or specific order
- Remind people to come back when they have abandoned their shopping carts and provide incentives to complete that purchase

3. Re-engagement Campaigns

Your list may have emails collected from many different sources; online signup, online purchases, events or other marketing campaigns, or even in-store visits. Many of these may not be regular customers and perhaps some of them may have never made a purchase. Email campaigns can be used to re-engage these users and give them a reason to make a purchase.

Examples:

- Engage customers who haven’t purchased in a certain timeframe with promotions or exclusive offers (Eg. 15% off, or free shipping)
- Send a promotion to those who have never made a purchase with a discount on their first purchase

Relevancy is the new “Batch and Blast”

There are so many ways to effectively personalize your campaigns and really engage your audience. The key is to have something relevant to say and make it personal. Knowing your audience and their behavior will not only help you create customized campaigns but it will also help to achieve your online revenue goals.

Happy Marketing!

For a larger resolution click on the image below.

Source: McKinsey CMSO Forum

Want to learn more about Canadian eCommerce and how merchants performed in the first month of Q2? Then this report is for you. Download your free copy of the Monthly Trends Report for April 2013 now.

This is the twentieth post in our Canadian eCommerce Monthly Trends series. Following up from last month’s data from March 2013, the data below was collected from April 1 – April 30, 2013. This data is compiled using 5-10 Canadian-Only online retail businesses with eCommerce platform and Google Analytics data.  We’re giving a range, as we want to keep the sites being used to aggregate this data somewhat confidential. (All data is rounded to two decimal places).

The content of this report was gathered from eCommerce merchants of all sizes, from top Canadian retailers, to local small-medium size businesses.