Web Tips

My review of the SF 2011 An Event Apart

My review of the SF 2011 An Event Apart

Eloine

My random thoughts on the 2011 San Francisco An Event Apart that took place on December 12 – 14 

First I have to say this is one of the best conferences I have ever been to but I am told from other attendees that the other An Event Apart conferences are always good. I guess this one was no exception.

The conference was held at the Palace Hotel on Montgomery Street. December is such a lovely time to be in the city. Not only does the Palace Hotel have a gorgeous dining room when you first walk in but it currently has a very large Christmas tree that draws your eyes upward to their gorgeous ceiling.

Christmas Tree at the Palace Hotel

The theme for this conference was all about three days of design, code and content. If I were to rename the event the title would be “Keep it Simple!”.

The subject of content on the web and how we manage content  was the common thread running through all the presentations. How can we use new technologies and strip it down to just the content we seek? The reason we want to do this is to increase conversion rates by getting that consumer the product they want or getting that student the information they need on a university website.

Can the web user and get that content fast and without confusion. This was especially hammered home in the workshop on mobile web design the 3rd day. “Think mobile first” when designing a website and then use progressive enhancement and flexible grids that will scale for larger devices.

Why they hammered mobile first is we need to get that most important content down to 80% of the real estate we had before on the desktop. There is no way to do that except to make that user interface just plain simpler.

There was scads of statistics backing why we should care about mobile. In a nutshell mobile devices will surpass desktop devices by next couple of years in term of how we access web content. If we don’t adapt then they won’t be able to get people to our content.

Keeping an eye on our goal as web content creators

The web is a constantly changing beast of new technologies but the back bone is the old idea that it’s a collective of content we seek. Isn’t that what a library is – a place to seek information?  It is yet now we can buy stuff there as well so it’s a repository for anything and everything.

If I had to sum up the conference with just one slide it would be from Kristina Halvorson presentation on A Content Strategy Roadmap that is of a lighthouse in a storm. A symbolic photo representing our clearly defined goals that is shining brightly in this chaotic storm of stuff that we must sift through. A clear definition of that lighthouse goal can create a quicker path for everyone.

This may seem like common sense but so often we as developers and designers we get so bogged down in the details. This conference was a reminder that yes it is hard to see the forest through the trees but we need to be nimble and rise above the land to see the scale of what we are dealing with.

The Event Apart Conference took three days to tell us what we already know but we get so lost in the minutia of technological complexities that we forget. We’ve forgotten as large organization of individual departments what our ultimate goal is. It’s the content and how to get it.

Following the scent

Through-out the three days the phrase “the scent of information” and the analogies to a fox following the scent trails to find the rabbit. If we lead the web user to a dead end then they’re ultimately a lost sale or a frustrated customer relationship. By cleaning up CSS code, examining form UI and other best practices we can dramatically increase conversion rates. We can keep the customers happy and deliver the content people seek with the least amount of clicks.

Exploring the why this frustration happens was explored in detail as to how our agendas and lack of clear end goals get in the way of production of good content and what to do about.

 

Notes on each session

Did I mention how good the food was?

I took copious notes during the presentation but so did one of the presenters and the facilitator of the 3rd day mobile workshop, Luke Wroblewski. Here are the links to his summation of each of the presentations as well as his website that houses content to much of what he spoke about at his workshop. His understanding and grasp of each presenters knowledge was better than my own so I thought I would share them instead.

How to make an RSS feed with an easy subscribe link

How to make an RSS feed with an easy subscribe link

Eloine

Getting content spread around!

Making an RSS feed for my website seemed like a very simple concept but when I tried to find informaiton on it I ran into a lot of problems. It seemed like everything I tried didn’t work. Welcome to the world of web development!

For a while I used google reader and shared static web pages through it using their RSS feed engine and then used feedburner to feed it back into our website. This allowed others to subscribe to our news section and know when we had new press releases.

In October of 2011 sometime it seems Google stopped that service and now to share things you must be a Google +1 user. Perhaps G+ is cool but to force that on people is not what I am looking for. I want an easy time for people to view my content without forcing them to make an account. So I needed a back up plan.

Simply put if you want an easy way to have an RSS feed from your site the simplest way is just have a blog. RSS is already built into it. But if you have a static HTML website and don’t want the blog format then there are a few more steps involved. Here I will tell you the steps I used to get it working. It’s not automatic but it does give you more control in choosing what is shared and what isn’t.

A demo of what my goal was is to have a static HTML page that feeds into a news page.

Then if someone doesn’t want to keep checking this page for new news releases they can hit the subscribe button where they have a huge choice of ways to subscribe from email to any number of web based web browsers: http://feeds.feedburner.com/losmedanos/NVrV

[box] Step 1[/box]

You need to write an XML file that will be your RSS engine. I used feedvalidator to help me out on this because without that validation I couldn’t complete the other steps and my feed wouldn’t work. At first everything wasn’t right but on each point it gave me hints on how to fix it and finnally I got the green light for success!

Use a text editor or web editor of choice and put all these items in the following order beginning with your heading:

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">

Then you start your channel and for some reason unknown to me you have to put the href in for the address of the feed you are writing. I am not sure why but without it it doesn’t work. In this case the full URL ending with lmcnews.xml is the path for my XML feed that we are writing. Make sure you use your own address:

   <channel>
   <atom:link href="http://www.losmedanos.edu/news/lmcnews.xml"
    rel="self" type="application/rss+xml" />

Give your page a short title that means something because it will be picked up later:

           <title>lmcnews</title>

The link can be anything you want your title to link to. In this case I have it going back to where the list will show up

      <link>http://www.losmedanos.edu/news</link>

I filled in description but I am not using it. Later when you create your pretty feed with feedburner and with buzzboost you’ll have the option to turn these things on or off:

      <description>News from Los Medanos College</description>

Need to define the language otherwise the reader doesn’t know how to handle it:

      <language>en-us</language>

They seem to want to know who is responsible

      <managingEditor>(insert your email address here) (and author name)</managingEditor>

The date format was a bit of a bug for me but I just kept messing with it until I didn’t get errors anymore. This is the date that you would change every time you add a new entry so the reader knows what is new to grab.

      <lastBuildDate>17 Nov 2011 00:00:01 GMT</lastBuildDate>

This is another element that I am not using but it’s in here in case I later decide to separate out my feeds by a subject:

      <category>news</category>

Then comes your items where you can just add the newest item on the top of the last one enclosed in the <item> tag. I don’t have the description filled in but this is where you might have an excerpt of  your article for more information than just the title. The pubDate is of course when you want the article to show. I had to put some past articles up so I just gave them the date of the of the article and started the time at midnight.

The GUID tag must be in there for the reader to know the difference between each article. I’ve read there is no syntax for this but each one must be different. In my experience the feed reader read it versus the actual link tag so to be on the safe side I have made these both have the same address rather than giving it a number or a name that is unique.

      <item>
         <title>California Connects provides new group of  
         LMC's MESA students with laptops, software and Internet access 
         to train others in their communities</title>
         <link>http://www.losmedanos.edu/news/comp2011.asp</link>
         <description></description>
         <pubDate>17 Nov 2011 00:00:01 GMT</pubDate>
	<guid>http://www.losmedanos.edu/news/comp2011.asp</guid>
      </item>

Lastly close your XML with these two tags

</channel> </rss>

There are a number of free RSS creators out there if you a do a google search for RSS generator. I tried a few of them but found that I had to modify the output anyway to get it the feed to work write so hopefully the above is enough to get you started on doing it yourself.

[box] Step 2[/box]

The above text is for a simple feed that someone can subscribe to in the browser and it looks like this:
http://www.losmedanos.edu/news/lmcnews.xml

However if you want to gain broader exposure then sign up for a feed burner account.

Feedburner of course was acquired by google a little while back and like a lot of good things on the internet and they are changing how it works. At the time of writing this post they haven’t quite switched to their beta version. So until then you can just paste in the address of your XML file and then it will tell you if your feed is valid or not. If you have success then follow the rest of the instructions for adding functionality to your feed. You will be given a new address that people can use to subscribe to your feed.

But you aren’t done yet!

[box] Step 3[/box]

One last step is to click on the “Publicize” tab and the “buzzboost” where you can republish your feed as HTML right back into your site. Also on the that tab is a link for “Email Subscriptions” just in case people like to subscribe the old fashioned way with pain old email!

NOTE that if you republish your feed as HTML you can control how it looks by styling with CSS. So if for example you don’t like the bullets you can delete them. Google support documents this pretty well.

What you won’t find in their help page is how to get rid of their logo and you do that by putting this bit of code in your CSS:

#creditfooter {display: none;}

I’m sure there are other ways to do all of the above but so far this is the best way I have found for the situation I am of managing a website without an RSS engine already built in. Any other ideas I would love to hear!

American Legion and Google web fonts

Eloine

This week I did a little work for a local post of the American Legion Post 491. I am in the beginning stages with the client but thought appropriate to talk about right before Veterans Day tomorrow. This is the first time I have actually used Google web fonts. The welcome red header on this page and the subhead (H2) is provided by google web fonts. They have a pretty large variety of fonts you can choose from. I wanted to go this route because I wanted to match as close as possible the image header on the top of the page and yet still make this site so someone else can edit the text without needing to update an image file.

American Legion ost 491
American Legion ost 491

The font I was trying to match was Trajan and the closest I could find was Mate SC on google. It’s pretty simple browse their collection and then to copy the code and add it to your style sheet. I then added a little bit of drop shadow in CSS and transformed it to upper case for the H1 and regular for H1 through H6 for the rest.

The way you add a shadow in CSS is this little line of code:
text-shadow: 4px 4px 4px #CCC;

The first number is the X-offset, the second is the Y-offset, the third is the amount of blur for the shadow and the last three letters with the pound symbol is the color of the shadow.

I have found that the text shadow doesn’t work in all browsers. It just doesn’t show so at least it degrades nicely and doesn’t render it unreadable.

Hope to use Google fonts and CSS font styling more!

Beginning Photoshop CS5 hands-on course in Antioch

Eloine

I will be teaching 6 hours of hands-on training in Adobe Photoshop CS5 at the Antioch Recreation Department. You’ll start with a basic introduction of the interface to feeling comfortable with many of the tools. You’ll fix photos and create your own artwork from scratch.



[button link=”http://www.ci.antioch.ca.us/Recreation/registration.asp” newwindow=”yes”] Registration Information[/button]

 

 

College website gets a makeover

Eloine

I’m excited to be able to show a sneak peak of my colleges new website due to go live on Tuesday! I originally revamped the site in 2003 and it was good for the time but then the content outgrew itself. This new launch was a year in the making with the first half of the year doing nothing but usability testing with our various audience profiles with several different navigation structures. You can read about the process of the usability study here. The main goal was to have a website that was easy to find information and still provided a rich user experience.

Below is a screen capture of our old site. It’s wasn’t even our school colors but the main problem with it was the navigation. The navigation was figured out by a committee in upper management and never really tested with the actual people who would be using the site. You will see that we have “student services” and “student resources” as two major buttons. These two buttons lead to confusion on the part of the student wondering where the information would be located. The question pops up in their head as to what is the difference? To those in academia though student services is considered a department and under it are various services that report to student service managers and deans. This is a problem when listing things under that heading because the managers then say that doesn’t fall under student services when to a student it clearly is a service. By renaming this headings and taking out the term student services all together and just defining a group of users we solved that problem.

Old site

Old college website

 

For the new site I created beta versions and I conducted tests on groups of faculty and staff, on managers and on current students. I then conducted tests on multible feeder highs schools throughout the area that might be potential students so see if they could find the information they needed. Great care had to be given that I didn’t lead them when asking questions as they navigated through the site.

Once all the testing was done and data was tallied and suggested changes were made it was a process of converting thousands of pages through out the site. The original site was created in CSS and HTML but not in a way that it was easy to swap so many pages needed to be manually generated. During this time a little house keeping was also in order to make friendlier URLs where the web address was just shorter and more intuitive. Not an easy task since I had to find where all the possible link references for readdressing might be. I manage about 40 user connections to the college site so in addition to changing content I needed to keep track of content that is being changed without my knowledge.

Never-the-less below is a screen shot of the new sites home. Most of the large display graphics rotate and change on reload so you’ll get something different each time. There is more real estate for news and events in effort to keep the site fresh. You can view the live site here.

New site

New website showing that much of the content is dynamic

 

One of the things I am most proud of is being able to deal with an enormous amount of information that is both an improvement to the navigation of the site but is also a menu system that is ADA compliant (something colleges and government sites have to worry about) and is approved in usability testing. The menu system is called “mega menus” that many large scale sites are deploying because you can organize content in categories much like you would in a grocery store where content is grouped in isles for an easier fine.

In addition to the pages with grouped information specific audiences they don’t have to leave the page they are on if they didn’t find what they need there. All they have to do is hover over the other buttons and .5 seconds (enough to determine they meant to hover) a menu will appear giving them an idea of what content is there. This is called “hover intent” and it allows the user to quickly scan the site without having to leave the page they are on. web users can see this navigation on every page of the college website.

Page showing mega menu and then showing the hover intent

The rest of the site is full of college specific information so nothing very showy but I do like the page with the maps and also the development of our college success stories.

The map before was a flat map that didn’t give you a sense of scale. By making it more in perspective it is easier to see where things are in relation to each other. I used zoomify in photoshop so that the user can zoom in on certain areas of the map to see detail

The user can zoom in on the various parts of the map

The student success page features a jquery/CSS based slider of the newest success stories. I wanted to stay away from flash since many of our students access our site from mobile devices.

jquery and CSS slider

A real effort was made to have almost all pages have a uniform look throughout the site. Many sites do a redesign but it doesn’t go past the first top level pages. We didn’t want to launch until all pages of the site looked like they belonged.

Example of a subsite page

Google docs form for garden data collection – way too simple!

Eloine

This is for everyone who has had to create forms on a website to collect information. Unless there is some sort of automatic widget built in to your content management system this can be a complicated or time-consuming task. Google has made this ridiculously simple though so in case you aren’t aware I thought I would share with you how easy it is to make a slick little data collection form in just a few steps.

    1. Create a Google account (https://www.google.com/accounts/NewAccount) or if you already have a Gmail account just login and click the “documents” link at the very top to login into your Google docs account.

 

    1. Once there Click the “create new” drop-down button in the upper left and select “form”

    1. From here give the form a name and then you can just start filling in what you want the questions to be. Just keep adding until you are done. You can create simple text fields or get fancier and create multiple-choice buttons and drop down selections.In this example I thought I would make a quick and easy way for me to record what I have planted in my garden. I tend to forget and wonder what that plant is. I always think I will remember what it is and where I got it but never do!

 

  1. All the information above is collected into an online spreadsheet that you download and open in excel or just store and access on Google docs. You can even share with your friends and co-workers the information. Depending on the information inputted Google will also create a summary of the information with charts where appropriate.
  2. Google also has a number of themes you can choose from. In this page the garden theme works perfectly.
  3. The next step is to embed this form on your website which Google does through the use of an iframe. You can select “embed this form” under the “More actions” button. Copy the little bit of code and paste the HTML into the HTML of your website and you are done.
  4. Unfortunately there aren’t too many themes to choose from and Google doesn’t yet allow you to create your own and you can’t modify the colors, fonts or images by the steps mentioned above.
  5. If you want most of the functionality of the form but want to edit the appearance then you will have to click “view this form” at the bottom and then view the source code in your browser. Copy the code and paste it into your HTML view of your web-editing program. From there you can edit the CSS and alter the appearance and images of the form to match your site. I will get into this in a later blog post in there is interest.

The coolest thing for me is that now I can update what I have done in the garden without having to go to my computer. I just open my iPhone (picture of my scarecrow on the home screen btw) and bring the web page up in the browser and input what I have done right there in the garden before I forget!

Code snippits I always use in the footer

Eloine

My email program of choice is gmail because it’s so easy to use and they are constantly improving their product. What the main reason is I use it is for is the filtering and search. I have a filter I set up called “code snippits” and any time I want to save a bit of code even if really small I can just go to that filter and search with in that filter for something I saved. Whats more is that I can access gmail from anywhere so my code snippit library is always with me. Adobe Dreamweaver has the ability to save snippits of code which is where I got the name in the first place but I then have to rely on it being on my laptop or desktop machine. With an internet based solution I am not chained to one machine for the snippit of code I saved.

I thought I would check in my snippit library and share a couple that I always use on a basic web template that I set up. This is especially important for large sites and that’s a “back one page link”. A person can always hit the browser back button but if they are actually reading your text then including a back link to the previous page they were on is helpful and ads a touch of professionalism. I tend to include this in my footer file for a template. The idea of a footer in a templage is that it is going to show up on every page. So before the copyright and contact information and extra links I include this little line of java script at puts a small back link on every page.

(<a href=”javascript:history.back();” >go back one page</a>)

Which looks and works like this: (go back one page)

The second item I always include is the copyright along with the current year. Of course your work is copyrighted from the moment you create it and there are arguments about weather you should or shouldn’t use it but all the major companies do so I will just follow the norms of the ones with the really big lawyers! This makes it tough though to keep your site up to date when you want to change the year on every page every year. Surprising how fast a year rolls around! Then all of a sudden people see an old year on your site and regardless of the legal reasons it just looks like your site is out of date.

So problem solved is just to do it once with this little bit of java scrip that inserts the year after your little copyright symbol and then the name of your business or company. Then you never have to think about it again! Build it into your template and it’s on every page hence forth on your site!

This: <strong>&copy; <script type=”text/javascript”> year = new Date();   document.write(year.getFullYear());               </script> Your Company name</strong>

Makes this: ©You’re Company Name