No More Horizontal Scrolling

Forcing viewers to have to scroll horizontally just to see all your message is just not right.

Wouldn’t it be great if you could design your emails to automatically scale to whatever width the end user has available in their preview pane, no matter how wide or narrow it is – even on mobile phones?

Usually the width of most emails is dictated by the width of the header image. If the header image is 600px wide, then the email must be 600px wide as well. WARNING: Horizontal Scrolling Alert!

But instead of trying to accommodate the width of the header, we should really be focused on accommodating the user’s available width instead.

The challenge is that we really don't know what any given viewer's available width really is. It could be 350px wide, it could be 550px wide, etc. depending on how their email window is set up.

So let's forget about pixels altogether and instead make the width a percentage instead.

100% = means that the email will scale to 100% of the available width
90% = the email will scale to 90% of the available width – great if you want a bit of white space on the left and right side
80% = the email will scale to 80% of the available width – great if you want even more white space on the left and right side
Etc.

So does this mean that your header image will automatically scale 100%? Alas no. If your header image is 600px and the available viewing width is 700px then the email will expand wider than the header image. But if the available viewing area is only 500px, then the email has to expand to at least 600px to accommodate the header (we’re back to our original problem).

The trick to getting this to work is to make the header image small enough that there is no horizontal scrolling on any device, even mobile devices. This means your header can’t be any wider than about 320px.

Filling the Gaps

Obvioulsy a 320px header might loook pretty stupid if there are big gaps to the left and right. One solution to fill the gap is what we at Astadia use. The actual header image is only 320px but we added a blue background color within the image itself that appears to span the whole width of the email.

In fact the blue to the left and right of the image is not an image at all, but just a color fill to match the blue in the background of our image.

Now it looks like a blue colored header with the logo image in the middle.
How to do it

Step 1: Create a 2-column table (set the width to 100%)

Step 2: Insert the header image inside the left colum and right-justify it Step 3: Add a background color to the left column that matches the background color of your headerStep 4: Add the same background color to the right column
Step 5: Add some white text to the right column and make sure to left-justify it

Now, no matter how wide or narrow the window is, the email always fills 100% of the space - with no horizontal scrolling! And the header always looks nice and centered!

320px wide

600px wide

BTW: This was taken from an Astadia Tip of the Week I wrote called, Designing Emails for Mobile Devices. If you are not signed up to receive these free weekly tips, contributed by the entire Astadia-Eloqua team, sign up now!

Steve Kellogg
-Demand Generation/Marketing Automation Consultant, Astadia
-Eloqua Certified Marketing Best Practices Consultant

On Twitter? Tweet this Post

The Move to 'User-Centered' Web Design

There hasn’t been one single client we work with that isn’t finishing up either a web redesign or in the middle of one. What the heck? Is there some sort of web design sale going on out there? Doubtful.

More likely is that Web 2.0 is finally reaching critical mass. And while there is still debate on what exactly Web 2.0 is, it seems to include at its core: user-centered design.

There has been a monumental shift in web design, moving from the notion that the more content you can expose your visitors to the better, (probably born from the concept that more content got you better SE rankings) to almost completely the opposite: now only relevant content is displayed. It might be the same volume of content, but today’s web redesigns seem to focus on segmenting this content out into bite size relevant chunks. Much less is now much more.

While we often use the pyramid below to define where clients are on their email marketing optimization evolution, the same pyramid could easily be used to map where you are on your web design evolution as well.

So maybe web design starts to look like this:

Web 2.0 = Segmentation
Web 3.0 = One-to-One Content
Web 4.0 = Right Time, Right Content to the Right Person

For now just migrating from Batch and Blast to Segmentation on your website is a huge advantage in itself. The web has always been the perfect opportunity to get visitors to self-identify what they are actually interested in.

So as you redesign your website, make sure you consider the pyramid above. Start with segmentation:

Use Content Tags in Eloqua (together with web tracking scripts) to identify pages or sections on your site that will allow you to drive much more relevant conversations. Since you now know where Bob has been on your site, you can deliver messages to Bob that match his specific online interests.

Leverage Your Contact Us page to gather segmentation data. If there was ever a place for a form, it’s here. Some companies still just list a series of email addresses or a main phone number as their segmentation method, but instead of just listing things like CONTACT US AT: sales@companyxyz.com, info@companyxyz.com or service@companyxyz.com, use a form to gather this type of information so you can leverage it in scoring programs, contact groups etc.

Leverage Subscriptions as a way of identifying what types of content visitors would like to receive. Don’t just say “Subscribe to our Newsletter”. Instead drive them to a subscription preferences page that allows them to pick and choose the exact types of content they would like to receive.

Use “ Quick Forms” to allow visitors to sign up for content similar to what is displayed on the page. I wrote about this in a prior blog.

Conclusion
Whether you are in the middle of a web redesign or planning a future one, evaluate each web page and ask the question, “does this page help drive further implicit and or explicit segmentation?

 
Updated 5-8-12
Visit my brand new website and learn more about Website Optimzation Best Practices

Steve Kellogg
-Demand Generation/Marketing Automation Consultant, Astadia
-Eloqua Certified Marketing Best Practices Consultant

On Twitter? Tweet this Post