Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Sunday, June 8, 2014

5 Development Tricks Self-Sufficient Marketers Should Master

Data Tracking

1. Google Tag Manager

google-tag-manager
Google Tag Manager was put into place to make our lives as non-coders much easier and limit the amount of effort needed to set up tracking and optimization tools on our websites. You're probably familiar with it, but are you really an expert?

If you haven't studied up on Google Tag Manager, it's time. It allows you to add, remove, and manage website tracking tags without editing code directly on your website. If you're completely unfamiliar with GTM start by migrating your tags and master the logic behind the data layer of GTM.
The data layer does involve editing code, but the trade off is rich data about your users' behavior.
For bonus points, familiarize yourself with the Auto-Event Variable and start tracking important actions like button clicks or error messages on forms.
Even if you don't go so far as editing the code within the data layer yourself (don't feel bad, I'd guess most marketers won't), have a good understanding of its capabilities. That knowledge alone will help you immensely as you determine what tags you want added for your site and coach developers through the process. Access to more data is only going to make you a better marketer in the end.

Coding & Design

2. HTML & CSS Coding for Basic Forms

Whether you're an HTML buff or a beginner, knowing how to create or edit HTML forms and dabble in CSS will help you get ideas to market faster. Work off of a template if necessary, but spend some time with a coder and take a few HTML courses so that you're comfortable editing forms and launching the changes without a developer's touch.
Use cheat sheets to help you create different types of fields and buttons so you can take your marketing efforts from ideation to completion with little input from a developer. Check out this article for specific coding tips if you're new to forms.
If you have a good understanding of how forms are built, not only can you build your own, but you can also identify when a form is broken and why. With practice, you may even be able to make the fix yourself.

3. Markdown

Markdown isn't new, but it's becoming an increasingly valuable resource for people who don't have a coding background. It allows you to use simple cues to integrate things like Headers, block quotes, images with references, links, and my personal favorite – tables – into text documents that need to be formatted for the web.
While some may still view it as a tool simply for bloggers, with Markdown you don't have to battle hacky edits in WYSIWYG editors to get the styles you want to appear in your content.
Tools like MarkdownPad for Windows and this browser version allow you to write in Markdown format and convert it to HTML so even if you aren't integrating content into WordPress for example, which has a Markdown plugin, you can easily input well-formatted content that is consistent time and time again.

Quality Assurance Testing

Marketers may be pros at A/B tests to determine the success of ideas or tactics, but whether you're launching new feature, updating a form or getting ready for a large online sale, you need to think like a quality assurance specialist and test work before it goes live. There are two testing scenarios that marketers should be well versed in.

4. Testing Changes in Different Browsers

BrowserStack
Use a web-based tool like BrowserStack to create a virtual machine and simulate what a site looks like in different browsers and operating systems.
BrowserStack has almost every active browser and OS combination, which is particularly helpful if you know a particular combination is most popular among your site visitors according to Google Analytics, but you don't personally use that browser version or OS.
Testing changes and troubleshooting in different browsers may uncover something that requires a developer to fix, however it should prevent you from relying so heavily on your quality assurance team.
If you don't have a quality assurance team, definitely add this resource to your toolkit.
Be sure to remember your website's demographic when you're testing. A task that is simple to you may not be simple to someone in a much older or younger age range.
Older demographics, for example, are more likely to double click buttons than younger people are. Consider how your audience will interact with your site to ensure they receive the best experience possible and you catch issues in a testing environment, rather than hear about them from a customer.

5. Load Testing for Traffic Spikes

Load Testing
Load testing is particularly important if you're preparing for a large event that will lead to an unusual spike in traffic and activity on your website. Some free performance testing tools can be easily configured to simulate an estimated number of users and the length of time you think they will remain on your site. Running these tests will give you assurance that your site will withstand a surge in visitors.
Alternatively, these tests will make you aware well in advance if you need to make technical updates prior to your event to handle the increase in traffic. While changes to improve your site's capacity will require a developer, its always better to take a proactive approach when you expect a great increase in traffic to your website.

Summary

These ideas may require you to reach beyond your comfort zone, but learning new things will benefit you and may help you impress your developer counterparts.
(via)

Wednesday, July 4, 2012

New Mobile SEO Strategy

Image representing Google as depicted in Crunc...
Image via CrunchBase

3 Ways to Serve Mobile Content

The end result of all this is quite simple. Google supports three ways of serving mobile specific content to users and have provided distinct recommendations for each.
When a mobile user requests a particular URL:
  1. Serve the same HTML as the desktop version of the page and use CSS3 media queries to change the look of the site (ideal).
  2. Serve HTML and CSS that is different from the desktop version of the page.
  3. Redirect a user to a different URL utilizing mobile optimized content.
Using the starting point of a mobile user requesting a desktop URL, here are some details for the three options listed above.

1. Same URL, Same HTML

This has become the industry standard for several reasons and those reasons typically fall under two umbrellas:
  • The SEO benefit in consolidating all ranking metrics to one URL.
  • Simplicity of implementation.

2. Same URL, Different HTML

When serving different HTML for mobile users, Google recommends adding a Vary HTTP header to the server response. Add this to ensure Google knows about and crawls both the desktop and the mobile version of the URL.
vary-http-header

3. Different URL

A company will commonly use a special site/URLs for mobile content. This is normally seen in the form of a subdomain m.example.com.
When using alternative URLs for mobile, Google would like a couple of things to happen.
  • Use of the link canonical tag on mobile pages pointing to the desktop version of the URL.
  • Use of the link alternate tag on desktop pages pointing to the mobile version of the URL.
Here is Google’s example of how the rel alternate tag would look like in code.
rel-alternate-tag-code
Redirecting mobile users to different URLs comes with additional caveats and Google speaks directly to them when they say, “...be sure to treat Googlebot and Googlebot-Mobile just like any other user-agent and redirect them appropriately.”
The most relevant point Google brings up is the idea of user agent redirection lists. When redirecting based on user agent, you must have a comprehensive list of user agents to let your server know when and where to redirect a certain mobile user.
For example, the iPhone user agent will be different than the latest Galaxy Nexus. That means this list has to be constantly maintained and will undoubtedly become outdated at some point.
Yet another reason why responsive design has become the industry standard as it focuses on changing the layout of a page based on the device screen width.

Some Final Thoughts

Watching the progression of mobile SEO has been more than interesting. When I think about important concepts for mobile, battery life and Internet speed play a huge role in conversion. So, it would make sense that the iPad dominates revenue across the board as most of these devices are connected to WiFi and used mainly for browsing.
That being said, as smartphone battery life and Internet speed get better over time, so will conversions. It may make sense to provide a customized experience.
Before spending time and resources on creating mobile content and going live, draw conclusions from how the users are interacting with the site and testing.
mobile-seo-device-info
As a final thought, desktop versions of sites have great mobile conversion. It’s quite possible that having a desktop site that is fast and has an intuitive site architecture should be a priority before dedicating resources to creating a customized mobile experience.
(via)