Our Workflow

The Setup

Front End Development is a fairly new concept. Back when “Webmaster” was an actual job title there was no real “development” on the front end. Websites were structured using tables, CHSS and SSP were being joined together to make what eventually would be CSS. The web was still primarily a place for documents, real people were in chat rooms, and life was grand. Even as sites became more flashy (blink element anyone?) and CSS1 came of age, they were still fairly simple.

The Situation

Fast-forward to today where we’re seeing an explosion of Internet usage on mobile and tablets. Web “pages” aren’t necessarily pages anymore, but fully-fledged applications. We’ve gone from humble documents to Gmail and Google Maps. Javascript put on his big boy pants and joined the server side thanks to Node.js.

Things are getting heavy, and I mean that literally. In 2013 page weight went up 32%. That’s up from a 30% increase in 2012! The web is getting bigger, more complex, and does more things. This is a good thing, but it presents some new challenges.

As we’ve grown and expanded, we’ve been taking on larger and larger projects. It’s forced our development team to re-examine how we build things. We found ourselves needing a more modern workflow to deal with all of the complexities of the modern web. Software Engineering principles, REST API’s, and unit testing suddenly became relevant. Separation of concerns became more than just separating HTML and CSS.

Our Evolving Solution

Have you ever tried to build a non-trivial AngularJS app? The learning curve is steep and usually requires digging around the source code. The fact that frameworks like AngularJS and Ember.js exist says a lot. Here’s how the dev team here at Portent modernized our workflow:

• Github – We moved our projects from CVS to Github and adopted Github flow, a variation of Git-Flow outlined by Scott Chacon. It’s simple, requires minimal setup (getting everyone on Github) and provides a nice interface for the less technically inclined (e.g. managers).
• Yeoman.io – It combines generators, or scaffolds if you will, to build out a skeleton project (you can also write your own). It uses Grunt.js for task running and compiling assets (Sass/LESS/images) and Bower for package management. Seriously, this tool can save you a lot of time on both ends of the development cycle.
• Sass and SMACSS – Preprocessors are all the rage and for good reason. They can increase maintainability of your presentation layer. Many people use LESS but we chose Sass because it seemed to be more actively developed. There is a downside to preprocessors though, and that’s the ability to shoot yourself in the foot with bad/extraneous styling. To combat that, we use Scalable and Modular Architecture for CSS. Out of the two, SMACSS is more important because clean code always wins.
• Atomic Design – We’ve started to build things according to Atomic Design from Brad Frost. Basically you start at “atoms” (like colors, fonts, search bar) and move up the chain to “molecules”, “organisms” etc. Combined with SMACSS, this allows us to develop as we design, cutting down overall project time.
• Freedom – This one is very important. We’re lucky to work with managers and clients that want to stay ahead of the curve, that want tomorrow instead of today. This allows us to experiment with new technologies, languages, and frameworks.

This list may change as we’re always experimenting with new workflows to make our lives easier and our projects better. Some things on our radar for the future are Docker and Google’s Go and Dart languages. I’ll keep you posted on our workflow and if you have a tool or a workflow that you think is great, we would love to hear about it.

The post A Front-End Workflow For The Evolving Web appeared first on Portent.

If you’re like me in the kitchen, sometimes you want to add a little North African flavor to dinner. After some light Googling the other night, I found plenty of couscous recipes, but I also found this culinary gem: “5 Couscous Cooking Mistakes to Avoid.”

Wait, what? “Cooking” couscous amounts to no more than adding semolina to boiling water. Do we really need a blog post to warn us of the dangers of forgetting to fluff our couscous with a fork before serving? A more interesting piece would have been, “5 Mistakes to Avoid When Opening a Car Door.”

Who is polluting our World Wide Web with this drivel? Well, it’s us, actually. SEOs. Content Marketers. “Inbound Strategists.” The above blog post is why, as Wil Reynolds described it at MozCon, the Internet hates us. We need to get better at creating and pitching our clients great content—not only because it’s our duty, but because our jobs and livelihoods depend on it.

If you’re writing a blog post, stop. Stay your hand. Abandon that list of infographic ideas. Relinquish your license for that stock photograph of a group of attractive people in business attire smiling and pointing at a monitor. I have alternatives.

Here are three simple ways to leverage JavaScript libraries to create meaningful, interactive content.

Make a Map

Embedding Google Maps into webpages is great and all, but the web offers a ton of other solutions for customizable, interactive maps. I’m neither a developer nor a designer, but even I can figure out Leaflet.js, Polymaps, and OpenLayers—all of which are free to use. Data-Driven Documents or D3.js can also be used to make some rad maps, like this example that shows how air traffic connects the country’s airports.

My personal favorite, though, and the best one for code-phobic folks, is MapBox. You can create and style your own maps with their design suite, TileMill, and the MapBox.js API makes adding maps to webpages blindingly simple.

Having just moved to the wilds of Helena, Montana, I’ve joined Portent’s elite group of remote employees. This map of our locations in relation to Portent’s Seattle office took about 15 minutes to create:

Truly great content, however, will leverage this technology to push beyond just creating maps. Young Hahn wrote a brilliant tutorial on how he used MapBox.js to visually illustrate a Sherlock Holmes mystery. This example also shows how we’re not limited to traditional maps. For an ecommerce client, I could show their suppliers around the globe, or I could use the floor plan of a house for my map tile images with markers highlighting how their products are used in different rooms. It’s easier than you think.

Make a Chart

One of the inspirations for this post was Justin Briggs’ SearchFest presentation and subsequent blog post on Technical Hacks for Content Marketing. He outlined the process for making interactive infographic with just a few lines of JavaScript for each chart.

He utilized NVD3 for making re-usable charts for D3.js. The relationship between the two seems like a business-in-the-front/party-in-the-back sort of situation, with NVD3 giving us nice, respectable stacked area charts while D3.js lets you get weird with things like magic waves.

Justin also highlights how OkCupid created graphs that change based on user interaction with a slider bar. These graphs use slider.js from Scriptaculous—a JavaScript library to help make anything from tabs to puzzles.

An even more creative use of the slider functionality I’ve found is from Bellroy, a leather wallet retailer—not exactly a sexy niche. They used an interactive graph to demonstrate how their wallets stay slimmer than the competitions with varying amounts of credit cards and cash:

This is an excellent example of how content can be impactful and memorable without reinventing the wheel. The next time I need a wallet, you can bet I’ll remember them. I found this page, by the way, by clicking on a banner ad. A banner ad. Bellroy is killing it on the Internet.

There are many more libraries out there for data visualization, and Datavisualization.ch has curated a nice list. One of my favorites is arbor.js, which shows connections between data points. Here’s another way of visualizing Portent’s remote workforce:

Make a Timeline

Every company has a story, and many have pages dedicated to telling that story, but few present it in a compelling way. Libraries like Timeline and chronoline.js are good for showing data points at across a spectrum of time.

If you’re just looking to make something quick and dirty to show a client, I’d recommend TimelineJS. You can pull in all kinds of data from different sources like Twitter and Vine, and the tool spits out an iFrame embed code to display the timeline on webpages. Now, iFrame’s aren’t exactly ideal for SEO, but this is the easy solution, remember?

Here’s an example timeline on the history of user interfaces.

Beyond Blog Posts

This stuff isn’t new, and there are many more libraries, toolkits, and applications at our disposal. If you’re a designer or a developer, I’m sorry; you must be bored to tears by now. It’s marketers who need to stop writing top ten lists and start creating truly interesting, useful content.

What are your favorite examples of interactive content? How do you pitch content to clients that goes beyond a simple blog post? Share your examples in the comments.

The post Stop Writing Blog Posts: Ideas for Interactive Content appeared first on Portent.

Ever land on a business Facebook page and a custom tab asks you for a “like” in exchange for free swag? In the social biz, we call this a “like gate.” For clients, “like gates” are the most requested type of custom Facebook application because they’re great at attracting fans through incentives.

Yesterday, Facebook notified business page administrators all Facebook pages will switch to the new Timeline view on March 31st. This sounded great until we realized traditional “like gates” wouldn’t work anymore. After previewing client pages in Timeline, we noticed that Facebook removed the automatic page refresh function when a user clicks the “like” button. Facebook basically took away the pixie dust that allows us the ability to display custom content to people who like the Facebook page.

We finally heard back from Facebook this morning in the bug report thread, and they have thankfully confirmed that it is just a bug that will be fixed “soon.”

Given that it took Facebook two days to even respond, I’m not holding my breath for their fix.

While we wait, there is simply nothing we can do about the functionality of the like button on the top of the page. We can, however, use the Facebook Like Button plugin to include a second like button inside an iframe that provides the correct functionality.

If you want to get your pixie dust back, I’ve put together a template that includes all the necessary code for this, along with an ‘instructions.txt’ file with all the details you’ll need to build your own like gate with these files.

Code Breakdown

index.php

This file only serves to detect whether the user has liked the page or not, and direct them to either ‘before.php’ or ‘after.php’ respectively.

Before Timeline, this was all we needed. And after Facebook fixes the refresh bug, this method will once again redirect users to the proper landing page after they click “like.”

Note: We are required to include ‘facebook.php’ for this to work. This file is included with the template, and publicly available here.

header.php

We need to use the JavaScript hack to allow iframes taller than 800px to display without scrollbars. Since the contents of this file will be included in both before.php and after.php, we’re going to define the canvas height for each state inside an if statement referencing a variable we’ll set on each respective page.

Set the height of each frame in both JavaScript functions following the appropriate “$thisPage” variable declaration.

before.php & after.php

Pretty self-explanatory here. We’re using PHP to define the “$thisPage” variable and include the header and footer, then including the HTML5 version of the official Facebook Like Button. Just turn off the send button and faces, and include the URL to your business page as the URL to like when you grab the Like Button code from Facebook.

For after.php, just duplicate this template but change “$thisPage” to “After”.

footer.php

In the footer we’re including the Facebook JavaScript SDK and necessary parameters for our iframe to function correctly. At the end of our JavaScript you’ll find where the magic happens that allows our in-frame like button to point the user in the right direction. Clicking on the like button triggers the event ‘edge.create’, so we’re subscribing to it and passing a callback function instructing the page to redirect to after.php.

style.css

The final piece to this puzzle is to hide the comments popup that appears by default when someone clicks the in-frame like button.

A CSS solution like above is a little hacky, but it works and it’s all we can work with at the moment. I just include the above rule after my CSS reset, as you’ll see in the template files.

Let us know in the comments if you have any trouble!

The post Facebook’s Timeline “Like Gate” Bug Solution (For Now) appeared first on Portent.

Tragic, right?

So here is a breakdown of changes coming to required attributes on Google Product Feeds and drilling down even further on rich snippets and how you can utilize those through a product feed. This information was pulled together from 3 different Google product sites: Google Merchant Blog, Google Merchant Help Center and the Google Webmaster Central Blog.

First up- the most crucial information- on required attributes for a Google Product Feed:
EVERY product must have a unique product identifier (UPI)- if you want it to show up that is.

Starting May 3, we will require unique identifiers for all products except apparel and one-of-a-kind items. Products without unique product identifiers may not be listed in Google Product Search, though the feed may not be disapproved.

A UPI is something like a UPC code, MPN (manufacturer part number), ISBN or could be a Japanese or European article number (JAN, EAN).

Check out the full Google Merchant Help Center article.

Tax Attributes in Google Merchant Center

Next- takes effect on June 6th. Tax information is required for feeds targeting the USA. You can set this at an account level (that’s the required part) or you can do item level override values within the data feed or via the API. See the full Google Merchant Help Center article on tax attributes.

Obviously the easiest is going to be the account level setting. Login to your Merchant account and under Settings, select “Tax and Shipping.” Click “add your tax settings” and select how you will be charging taxes, click continue.

If you select to do it on a state by state basis a handy list of all 50 states will show up, allowing you to select which states you need to charge tax in and then on the next screen, allows you to enter the tax rate for each state and whether or not to apply that tax to shipping as well. Save and you’re done. You can go back and edit any of these settings later if you need to.

What’s a Rich Snippet?

OK, now that’s how you keep your feed up and running through June 6th. But I also promised something on rich snippets since we’re on the topic of product feeds. Rich snippets are “search results that have been enhanced using structured data from your webpages…” It means that in an organic search result it can show price, availability, reviews, sales- but only available in the US.

Example: Amazon uses these a lot.

You can utilize this feature a couple of ways: through a product feed or markup on your site.

Submit Rich Snippets via Product Feed

The Google Merchant Help Center article on this outlines how to do this, here are some highlights:

• Have the attribute column for quantity set to 0 for out of stock items.
• You need product ratings and reviews- so if you don’t have any, you may be out of luck. If you do, submit these ratings through the “product review average” and “product review count” attributes.
• BUT- if you work with one of the Google Product Review Partners (Bazaarvoice and Power Reviews) you might be able to leverage those reviews and ratings instead.
• Fill out the prices attribute column correctly.
• Include rel=”canonical” link element on product pages- more on that below.
• Then, fill out the Rich Snippets Participation Request Form and submit.

Submit Rich Snippets via Markup

Google said it best:

If prices for your products tend to change only infrequently, then adding markup is an alternative method to provide product data for rich snippets. We’ve updated our product markup format to allow a variety of different types of shopping sites to participate. In addition to the Google format, we support two other standards: the hProduct microformat and GoodRelations. You can use the rich snippets testing tool to test your markup and make sure it’s being parsed correctly.

The rich snippets testing tool is pretty nifty, be sure to use it- it’ll also give you a preview of what the result will look like.

Rel = Wha?

And last, but not least, what about that rel=”canonical” link that needs to go on product pages?

What that does is let you tell Google which URL you want them to use for that product page. Often there are multiple URLs or long URLs that take users to the same product page, this is a way to consolidate and remove things like session IDs.

For example, both

http://www.example.com/product?id=388
and
http://www.example.com/product?id=388&category=748&sessionId=4754379899

might lead to the same product page. When Googlebot crawls a site, it’s not unusual for it to find several URLs for the same page. And it’s not always clear which of those should be displayed in the search results on Google.com.

This is allowing you some control over how long the URL is (go for the shorter one) and of course, let you participate in rich snippets. This does not affect Product Search, Product Listing Ads or Product Extension Ads URLs- whatever you specify in the feed is the URL they will use, this does not override those. Tracking parameters don’t get stripped off.

Does this crossover out of PPC, into SEO and web developer territory? Yeah. But aren’t you glad you know about it?

The post Google Product Feed Updates & Rich Snippets appeared first on Portent.

By the way, this is a competitor’s site: A marketing agency that claims to offer internet marketing. Why am I not a multi-millionaire?

You can have a much friendlier ‘page not found’ page – also known as a 404 error page:

It’s easy: If you can create a plain, static HTML web page, you can create a 404 error page. You may have to get your web host to do a little setup work, but that’s it.
I’m going to walk you through it.

Step 1: Create Your Page

1. Open your favorite HTML or web page editor.
2. Get HTML code for your site. This is easy. Open your site in a web browser and go to a simple page (I usually use ‘about us’ or something similar). Click ‘view’ and then ‘source’. Cut-and-paste that code into your editor. Voila – you have your page layout.
3. Edit the page so it follows the three principles of a good 404 error page (see below).
4. Save the page as something obvious, like 404.html.

Any 404 page should have 3 basic elements:

• A clear statement that the visitor is in the wrong place;
• Advice to help them get back on track;
• An option for getting in touch with the website owner.

You’re done with step one. Pat yourself on the back. You’ve just done something that most of the web development world apparently doesn’t understand.

Step 2: Put the Page On Your Website

Connect to your website using whatever tool you normally do. It might be an FTP client, or the ‘file manager’ that’s built into your web hosting control panel.

Upload 404.html to the server.

Navigate to http://www.yoursite.com/404.html to make sure the page looks OK.

On to step 3…

Step 3: Setting Up Your Server To Point At Your 404 Page

This is where most folks turn pale and start to sweat. Chances are some developer or grumpy web hosting company support person has told you this part’s really, really, really difficult. I mean, they don’t know how to do it, so it must be difficult, right?

Wrong.

I’m going to show you how it’s done on Microsoft’s Internet Information Server (in about 10 steps, but they’re just point-and-click) and on Apache (in 3 steps, but you have to know how to type).

Setting Up On Internet Information Server (IIS)

If you don’t use a dedicated server, you hopefully can’t do this procedure on your own. Contact your web host. If they say you can’t set this up on Microsoft’s Internet Information Server, reach through the phone, slap them hard, and then e-mail them this page.

1. Connect to your server via remote desktop connection or whatever remote access software you use.
2. Open the Internet Information Services Manager.

   

3. Wipe off your palms. See? This isn’t so scary.
4. Expand the ‘Web Sites’ folder.
   
5. Find and select your web site in the right-hand window (and no, IIS won’t be all blurry – I’m just not showing every web site we host on this server to the entire web-browsing world).
   
6. Click ‘Action’ and then pick ‘Properties’.
   
7. In the window that appears, click the ‘Custom Errors’ tab.
   
   Take a moment and wonder why your head of IT couldn’t find this.
8. Scroll down until you find ‘404’ in the ‘http error’ column. Select the one that’s just plain old 404:
9. Click ‘Edit’ and then find the 404.html file you created in Step 1.
10. Click OK ad nauseum, then click Apply.
11. Close IIS Manager and log off of your server.

Test it out by going to http://www.yoursite.com/asdf.

Congratulations! You are the proud owner of a user-friendly 404 page.

Setting Up On Apache

This procedure can depend a little on exactly how your server is configured, but typically you’ll want to edit a file called .htaccess. Check with your web hosting provider. If they use Apache they almost certainly have a help document explaining this. If they don’t, contact me and I’ll connect you with a real hosting provider.

1. Connect to your site via FTP. Do you already have a file named .htaccess? If so, skip to step 3
2. Create a new file. Name it .htaccess – use that exact name!
3. Add the following line of text to the file:

   ErrorDocument 404 /404.html

   This assumes you named your error page 404.html, and that the error page is in the root folder of your web site.

4. Save the file and upload it to your web site, if you have’t already.

Test it out by going to http://www.yoursite.com/asdf.
Done!

Bad 404 Page Setups

Never:

• Redirect 404 errors to your home page. That’s confusing to your visitors. They clicked a link thinking they’d get to one page and you sent them to another with no explanation.
• Redirect 404 errors to another web site. Augh! Why do people even think that’s OK?!
• Send 404 errors to a Flash page. Just don’t.
• Send 404 errors to a page with a registration form that has 25 fields. I’m not making this up…

It Just Isn’t That Hard

Creating a great custom 404 error page is easy.

Having a great custom 404 error page means keeping more visitors on your site, and selling more stuff, getting more leads, etc..

Not having one will just cost you money.

So go do it already!

The post How To: Create a Great 404 Page Not Found Error Page appeared first on Portent.

Answer: Immediately!

I just read an article where the author states that the time to hire a search engine optimization consultant is right after the design is finished, before the content is written.

Wow! There’s a disaster ready to happen.

I cannot tell you how often I have had to rip the heart out of gorgeous, visually appealing and clean web site design with carefully chosen color schemes and lots of white space.

• Is there space for anchor text or are the menus stylishly petite with generic text like ‘home’ or ‘solutions’ or ‘products’?
• Did your designer include signals of trust like addresses, telephone numbers, and copyright dates?
• Did your designer use fancy CMS image replacement tricks?

You can design around SEO. It is much harder to SEO around design.

BTW, this goes for development too. You do not want to spend thousands of dollars on a content management system only to learn that search spiders cannot crawl your links or that you have massive amounts of canonical URLs or that your CMS will not work with your web analytics.

Smart entrepreneurs use SEO to inform all of their online decision making.

Think about the words and phrases people use to query the search engines  in order to find your product or service. Could you use valuable market research like this to develop your entire marketing message?

If you are serious about designing a profitable online business hire an SEO consultant and do so early.

Before your web site is designed and installed use your SEO consultant to

1. Discuss your Internet marketing vision and ask for an independent reality check, one based on market behavior.
2. Get a keyword list and find out what people are or are not looking for.
3. Create your web site architecture (skeleton/org chart/page-tree).
4. Make a checklist of requirements for your CMS developer and web site designer.

Being a Search Engine Optimizer is a bit like being an attorney. I’m not creating your design for you. I am not programming or installing you CMS. But I understand the process, the dangers and the opportunities. At the outset I will use my expert knowledge to give you a set of dos and don’ts that will protect you and help you. It is Search Marketing after all, and I am a Search Optimizer.

The post Search Engine Optimization Before Development & Design appeared first on Portent.