Three things that can immediately improve user experience on your website

Standard

I’m really passionate about user experience and good design so I was excited to listen to UX specialist Jay Goldman talk to our class at HackerYou about just that today. Here are three key things he told us that any developer can keep in mind to improve UX on any site.

Myth #1: You probably think this site is about you

The first question that needs answering when designing is who the website is for. It’s important to remember that both the client and the developer are not the audience for a website, users are. Goldman says that users will spend about 30 seconds of their time figuring out what a website can do for them. In that time, they make a decision to continue exploring or interacting with the company, service or product, or they leave. It’s your job to make sure they not only stay, but get what they came for.

Myth #2: A user will find what they’re looking for 

My own pet peeve when browsing or searching online is coming across something I think matches what I want, but it’s not immediately obvious when I land on a webpage. This happens all the time, and it’s 100% avoidable with good UX. A website’s primary function, or call-to-action, should be immediately apparent. Many companies view their website as something they need to have (a sort-of digital brochure), but don’t appreciate what a good digital presence can do for them.

Myth #3: Your home page is almighty

A home page has to function for everybody, but more often than not, the users that will convert on your site are coming to it through other ways. More often users are finding content by “coming in the side door” – ie. their search results or social media sharing bring them to a landing page or an article page that bypasses the home page completely. This makes it even more important to ensure the information a user is looking for is where they think it is — especially if you’ve paid to bring them to a specific part of your site. Don’t funnel them through a specific path to your site just to redirect them to the home page.

More quick tips for improving UX:

  • Think about how your design will translate into other products ( like emails, newsletters, mobile devices, etc.)
  • Good photography is so important because it can change a user’s entire experience of a website.
  • Line length greatly affects people’s ability to read content. Longer line lengths are more exhausting to read. The New York Times’ Snowfall project is a great example of lengthy content that utilizes shorter line length to help users read with ease. (The white space helps, too!)

Resources

Some usability testing services that can help make sure you (as a developer or client) are on the right track with UX:

Why I supported Canadian University Press’s crowdfunding campaign

Standard
CUP73 staff during our training weekend in August, 2010.

CUP staff during our training weekend in August, 2010.

When news broke that Canadian University Press was in financial crisis, my heart sank. This is an organization that has personally given me so much over the years, on top of providing unique support and opportunities to aspiring student journalists for the past 76 years.

I didn’t know I wanted to go into journalism until I was halfway through my undergrad. Switching programs wasn’t an option because my alma mater doesn’t have a journalism program. Transferring schools specifically for journalism also didn’t seem like the best option, and one of the big reasons why was the Xaverian Weekly and CUP’s presence on my campus.

@danigirl1987 @shanedingman @mattfrehner @ivortossell CUP or j-school is pretty much the choice. Students shouldn’t lose one of those

— Chris Hannay (@channay) February 24, 2014 on Twitter

In many ways, as my former Globe and Mail colleague Chris Hannay pointed out, CUP is Canada’s journalism school alternative. On the simplest of levels, the organization is a co-operative of student newspapers across Canada. It offers services (most notably its newswire and its national conference) and trains this country’s next generation of journalists regardless of how big or small a newspaper or campus may be.

But, on a much higher and intangible level, CUP is an extraordinary network. There isn’t a newsroom in Canada that hasn’t been staffed by someone with fond memories of CUP at some point.

I believe in CUP because I know it works. The organization is built on the backs of people who continuously and unabashedly push their peers to punch above their weight. These relationships extend into this country’s newsrooms, and Canada’s media industry is better for it.

I had been volunteering for the Xaverian Weekly for a few months when I attended my first CUP event — an Atlantic region conference in Sackville, N.B. It was there that I realized there were other people just like me across the country with the same experience and the same goals. It opened my eyes to the broader student press world in Canada, a path that eventually lead me to a position heading up CUP’s editorial services as the organization’s national bureau chief followed by a two-and-a-half-year stint at The Globe and Mail.

Former CUP staffers at our wedding in September, 2011.

Former CUP staffers at our wedding in September, 2011.

This event also introduced me to the man who would become my husband.

Media is stronger when filled with a diversity of people, backgrounds and experiences. CUP plays a role here by attracting those who are passionate and giving them the experience they need to succeed. It exposes students to journalism in an organic way and can give them direction, a network of support and motivation if they choose to pursue it. Magic happens when those hundreds of people get together and share their ideas.

The organization is under the very real threat of shutting down due to a chain of events that have strapped their finances — some of which are CUP’s failures and some of which are not. But, at the end of the day, CUP deserves a chance at a fresh start and the opportunity for real change because what they provide for the next generation of Canadian journalists is too important to lose.

For those who feel so inclined, here’s a link to their Indiegogo campaign. And if you’re in Toronto and want to come out to a fundraiser, that info is here.

How I hacked a Google form

Standard
One of my valentines. The finished product includes 12 valentines and has amassed 7,000 pageviews. Not bad for a random whim!

One of my valentines (the real thing is animated). The whole project includes 12 valentines and has amassed 7,000 pageviews. Not bad for a random whim!

I had a sudden burst of inspiration on my ride home early last week that ended up turning into the adorableness that is CSS Valentines. Because the idea was time-sensitive (I wanted it ready for Valentine’s Day on Friday), this project was a good exercise in taking something from idea to execution in relatively short order.

I also learned some cool new things along the way. Most of the valentines are animated using CSS 3. I found a little JavaScript to randomize the valentines on page load and refresh. And I played around with Facebook’s Open Graph meta tags. But the biggest challenge was setting up a simple, single-input submission form.

Sounds like it should have been a piece of cake, right? Well, not exactly. I was looking for a way to add some interactivity to the site by allowing visitors to suggest their own nerdy well wishes. I also wanted it to funnel nicely into a Google spreadsheet rather than have it send to my email or a base like Wufoo. The most plausible option seemed to be to set up a Google form, but upon first glance there was no way to style the form with my own CSS — something other services (like Wufoo) offer with a bit of effort.

I did some searching and asked a friend, but the answers that turned up all seemed like way too much work than a single-input form should require. That was when I refined my search queries and stumbled on the jackpot. A husband and wife dev team in Australia had posted on the exact topic I was struggling with. Without further ado, here is what I did with a lot of help from the post above.

Once you’ve created your form in Google Drive, click the “View live form” button under the menu bar:

drive-form

From there, you can right-click and open up your developer tools (‘Inspect Element’). Look for the <form> element and copy everything inside and including the tags into your own html document. (I had already styled my submission page, but if you haven’t at this point, now is a great time to do it. Simply style the same way you would any other form.)

The key part here is the link between your submission page and the the spreadsheet created by the form in your Google Drive account. In your opening <form> tag, you’ll see something like this, which is the URL generated by your spreadsheet in Drive:

<form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="POST">

Now what do you do about that ugly confirmation page? An easy code swap does the trick! Simply cut out the opening <form> tag I pasted above and copy this in its place:

<script type="text/javascript">var submitted=false;</script>

<form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="post"
target="hidden_iframe" onsubmit="submitted=true;">

My form redirects back to the homepage after a user submits their contribution, but you could send it to a custom confirmation page that you’ve created or anywhere else you like! My submit page code can be seen here.

The Australian couple’s tutorial has added some great updates if you’re looking for a little more complexity with your form. New topics include: adding verification to your Google forms, fixing out-of-date source code, and a step-by-step process on multi-page forms.

Aside: We learned about the command line and pushing to GitHub this week, so my code is all there if you want to take a look under the hood!

The importance of writing efficient code

Standard
A sneak peek of my new personal site!

A sneak peek of my new personal site!

One week and one website down! Here I am, at the beginning of another week, and I can’t stop smiling about how great everything has been so far. Class has been a really great blend of lectures, group and solo work, one-on-one advising, and lots of fun and laughter, which is helping us all to become good friends. It’s also been entirely exhausting and totally exhilarating.

By Day 3 we were already being assigned our first project — building a one-page site from scratch. (Talk about hitting the ground running!) Above, you’ll see a glimpse of my soon-to-be relaunched personal site. It’s not going live just yet, as I plan to beef it up a bit in the coming weeks before making the switch for real at danielleawebb.com.

Since I have some experience with the wealth of knowledge a HackerYou course throws at you, I wanted to focus on ensuring the code in this first project was as organized and efficient as possible. “Oh, I’ll go back and clean that up later,” I told myself countless times during the part-time course. And, as you’ve probably guessed, those files and folders are still a mess a year and a half later. Not this time, though. This time, I forced myself to care if I was writing even the smallest of CSS properties a second time. A good example of this efficiency can be found in the text shadow that I added to much of my display copy. Rather than adding one line of code to each selector where I wanted the shadow, I wrote it once like this:

.textShadow {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

Then, wherever I wanted to add shadow to a particular element, I simply added a class of “textShadow”. Continuing to train my brain to think about code in this way will have an incredible payoff in terms of productivity later when I start working on tight deadlines with more output than I’m used to.

I also worked hard to make use of the keyboard shortcuts in Sublime Text. For any Sublime user out there who doesn’t know about the Emmet plugin, I highly recommend incorporating it into your practice. This cheat sheet has saved me so much time already in only the few days I’ve been using it so far.

Increasing efficiency and productivity is my main focus right now as I know that time will equal money once we start taking on clients and projects. In the meantime, though, there’s still satisfaction in knowing that you didn’t spend five minutes on something that could be done in two.

Hello, world!

Standard
Photo by Craig Garner.

Photo by Craig Garner.

Tomorrow, I am starting a pretty exciting chapter in my life. I will be part of HackerYou’s inaugural full-time, front-end web development bootcamp. Twenty-six of us will be holed up in a great new tech education space in downtown Toronto, learning from some of the best industry professionals in the city, and transforming into awesome new web developers.

Eight hours a day. Five days a week. Nine weeks. That’s all it’s going to take. Sounds a bit daunting, right? I’m expecting it to be hard. I’m expecting to learn a whole lot. I’m expecting the time to just fly by. And I’m expecting to be wondering if I made the right decision on occasion. But I’m also expecting to persevere — and to be so glad I did.

As someone whose entire career thus far has been in journalism, it’s a little scary to be possibly (read: probably) leaving that world behind. (The reasons behind that decision might make for a good post in the future.) Thankfully, I know this bootcamp is going to be a great experience. You see, about a year and a half ago, I was a part of HackerYou’s very first part-time web dev class. It showed me I could hack it in this world and that I was good at it. And it brought me back more determined than ever.

I crave innovation and creativity and being part of something exciting — all of which can be found in this bootcamp. So be sure to check back at this space over the next nine weeks (and beyond) for updates on my adventures in this course in particular and musings on web dev and tech in general. We’re also ready to take on client work, so please get in touch if you have a project that you think I’d be perfect for!