Musings a place for thoughts to wander

Embracing Limits

Lately I’ve been thinking about getting a new microphone. My usb mic has served me well for many years, but I want to start making higher quality recordings using an audio interface instead. The other day I started researching microphones for recording vocals and fell down the Youtube rabbit hole (you know the one). After countless hours of sifting through videos, I stumbled upon The #1 Rule of Home Recording and found a golden nugget of advice. According to Graham, the man behind The Recording Revolution, the #1 rule for home recording is…

As a fairly indecisive person, this rule surprised me at first. The idea of limiting myself just seems like a bad idea. If I limit my options, I could be missing important things that exist outside the limits. However, Graham believes that limiting your options can set you free. It enables you to make quicker decisions and then get on with whatever you actually wanted to do in the first place.

I spent the better part of an evening looking at a bunch of different microphones (reading Amazon reviews, watching Youtube comparison videos, and skimming various music forums). I could do this for the next few weeks and possibly never be closer to an answer, literally researching myself into oblivion (or as one commenter put it, “It now takes me weeks to get nowhere”). Graham’s rule of limiting options can save me from this. Instead of researching for days, I can do some light (but smart) research, pick a mic that seems good, and get on with making music. In the time it takes to waver between options, I’d be able to actually record a song. This is a much better investment for my time. It also allows me to learn about the new mic and see what, if anything, is lacking. This way I can make a better purchase decision in the future.

Limits in Design

The idea of embracing limits also applies to the field of design. We are limited by our client’s timeline, budget, and project goals. We also have to work in a certain medium, whether it be print, web, or packaging design. Packaging designers are limited by product dimensions and printing techniques. Print designers can be limited by paper quality, number of spot colors, and binding methods. Web designers can be limited by content management systems, screen size, and connection speed. All of these limits actually make it easier for us to do our jobs since we aren’t starting from a daunting blank slate. We almost always have certain guidelines to adhere to. Instead of complaining about them, we should embrace them so we can move forward and actually get things done.

When Limits Get Sassy

Looking back, I can see that limits have played a crucial role in my own growth as a web developer.

My business partner, Roman Jaster, and I worked on the development of domesticfurniture.com. The site was designed by Green Dragon, and it was our job to code it. We decided to look into a new tool for our toolkit by trying our hand at using a CSS preprocessor. After minor deliberation, we chose Sass. According to the documentation, there are different ways you can start using Sass: with the help of various applications or simply through the command line. Roman and I did not have much command line experience and wanted to bypass that roadblock, so we bought Compass App for $10 and were able to jump in right away. We went on to use our trusty Compass App to build 3 more sites, and it worked really well.

Recently though, we felt the need to step up our game and enhance our development process. We wanted to play with the command line, so we could use Sass without an app and try Grunt and Node.js like all of our dev heroes (we’re looking at you Chris Coyier). This process was a little more difficult and required some thorough research into Terminal commands and things like Homebrew, RVM, and rbenv. Now, we’ve learned to use Sass without an app! That being said, I am sooooo happy that we initially chose to pay $10 for the app because it gave us the chance to get into the Sass game without getting bogged down by the command line at the outset. Without Compass App, we probably wouldn’t have used Sass at all due to time constraints, and we wouldn’t have had 4 sassy sites under our belts before moving on to the command line. Limiting our options let us ride our sassy bike with training wheels and gave us the confidence to take them off when we were ready for the command line.

Limits and Creativity

So let’s go back to the video for a second. One of the commenters argued that limiting oneself is bad because it limits creativity. I think the opposite is true. Working within a set of parameters forces us to think of more creative options.

For instance, Roman worked on a book called Making It: Radical Home Ec for a Post-consumer World where limits played an integral role in the end product. Due to budget constraints, he and his collaborator Teira Johnson were limited to two spot colors for the inside pages of the book. Instead of going for something traditional like black and one spot color, they decided to come up with a much more surprising solution using complimentary colors and basic color theory. They chose to use a light blue color along with orange and were able to mix the colors together to achieve a remarkable array of other colors: hunter green, turquoise, and light brown. This technique allowed for a lot of detail and variation in Teira’s illustrations. If the budget hadn’t limited them to two colors, they would not have utilized this clever technique. The limited budget helped them discover a creative solution.

Embracing Limits

Since when do blue and orange make green? Didn’t learn that in preschool.

Embracing Limits

Creativity doesn’t exist in a vacuum. It is usually a response to external stimuli, and in design, it’s a response to a specific need. Embracing limits (and sometimes even adding some yourself) can really help you home in on a solution since it forces you to focus instead of brainstorming yourself into a black hole. So go on, embrace those limits like long-lost friends!

Now, onto buying that microphone…

Portfolio Revisited

I took my first web design class in the Fall of 2011 from the wonderful Roman Jaster. It was the first time USC was offering a coding class through the Roski School of Fine Arts. Needless to say, I really enjoyed the class, so much so that after it was over, I had this weird desire to code something. Anything. I just really wanted to code.

So, I started working on plans for my first portfolio site. I gathered some inspiration from around the interwebz, made some sketches, created initial mockups in Illustrator, and started coding from scratch (with just HTML, CSS, and a few nifty javascript plugins). This was my result: a fixed width site (960px ftw?) with Isotope filtering, lightboxes, a transparent fixed header, and an HTML version of my resume.

Portfolio Revisited

Ah, yes…vintage portfolio goodness…AKA my first portfolio site.

All in all, I was really happy with the site. It was only the second website I had ever created (this was the first: A Sweater Story), before I had any knowledge of things like responsive web design, PHP, content management systems, or any other fancy web shenanigans. The site served me well for about a year, but it proved to be difficult to update because there was no CMS. It also did not reflect the fact that I was beginning to pursue web design. Ahem, remember that fixed width business? Well, that’s not really so fine and dandy anymore…I began to get nervous about sending my site to potential clients for reference, and instead sent them links to responsive sites I had created more recently. When people I knew stumbled upon my old portfolio site, I would say, “Oh, yeah. I haven’t updated it in a loooong time…haha,” murmuring, “Please don’t look at it,” under my breath.

Designing a portfolio site can prove daunting to even the most industrious, experienced designers, and I was definitely a little nervous. It seemed even scarier because I was a web designer designing a portfolio website to showcase my web design. It was basically web-ception, a website within a website. Okay, maybe not that crazy, but still…I had to make a plan.

I set aside some time between client projects to think about what I wanted and why I was making the new site.

My Goals

I wanted to create a site that…

  • reflects current web standards
  • is easy to update
  • is fully responsive
  • feels modern, bold, and a little bit quirky
  • is “mobile-first”
  • has personality
  • has some fun surprises
  • has nice typography
  • has big images

Site Outline

Next, I thought about the content. What did I want to put on the site? How would I organize the content?

I created a list of the different pages on my site and the content that would appear on each page. Then I sketched some rough ideas.

Portfolio Revisited

Some lists and early sketches. Lists are good.

Research & Gathering Inspiration

This part can be simultaneously fun and completely disheartening. There are so many amazing websites out there in the world that it’s easy to get overwhelmed by the collective amazing-ness of other people. I found that it was best to look for inspiration in small doses and to focus on specific details. I went to some web design inspiration sites like siteInspire, Niice, Designspiration, MindSparkle Magazine, and Httpster, but also looked for inspiration in various sites that I’d bookmarked over the years for one reason or another. It was also helpful to look at the websites of designers I admire.

I used Gimmebar to save my inspiration (they have a nice bookmarklet so you can take screenshots of the entire site) and wrote brief notes about what I liked on each site. While gathering inspiration, I would periodically revisit my site list to add or remove items and rearrange things.

Wireframes

Next, I created wireframes using the desktop version of Balsamiq Mockups. It’s a really nice program that keeps everything looking sketchy and hand drawn, so you really focus on the layout and not the design. It basically makes blueprints of websites.

Visual Design

Once I was happy with my wireframes, I moved on to the the design phase. I used Illustrator to create the mockups. I like it because it allows for easy iteration.

This stage of the process took longer than expected. I was having trouble reconciling the design of my old site with the design of my new one. It was a bit of a process, learning to let go of various design elements in order to create something that reflects my work now as opposed to my work from 2 years ago.

Eventually, after being told to embrace my quirkiness and make the site “weirder,” I found a direction. This direction took the form of some cute little creatures from my sketchbook. I also went away from my turquoise color and opted for a bright, cheery yellow instead (though turquoise makes a cameo appearance on my about page and in my Musings). Once the header and main navigation were set, the rest of the site began to fall into place.

Portfolio Revisited

Balsamiq wireframes for desktop and mobile.

Portfolio Revisited

Illustrator mockups. Just keep iterating, just keep iterating…

Development

Thank you, WordPress for being wonderful! But really, WordPress is pretty great. Most of the sites I’ve made are built with WordPress. I love the flexibility of the platform, the community and resources, and the number of amazing plugins and themes that are available. Speaking of themes, I always start with underscores, (or _s for those in the know). It’s a super minimal theme with basically no styling, so you can start off with a clean slate. Just add some HTML, CSS, PHP, and JavaScript magic and you are good to go!

I used Dreamweaver’s code editor to code this site, though I’ve recently switched over to Sublime Text (that dark background just really speaks to me). I also use Emmet which has lots of shortcuts. Sites practically code themselves (not true at all…). Of course, Firebug is a lifesaver when it comes to developing and debugging. Why is that image suddenly in the sidebar? Oh, I forgot to add display: block. Thanks, Firebug. I’ll fix it now. What if my header was lime green instead? Oh, that’s gross…Thanks, Firebug for saving me from myself…This is pretty much how it goes.

Plugins

A WordPress site would not be complete without a bunch of great plugins:

Admin Menu Editor
This lets you set up the backend admin menu exactly the way you want it to be. You can give each page its own menu item and even add some fun icons. It’s especially great for organizing client sites!

Advanced Custom Fields
This plugin is amazing. AH-MAZING. Thank you, Elliot Condon. ACF allows you to create custom fields for specific pages and posts. It even has conditional logic. This means you can have WAY more flexibility than with just the default WordPress WYSIWYG editor. There are also a bunch of wonderful add-ons that make the plugin even more robust:

  • Repeater Field: This lets you create a field that can be repeated over and over and over and over and over…Super useful for things like images, FAQs, and any kind of modular content type.
  • Options Page: This creates an Options page that can contain custom fields. You can use it to create content that shows up on all pages. I use it to store my Secret Panel content.
  • Flexible Content Field: I sorta, kinda freaked out when I found out about this add-on. It is really and truly fantastic. Basically, it allows you to create different content types that can then be added and rearranged to create a post or a page. I use it to create my Musings. You can actually use this add-on to make a completely modular site. So great.

Custom Post Type UI
This plugin helps you create custom post types and custom taxonomies. Really nice when you have a site that requires a blog AND another kind of post.

Custom Post Type Permalinks
This lets you make archives for custom post types with nice permalinks. Fancy!

Duplicator
This plugin makes developing WordPress sites sooooo much easier. If you’ve ever worked on a WordPress site by developing locally, you know that the move to a real, live server can be quite daunting (what with the database changes and serialized data and all). This plugin takes care of you and holds your hand through the whole process. You can also use it to make backups (important) and take snapshots of your site at a certain point in time. This is a must-have plugin.

Google XML Sitemaps
This makes a nice site map to help major search engines (not just Google) index your site.

Advanced Responsive Video Embedder
As the name suggests, this makes videos responsive. It also has a very nice minimally styled player.

MinQueue
This plugin minifies and concatenates scripts and styles for faster site loading. Hooray! Also, concatenation is a great word. It’s like a whole nation of cats.

Add Meta Tags
This takes care of your SEO needs with basic meta tags, Opengraph, Schema.org, Twitter Cards, and Dublin Core metadata.

HTML Editor Syntax Highlighter
This plugin helpfully highlights code in the WP text editor. It’s especially useful for making sure open tags are closed. Hopefully you don’t have to do too much editing in the text editor though…

Preserved HTML Editor Markup
This plugin keeps your code in line in the WP text editor. Because line breaks and whitespace are useful.

WordPress Backup to Dropbox
Backups are important. This plugin keeps everything nicely stowed away on Dropbox.

JQuery Magic

I use Isotope to do the filtering and masonry on my homepage. The new version is really easy to implement and allows for fast formatting.

Fonts

I use JAF Facit for headings and navigation and PT Serif for body copy. Thanks, Typekit!

Icons

Fontello is a really great place for making icon font sets. You can choose from their huge library of icons and even upload your own custom svgs. That’s how I added the little icons to the filters on my homepage. Yay!

Portfolio Revisited

JAF Facit and PT Serif in action.

Portfolio Revisited

Custom filter icons delivered via Fontello.

Validation

When nearing the end of development, it’s nice to run the site through an HTML validator just to make sure there are no really bad errors like missing closing tags or improper nesting. Sometimes I use a CSS validator too.

Launch!

When I  finished the development, did some cross-browser/cross-device testing, squashed some bugs, and added all the content, it was time to duplicate the site (via my friendly neighborhood Duplicator) and move it on over to its new home! Then I added Google Analytics, set up Google Webmaster, and took a break (and probably a nap).

Launching a site just makes everything seem so worthwhile, doesn’t it? There’s that moment of, “Is this really happening,” and then the obsessive refreshing and checking of pages to make sure everything works, followed by a long sigh of simultaneous joy/relief/exhaustion. Yup, launching my site was fun, and I’m excited to keep on keeping on. Also, I’m not scared to send people here anymore.

A Page of Custom Posts with Paginated Navigation

When I redesigned my website, I thought it would be fun to add a section where I could write about things that interest me, share helpful resources, and post inspiration. I wanted a place to muse.

I use custom post types for my portfolio work and decided to do the same thing for the “Musings” section. Essentially, I needed to create a page of custom posts that has paginated navigation on the bottom so visitors can easily view older posts. It seemed simple enough, but it turned out to be a little bit tricksy as Gollum would say…

First I made a page called Musings. Then I created a custom post type (via the Custom Post Type UI plugin) that was also called Musings. I made a template called content-musings.php and added some code to allow for pagination.

The main page for Musings would be located at nicolekikijaffe.com/musings/. I was hoping that clicking on the link to page 2 would take visitors to nicolekikijaffe.com/musings/page/2/. Instead I was greeted by a lovely 404 error page, and I was not amused.

A Page of Custom Posts with Paginated Navigation

Toto, I don’t wanna be in 404-Land anymore…

I did a bunch of different tests changing the name of the page, the custom post type, and the custom post type slug. I also kept methodically resaving the permalinks in case that was the issue. In the end, I learned a valuable lesson (later confirmed by a post on the wordpress forums).

In light of this newfound information, here’s what I did instead:

  1. I created a Page called Musings to hold all the custom posts.
  2. Instead of reusing Musings for the custom post type, I called it Musing (singular).
  3. I did not reset the custom post type rewrite slug, so each musing post is located at nicolekikijaffe.com/musing/postname
  4. Finally, I resaved the permalinks using the postname and…

IT WORKED! Hooray!

Though this solution bothers me a little bit, I think it makes sense because the Musings page contains many different Musings, while a Musing post is just one Musing.