Using JavaScript/jQuery to match a word in the URL string and apply CSS accordingly

October 16th, 2012 by AndrewF No comments »

Styling based on window

A little back story into why I am writing this little post:

I am currently working on a web app that requires different functionality and styling between desktop and mobile views (Yes, I’m talking responsive here :D ). I ran into some trouble with the “mobile menu” view – the menu gets hidden for mobile to make space for content (UX win!) which the user can then call back into view via a button that is only visible in mobile. Pretty standard stuff right?
» Read more: Using JavaScript/jQuery to match a word in the URL string and apply CSS accordingly

No comments »

Posted in Solutions

Tags:

An Introduction to Google Adwords

October 8th, 2012 by Christian 3 comments »

What is Google Adwords?

Google Adwords is the name of the Google “paid for advertising” engine. Adwords manages the adverts you see above and alongside your search results on Google. It’s a clever and, if managed correctly, cost effective way to put your business in front of customers searching for your products. Read on for an introduction into how to set up your account.

Steps to promoting your business on Google Adwords:

  1. Step 1: Keyword research
    1. Think like your customers
    2. Synonyms and tools
    3. Is Adwords right for me?
  2. Step 2: Website considerations
    1. Content relevance
    2. Tracking (Analytics and Goals)
  3. Step 3: Designing your Adwords campaign
    1. “Quality Score”
    2. Campaigns > Ad Groups > Ads
    3. Budgets
  4. Step 4: Maintenance

» Read more: An Introduction to Google Adwords

3 comments »

Posted in SEM

Tags:

HTML emails only displaying partially on iOS email client

September 5th, 2012 by Danele No comments »

While using the native email clients for the iPhone and iPad, I noticed that in most emails only displayed a small segment of the HTML. When this happens, it renders the loaded portion of the email with a button at the bottom which reads: “Download remaining xx bytes.” Often this button appears below the fold, making it easy to miss.

The reason for this is that for native iOS email clients you must have a minimum 1,019 characters before your closing head tag (</head>) in your HTML.

You can do this 3 ways:

  1. Try inserting several lines of empty spaces.
  2. Remove the <head> tag completely. Be careful with this solution, some email service providers might place head tags within your email dynamically.
  3. Put some fake CSS in the header – <style type=text/css> … </style> – and fill it up with CSS to make up the extra required characters. This is probably the most fool-proof method as it wont be stripped out or replaced dynamically.

No comments »

Posted in Solutions

iPad automatically resizing text in HTML emails

August 13th, 2012 by Danele No comments »

iPad and iPhone tends to automatically resize curtain text in HTML emails / newsletters.

This happens even when a specific font-size is set in the inline style tag:

style=”font-family:Arial, Geneva, sans-serif; font-size: 12px; color: #1498d2; font-weight: bold;”

By default, Apple sets the minimum font size in an HTML email to 15px.

The solution is to add the following CSS rule at the end of the inline style tag of every element that has a text-size of less than 15px in the HTML email:

-webkit-text-size-adjust: none;

So a full element tag will look like this:

<td align=”center” valign=”top” bgcolor=”#ffffff” style=”font-family:Arial, Geneva, sans-serif; font-size: 12px; color: #cccccc; -webkit-text-size-adjust: none“>Dear Name,</td>

This will force the text-size to 12px on Apple devices, with no automatic text-adjusting.

No comments »

Posted in Solutions

Google Analytics Goals: Match Type Scope

June 18th, 2012 by Christian No comments »

When setting up Google Analytics Goals, one can choose a “Match Type” for the Goal url from:

  • Exact match
  • Head match
  • Regex match

(Match types explained here.)

It is important to note that the Match Type scope extends to all the Step URLs (in the funnel, if you have one) as well – not just the Goal url.

Couldn’t find this specifically documented anywhere.

No comments »

Posted in Analytics

Sharepoint deleting ‘src’ tag content from HTML when images are not uploaded

May 22nd, 2012 by Danele No comments »

I was doing some HTML the other day, and while I was writing the markup, I realised that I haven’t uploaded the images used in it to the SiteCollection.

No big deal, I thought, as I will just upload them afterwards.

So from my local HTML build, I put the markup into Sharepoint. After uploading the images, though, I noticed that none of them were displaying.

After a brief look at my HTML in Sharepoint, I noticed that all the <img src=”pathToImage”> tags were empty, like so – <img src=”">

Lesson learned – upload images 1st, as Sharepoint simply strips out any reference to images it cannot find within the SiteCollection.

No comments »

Posted in Solutions

How to fix z-index in YouTube iframes

January 25th, 2012 by Danele No comments »

Ever noticed how the highest possible z-index gets assigned to embedded Youtube iframes? It cases a real headache if you have a modal popup on the page, as the popup, which should obviously be on top of the page contents, sits underneath the iframe.

Here’s how to fix it – simply add ?wmode=transparent to the video URL.

<iframe type="text/html" width="520" height="330"
src="http://www.youtube.com/embed/videoURL?wmode=transparent"
frameborder="0"></iframe>

No comments »

Posted in Solutions

Disable links with CSS

December 22nd, 2011 by Danele No comments »

The attribute – disabled=”disabled” – does not work with elements other than form elements (submit, text-fields etc).

Trying to add this attribute to a link styled as a button does not work. Here is the workaround:

Set up your style for the link button, an active and disabled state. In this example Active will be normal (class=”btn”) and Disabled (class=”btn disabled”) will be greyed out.

To deactivate the button, add this to your disabled class (along with the rest of your styling for the button):

.disabled {
pointer-events: none;
cursor: default;
}

» Read more: Disable links with CSS

No comments »

Posted in Solutions