Magnises Website

Magnises is a credit card company that offers unique perks to its members including exclusive events and entertainment.

They came to me with a web design ready to go and asked me to scope and build the site. They also asked me to offer any insight into the existing design and work with their graphic designed to improve it to this degree.

The Brief

Magnises challenged me to bring both its publishing and reader experiences to the next level. My goal was to blend publishing autonomy and extendability whilst ultimately providing the reader an optimal experience for engagement and exploration.

My Approach

I knew from the start that simplicity was the key to this project and the design reflected this view. Infinite scrolling single-column content would allow users to focus while social media embeds would break up the stream. Whitespace was to be a close ally.

The Process

The Magnises user experience needed to focus on content and imagery without drawing attention or distracting the reader with extraneous details. Black, white, and charcoal were chosen to be the primary color pallet while a bright golden yellow acted as a rare call to action highlight.

To further the focus on content, a single clean column would allow the reader to digest one row at a time. A fixed sidebar widget coupled with a contracting sticky header stayed out of sight, but always accessible for the reader.

magnises-staging-mockups

Endless Content

Pagination and the page load time that accompanied it were replaced with a superior user engagement technology: infinite scroll.

magnises-endless-content

Social Integrations

Showcasing the activity of Magnises’ social media accounts was vital to accurately portraying the brand. I utilized the APIs of both Instagram and Twitter in order to display a custom styled embed that would operate with our Infinite Scrolling mechanism.

magnises-staging-mockup-imac

One Size Does Not Fit All

I wanted to serve visitor intent without sacrificing white space or distracting the reader. I designed the website’s header to display differently based on which page the visitor was on and to change on scroll.

magnises-staging-mockups-2

All in all, the project was completed ahead of schedule and to the delight of the client.

99 Robots – Website Development

As the lead web developer for the 99 Robots website, I was in charge of end to end delivery of every section of the site and their functionality, including but not limited to:

Lessons Learned as a WordPress Theme Shop Customer Support Agent

Working for a WordPress Theme Shop has been one of the most influential experiences of my development career. Not only am I responsible for solving client problems, but I’m also responsible for learning how to solve those problems myself. I’ve learned a tremendous amount about what stumps users, what they want, and ultimately how to correctly respond to any support question – even if it’s never been asked before. I attribute most my knowledge to working as a WordPress Theme Shop Customer Support Agent and am truly stunned at all the lessons I’ve learned the hard way.

1. Live for the fix

The most gratifying part of being a custom support agent for me is solving the problem for a customer. If I can easily make their day better with a few lines of code that they would never have figured out, it honestly makes my day better too. Reading the words “omg thank you so much!!” brings a smile to my face every time and pushes me to try harder to fix the next problem. I reply to every comment, letting them know that I’m here to help them with any issues and adding emoticons when they really make my day. Even if I don’t know the answer, the least I can do is ask for additional information so the user feels looked after. It’s important to me that the user is happy, because when I need customer support, I want the same level of respect and dedication.

2. Assume they know nothing

There is no such thing as a stupid user, only inadequate directions. Assuming the user knows what FTP is or where to add CSS code is one of most basic mistakes I still manage to make. While it only may lead to another response or two on the support thread, it could add hours to the time before a user’s problem is solved. On top of that, when a user doesn’t know what to do or where to navigate, it leaves them feeling lost, impatient, and even angry. No bueno.

Being thorough and providing specific step-by-step directions is the best way to ensure a user can follow through and resolve the issue. For common questions, like ‘What is FTP?’, it’s very useful to just link them to a codex entry on the topic in your response. For example:

open custom-functions.php and change ... to ...

should be:

  1. FTP to server.
  2. Navigate to wp-content>themes>theme-folder>framework and download custom-functions.php
  3. Open it in a text editor
  4. Change code ... to ...
  5. Upload & replace the file on your server

3. Know every codex entry by heart (and slug)

Most of the time, users will require the same set of directions to solving a problem. Linking them directly to a codex entry with the steps to the fix is far more effective than re-typing the solution over and over again. That’s why it’s important to know what’s in your codex and to create codex entries for common issues. Knowing the slug of the codex entry is awesome for quickly linking to those common questions without having to search them every time, though it may be harder for super-SEO-taxonomized codex entries.

One time, Google Adwords updated their code so that it was incompatible with the Ad fields in our theme options. While we were working on a fix, a number of users were still affected by the change and created support threads. I did not create a codex entry and spent a lot of time detailing the solution for a number of users before I facepalmed at my mistake and created one. It saved me countless hours more than the time it took to create the entry. Lesson learned.

4. Have infinite patience

Sometimes, things break. When things break, users get mad. When users get mad, they use choice language. When users use choice language, I don’t like it. Though I don’t fight fire with fire, it is certainly off-putting and I wish I could reach across the internet to smack some sense into them. After all, I’m here to help you, there’s no need to be rude. This is where infinite patience comes in handy. Even if the user makes me mad, I try to step out of the moment and put myself in their shoes. I’ve been frustrated before, especially when something simple doesn’t work. I try to envision how I would want customer support to respond, even if I were angry. Empathy is the key to bringing me back to a place of level-headed helpfulness and even to go above and beyond to resolve the issue. I secretly prefer solving angry user problems because it’s gratifying to bring a bit of peace to someone who probably has a lot more on their mind.

5. Test your code before you recommend it

If you’ve ever tried out some code and then get white-screened, you know how terrifying it can be. Now imagine white-screening someone else’s live website because you missed a closing php tag. In short, they aren’t too thrilled. Even simple stuff like a css color fix can cause users to get upset if it doesn’t work. Sure, it was only an id selector instead of a class, but they don’t know the difference. And because of this simple mistake, and the lag time between thread responses, the fix takes hours longer than expected. In terms of user experience, you may have just lost a client. So, as I’ve learned the hard way, always check your code before you recommend it to someone else.

6. Stay up to date on library updates and bugs

WordPress isn’t perfect. Neither are themes or plugins. And they sure aren’t perfect together. Pile jQuery conflicts and deprecated functions into the mix and you have a recipe for some broken elements. It’s important to know when new releases of product are shipped, but it’s even more important to know what breaks with them. I remember when WordPress 3.7 launched there was an issue with default category menus because the exclude-category function failed. I thought it was an issue with the theme, but a quick look through some of the wordpress.org threads informed me that it was a 3.7 issue. If I hadn’t gone through the support forums, I could have wasted a lot of time trying to solve the problem within the theme, when it was something that was not broken in the first place.

7. Write in the plainest English possible

Writing grammatically correct English is important to me. It facilitates better communication and enables me to explain myself in full. However, most of the world does not speak English, and certainly not as a first language. Furthermore, some English doesn’t translate well into other languages or at all. Since a hefty percentage of our users are not native English speakers, it became very apparent that simplicity was my best friend. Writing for translation software is the best way to avoid redundant explanations. Useless directions like ‘You’ll need to navigate to the theme options then open custom styling etc..’ quickly became terse bullet points like ‘Go to Theme Options>Custom Styling’. Using capital letters, periods, lists, dashes, and semicolons became a common tool for segmenting sentences so that a user could see the split between directions. Turning long sentences into short, broken instructions is the best way to communicate over the language barrier.

8. Never Close a Support Thread

I may seem counter intuitive, but closing threads can actually make life more difficult. Users often have similar issues, but might want to ask different questions on the topic. If I were to close a thread, they would then open a separate thread, maybe link back to the original thread, and ultimately cause confusion somewhere down the line with fixes, external links, and duplicate search results. Leaving the thread open allows users to continue the discussion on fixes and allows them to communicate if a fix breaks or even contribute alternative solutions. Personally, I hate when a thread on wordpress.org is closed because I can’t ask further questions about a fix, especially when closed threads pop up as the first page of google search results. Closing threads leaves them out of date, shuts down nuanced discussion, and doesn’t play nicely with user experience.

9. Don’t be afraid to call for backup

I was hired to take the load off of the theme developers, who were serving as support agents as well. Most of the time I can handle the support threads, but sometimes a tough question will stump me. For a while, I was too proud to ask for help – I didn’t want to appear as if I couldn’t do my job. This only resulted in wasting my own time and, more importantly, the user’s. Now, instead of banging my head against the problem, I elect to bring in some experienced help from the theme developers. Not only will they be able to sort out the problem quickly, but I’ll also be able to learn from their solution on how to attack the problem in the future.

What lessons have you learned while working with WordPress?

HTML and CSS for Marketers

So, you’ve got a website template, but it’s just not quite 100% the way you want it.

Maybe you want the color of links to stand out, or maybe the paragraph font-size is too small, or maybe you want your headlines to be bolder.

All of these changes can be done easily, if you know the shortcuts. Not to worry, in just few minutes you’ll be able to change any of your web pages at will.

A Quick Overview of HTML/CSS

Basically, if code were a person HTML would be the bones and CSS would be the skin. In order to add an extra arm, you need to add HTML. In order to change the hair color, you need to add CSS.

HTML

It looks like this:

<div class="black-box" id="black-box-1"></div>

By itself, this code will do nothing. Without CSS, HTML is essentially useless.

CSS

It looks like this:

.black-box {height:100px; width:100px; background: black;}

Without HTML, CSS is useless as well.

The Important Part

In order to make style changes, you need to figure out 1) the CSS Selector and 2) the CSS Declarations.

The CSS Selector is how the HTML element is named and the CSS Declarations are the customizations you want to make. In the above example, our CSS Selector can be one of the following:

  • div {…} – this is known as an element selector
  • .black-box {…} – this is known as a class selector
  • #black-box-1 {…} – this is known as an id selector

There are many other ways to use selectors, but these three are the basics. They give you multiple ways to target an HTML element and make your changes.

How to Find the Right CSS Selector

Here’s the cool part. Modern browsers have built in tools that allow you to peer into the HTML of any webpage. Just right-click on this page and click ‘Inspect Element’.

It will open up a fancy toolbox window and select the HTML element you’ve clicked on. You’ll be able to see the HTML element and it’s ID and Class, if it has any. This paragraph is using the <p></p> HTML element to display. Inspect a few elements to get the hang of how the tool works.

How to Use the CSS Selector

Now that you know how to target an HTML element, it’s time to customize! It takes practice to know all the different CSS Declarations that you can use to modify a webpage, but here’s a few to get you started.

To change the color, font-size, line-height, and add a border with some padding to our paragraphs, add this code to your CSS stylesheet or Custom CSS box:

p {
color: #0088CC;
font-size: 30px;
line-height: 1.2;
border: 1px solid #333333;
padding: 5px 10px 15px 5px;
}

If you wanted to target all of the links inside a paragraph, you can use CSS Selectors like so:

p a {...}

You can add more CSS Selectors to give a more specific change, so sometimes selectors can be long:

body .header .nav ul li a {...}

As long as you add selectors in descending order, your code should be ok!

How to Add Your CSS Code

Most modern web templates, especially those built on WordPress, will support a Custom CSS box for your code. You can simply add it there and the changes will appear. If you do not have this option, you’ll need to open up the stylesheet that your site uses. Usually called style.css, the main css stylesheet will have a .css filename. Simply open the file with a text-editor (not Word) and add your new codes to the bottom of the document.

You can even add your CSS code to the HTML files by using Inline Styling. If you want to make a change to only one element, you can use this method, otherwise it becomes too much of a hassle to add the code to every element. For any HTML element, add a style=”…” attribute to it like so:

<div class="black-box" id="black-box-1" style="height:100px; width:100px; background: black;"></div>

^ try inspecting the black box to see the code!

That’s All Folks

This is the basic guide for customizing HTML elements using CSS. For a more in-depth tutorial, I highly recommend taking the free courses at Codecademy or reading all of the documentation at W3schools. Hope this helps!