February Project Launches

February was a busy month at the office! I’m happy to report that two big projects I’ve been working on since I became full time have FINALLY been launched! Both are Sacramento State related. The are part of University Enterprises, which is an organization in charge things like the Bookstore and Campus Dining (helped design this site too).

The first project is the California Intern Network.

This one I fully designed. Because it’s one of four sites we are doing for UEI, I had to pull my design cues from Dining, which launched back in August as well as UEI Main (see below). Originally their Student Employment Services, the CA Intern Network is a rebrand and naturally the site had to reflect that.

The second site is UEI’s main site.

While I didn’t fully design it like I did with CA Intern Network, I did assist with it in many different aspects. After our lead designer left, I took over the project; I made design changes when the client requested them and helped with content integration.

Our team has one more project with UEI that will hopefully launch in the coming months.

My Top WordPress Plugins

I remember when I made the switch to WordPress. One of the enticing things about WordPress was the wide variety of plugins available. Over the years of being a WordPress developer my goal was to see if I could create what I wanted first before installing a plugin; however sometimes it can be a headache, and there are plugins that can easily take care of the job.

Akismet

Spam was the number one reason I switched to WordPress, and this baby does a phenomenal job! If you’re a blogger or allowing comments on your site in any way, this plugin is a must-have.

Bad Behavior

Between this guy and Akismet, I rarely have to worry about spam. Bad Behavior acts as a gatekeeper along with other spam preventing plugins to keep spambots out.

Contact Form 7

A simple contact form that allows you to do so much. It has everything you need to keep it simple or do a lot with. It also has built-in spam protection as well. I’ve used this form over the years to create anything from a basic form to a reservation system. It’s our go-to form at work.

FD Feedburner Plugin

I use Feedburner to manage my feeds, and this handy plugin directs all my feeds to Feedburner. That way I can monitor my subscriptions all in one place. I also use Feedburner to have it post to Twitter whenever I blog.

Maintenance Mode

Activating this plugin allows me to work on my current theme logged in without anyone else having to view my work in progress. In other words, it throws up a very basic splash page letting the user know the site is being worked on. I find this plugin pretty handy when I am doing some clean-up on a theme that will take more than 10 minutes, or if working locally via MAMP is too much of a hassle.

Relevanssi

A coworker introduced me to Relevanssi this week, and I have to say I am very impressed. It’s pretty much what the built-in WordPress search should be. It lets you see what users are searching for on your site, what they find, and sorts their search results in order of relevance.

Wordbooker

This plugin makes it really easy to have my posts automatically show up on Facebook and in the format I want. When you post a link on Facebook, I like that it shows an excerpt of the link, title, and thumbnail. Wordbooker will do that for you, plus you can target it to post to a page and a profile.

WordPress SEO by Yoast

All-in-One SEO used to be my SEO plugin of choice, but WordPress SEO by Yoast has evolved so much over the years and works wonderfully alongside Themble’s Bones theme, which is my development theme of choice. It does everything I need it to right out of the box and then some.

How to Display a Facebook Page Feed in WordPress

Recently at work a bunch of clients have requested to put their company’s Facebook page feed on their web site. Normally, I try to avoid doing this because for one, it’s tricky, and two, you want to use social media to drive traffic to your site, not to your Facebook page. Well, despite what I want, we have to do what the client wants.

As I mentioned, doing this is tricky. Facebook likes to change their feeds around all the time, and they don’t make it easy for you to find. Instead, I had to do some major digging. There are two things that come into play when finding your page’s RSS feed: the url and the ID.

Amit Agarwal posted a great article on his blog that contained A Directory of RSS Feeds of Popular Social Sites. He mentioned two ways to get your page’s ID, the second way being the easiest.

To get the ID of any Facebook Page, go to graph.facebook.com and replace Digital Inspiration in the URL with the username of any Facebook Page. Also, Facebook does not offer RSS feeds for individual profiles.

By doing this it will give you a bunch of information about your Facebook page, which will include the ID.

How to Display a Facebook Page Feed in WordPress

Then you can plug it into this url:

http://www.facebook.com/feeds/page.php?format=rss20&id=YourFacebookIDNumber

The last thing you have to do is grab this code:

< ?php include_once(ABSPATH . WPINC . '/rss.php');
wp_rss('http://www.facebook.com/feeds/page.php?format=rss20&id=YourFacebookIDNumber', 3); ?>

Plug in your Facebook RSS feed url, place the code wherever your want your feed to show up, and then style to your liking. Super easy!

You can see examples of where I’ve used this method on two client sites:

Additional Resources

[EDIT]

The above method for fetching a feed has recently been declared deprecated by WordPress. Instead, use the function fetch_feed. It’s a little more in depth, but it allows you to have a bit more control over how the feed is pulled.

A Lovely Achievement

Last night was the 4th Annual Next Talent Awards, in which students at The Art Institute of California – Sacramento are recognized for their outstanding work. Up until this year it was primarily a film festival for the film students with honorable mentions going out to the other departments. This year they decided to get all the departments equally involved and give out awards to each one.

For the Web Design & Interactive Media department there were 4 awards: Best Coding/Development Project, Most Innovative Project, Best Client Project Project, and Best Design. I submitted a couple of my projects for the different awards, hoping I’d win.

I’m proud to announce that I won the Best Design award for LovelyGeek.net!

What was even more exciting was that my friend and coworker, John Cremer, won the award for Most Innovative Project. He put together an awesome web site that utilizes HTML5 and a video-based background.

It was pretty neat to be able to come back after graduating and get some recognition for all of my hard work. Plus it was cool to have a friend win with me!

So how’s life after graduation?

It’s been almost two months since I’ve graduated, and one of the questions I’ve been getting from people is asking how life is. Well, in a nutshell, life is great.

To start with, I can’t tell you how much I love not having homework. Being able to come home from work everyday and know that in the back of my mind I don’t have some assignment or project to work on is a wonderful feeling.

I still get the Sunday night anxiety attacks, you know, the ones where you realize it’s Sunday and you haven’t gotten a darn thing accomplished over the weekend. Except then I realize, wait a minute, I have no school.

Shortly after I graduated I started having dreams that I forgot to take a class or I had to go back to take one and was super unprepared. Luckily those dreams have subsided.

It still hasn’t fully sunken in yet that I don’t have to go back to school ever again (unless I want to), but I’m sure as time goes on the feeling will pass.

Spring Portfolio Show

After many quarters of watching my friends participate, it was finally my turn to be in the quarterly Portfolio Show.

When you’re a graduate in the portfolio class, part of the requirement is to participate in the show. You get to stand at a table with your web site up on the TV for 4 hours and present/talk about your web site, your work, what you do, etc. to anyone that comes by. It’s kind of like being a vendor at a trade show and a reverse job fair.

The first two hours are for industry professionals only. It’s good if you don’t have a job lined up after graduation because you can talk to different professionals that are looking to hire someone in the industry fresh out of college. Despite having a job lined up already, I was able to make some great connections should my situation change down the road.

The last two hours are for friends, family, and students to come out and show their support. Both my family and Joshua’s family showed up along with a few friends.

There were four other students that showcased their sites at the show with me. Sean and I were the only two getting our Bachelor of Science, whereas everyone else was getting their Associate of Science.

So now what?

Now that the Portfolio Show (and graduation) is over, what does this mean for me and a job?

I’ve been interning for a web design company called Digital Gear (don’t worry, the site is currently being redesigned ) for almost a year now, and yesterday I accepted an offer to work full time with salary.

I’m really happy that I am going to continue working for a company that’s been so good to me with a team I love.

Digital Typography

In Digital Type, we had two projects throughout the quarter. The first was a type blog, and the second was a design for an alternate industry.

Type Blog

The type blog assignment began by us doing some research and pitching a blog idea on two typeface designers of our choice. I chose John Baskerville and Emil Bertell. After hearing everyone’s pitches, our teacher put us into groups based on similarity of the designers we chose. I was put in a group with two other people in which we were to create a Bodoni & Baskerville blog.

From then on, every week we each had to blog at least two posts. We also had to work on a design for the blog. The design had to be type only. Any shapes, imagery etc. had to be made out of type, so we definitely were forced to get creative. We found typefaces for social media and other decor, so we were able to stick to the parameters of the assignment. Everything in our design was made out of type with the exception of the content in the blog post itself.

A few weeks in our teacher decided to switch our blogs around, so we got another group’s concept and they took ours. For two weeks we had their concept and had to work on creating a blog design and making posts. Then our teacher switched things up again, and we got our original concept back.

The live blog is called Bodoni & Baskerville: The Letters. By the end of the quarter our teacher wanted to make sure we had a solid design before coding it if we chose to do so.

I was apprehensive about working in a group on this, mainly because I’ve had nothing but bad experiences working in groups; however my group members and I took care of business and ended up working really well together. It always helps if one of the group members is your friend too.

Alternate Industry

Week 3 our teacher passed around a Tiffany bag that contained pieces of papers with “boring industries to design for” on them. I picked out accountant, so I had to design a homepage and interior page for the project. First we had to write up a creative brief, and then we had to come to class with five completely different designs.

Each week our work was critiqued and we were required to go back in and improve the design. I got to a point in my project where the design was good, but I had to work on picking the right stock photography. Luckily content wasn’t a problem because I got my industry-based content from Not Lorem Ipsum.

Computer-based Training

Normally the Computer-based Training class is just another class to learn more WordPress, but considering there were only three of us in the class and we know WordPress, we actually did computer-based training. Go figure.

We started out the quarter by giving speeches and presentations that had nothing to do with our industry as practice. This built up to us putting together an industry-related tutorial using screen-captures and being filmed in the studio.

I chose to do a WordPress training video for Digital Gear. Ideally it would be given to clients after they have gone through training for WordPress, and the video would serve as a refresher.

I ran into a lot of challenges with creating this video. First I found out too late that the footage shot in the studio didn’t have working audio, so I didn’t have any footage of myself in the final video. Them my Camtasia files got corrupted somehow, and by the time I was able to rerecord them, my free trial of Camtasia expired; I had to install WordPress on a subdomain, transfer the example theme, and set Camtasia on my husband’s desktop to rerecord. Add this to the stress I was having from my other 4 classes… yeah!

In the end I got through it and produced a fairly decent video first time around. We’re talking about breaking up my video into shorter videos that we can give to clients along with a training document. We’ll see what happens!

Portfolio 2

After taking Portfolio I back in September and watching my friends graduate, it was finally my turn to take Portfolio II.

Portfolio I/Portfolio II are required classes students take their last quarter right before they graduate. If you’re in the associates program, Portfolio I is the only one you take. If you’re in the bachelor’s program, you take both with Portfolio II during your last quarter. Both prepare you to get everything you need in order to participate in the end-of-the-quarter Portfolio Show where graduating students display their best work in hopes of getting hired.

This quarter I pushed my branding further and redesigned everything. Afterall, I mentioned in Portfolio I, “Will this be the same when I graduate in June of 2012? Probably not. I intend to push the design further.” My logo, business package, and site all got a fresh new face.

The Logo

Before – My logo from Portfolio I

The typeface is CAC Pinafore using Trebuchet MS for the “Design” part and glasses designed by me. The concept behind this logo was to find a typeface that was similar to my handwriting while looking for a mark that symbolized being a girlie geek.

I went through many different concepts (brackets, argyle, hearts, a mouse arrow in the shape of a girl, etc.) before I ended up using glasses enclosed with brackets; I felt both represented me perfectly. Glasses symbolize geeks/nerds (plus I have a thing for glasses, hehe) and the brackets tribute to the coding I do as a web designer.

After – My new logo

When Anna Wintour, editor-in-chief of Vogue magazine, accepted the 2011 Webby Peoples Voice Award for Fashion, her speech was simple: “Sometimes… geeks can be chic.” That was the driving force behind my new logo.

The typeface is Mishka by Emil Bertell with glasses designed by me. This time I wanted to go with something that was more elegant, really emphasizing the “lovely” out of Lovely Geek. Out of all the other typefaces I looked at, Mishka was exactly what I was looking for.

I changed the glasses slightly, so they matched the typeface I chose. I simplified them because another classmate remarked that my old glasses looked like a bra. Then I began exploring the concept of adding different kinds of brackets around the glasses, depending upon the item; for example, I’d use curly braces { } around the glass for print material, <> greater than/less than brackets for the web, and so forth, but I moved away from the brackets seeing as several people began copying that concept from me. Instead I integrated the glasses with the typeface.

The Business Package

Since Portfolio I, the business package requirements slightly changed. When I took the class we were required to have a folder with our résumé, letterhead, envelope, and business card. The problem with the letterhead was no one really knew what to put on it, so last quarter they changed it to where you write an artist statement on your letterhead instead.

This time around, I also had to meet with career services to build my résumé, fill out forms, and write my artist statement. Luckily my résumé was in really great shape (just a few small edits), and I nailed my artist statement. All I had to really focus on was incorporating my branding with it.

By the time I got logo nailed down, I decided for the color scheme I wanted to go in a Breakfast at Tiffany’s type look, using blue/turquoise, black, and white in my branding.

Folders – GBC Cover Letter Portfolio from Staples
Labels – Martha Stewart Home Office Metallic Labels
Business Cards – Moo Cards
Envelopes – Zazzle
Resume & Artist Statement – Printed at FedEx Office

The Leave Behind

My leave behind from Portfolio I was originally going to be keychains using keyboard keys that would spell out things like HTML, CSS, PHP, and whatnot, but after running out of time that quarter I ended up just putting my résumé and some screenshots of my work on a CD.

This time around, I was on the path of looking at wedding favors and seeing how I could make it less bridal and more geeky. After all, I figured going the wedding favor route was a cheap way to go bulk and nice. I also was very adamant about making sure that whatever my leave behind was it wouldn’t be your average SWAG that people forget about.

After asking different people, the reality was most people were inclined to have a positive reaction to a leave behind if it had something to do with food. And considering this would be the first year culinary wouldn’t be required to have food at the Portfolio Show, the odds were definitely in my favor if I provided something edible.

My first idea was cookies because I bring homemade cookies into the office, especially when we’re having important in-office client meetings, and everybody LOVES them. But, someone in my class noticed the success there and was planning on brining cookies in because if I can make people happy with cookies, they can too. Can you tell I’m getting tired of copycats?

In the end, I decided to go with homemade fudge, as in the homemade fudge I make for everyone around the holidays. My sister suggested fudge because, “That’s your thing! You make fudge for everyone, and it makes them happy!”

Since I was going with the whole Breakfast at Tiffany’s type theme, I wanted to do something similar to Tiffany boxes. Not only would it match my theme, but the color would go well with the black table I’d be displaying my stuff on. While both Party City and Michael’s had “Tiffany boxes” neither one of them came with ribbon, which I didn’t feel like having to buy and cut separately. Instead, Party City had these turquoise popcorn type boxes that came with a small cellophane bag and ribbon. Plus I could put a sticker with my logo on them.