Browser support for SVG isn't quite as simple as yes or no. In addition to some quirks on how that support plays out, it depends on how that SVG is being used. One common way is right within an image tag, like <img src="image.svg" alt="description">.

How can you detect if a browser supports SVG use in that way?

It's one thing to just know which browsers do. The only real danger zones are IE 8- and Android 2.3. You could do user agent detection, and while I wouldn't want to get too judgey about that, it's generally a bad idea.

I was looking at SVGeezy, a mini JavaScript plugin specifically for helping with SVG-as-img fallbacks. Of course, in order for it to work, it needs to do a feature detect. In the source code, it's a simple a one liner:

supportsSvg: function() {
      return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1");
    }

I had never seen document.implementation.hasFeature ever before, so I asked around a bit, as it seemed a little too good to be true for something I'd never even heard of. Most documentation out there is pretty generic and suggest great browser support, making me even more skeptical.

The deal is: it's pretty much useless. It almost always returns true for everything. Except, apparently, in the case of SVG-as-img, when it's correct. As a skeptic, I went about creating a test to see if this was really true.

The first thing I did was check how Modernizr detects it, as the go-to source for feature detects. Important note here: Modernizr's default SVG test (Modernizr.svg) is not testing SVG-as-img support, it's testing SVG support as an <object> or <embed>. Just be aware of that when using it for fallbacks. Test the right thing (they have tests for all the ways you can use SVG).

They have a test specifically for SVG-as-img that was like this:

Modernizr.addAsyncTest(function () {
      var img = new Image();
    
      img.onerror = function () {
        addTest('svgasimg', false);
      };
      img.onload = function () {
        addTest('svgasimg', img.width == 1 && img.height == 1);
      };
    
      // 1px x 1px SVG; must be base64 or URI encoded for IE9... base64 is shorter
      img.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==';
    });

This creates an new image element, injects a Data URI of a 1x1 SVG image then either waits for it to fail or load correctly.

Obviously different than the hasFeature test, so I created a Pen that showed the results of both methods. Then I tested in all kinds of different browsers. A mixture of those which are known to support SVG-as-img and those that do not. In all cases, the results were identical. Weird, but pretty cool!

The original Modernizr test is what they call an "async" test, meaning it relies upon callback functions to give an answer. Modernizr generally prefers "sync" tests in which as soon as the test is defined it has the right answer.

So, after talking about it with the Modernizr team, it is now the default test for SVG-as-img. It's not quite out in a release yet, so for now you'd have to just run it.

Modernizr.addTest('svgasimg', document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#Image', '1.1'));

I'll update this post (and the version we run on CodePen) as soon as it's out.

Thanks to Patrick Kettner for overseeing it getting into Modernizr, Stu Cox for the feedback and OKing the replacement of his original method, Ben Howdle for knowing about the cool hasFeature() and using it in SVGeezy and Mike Taylor for verifying it's usefulness.

Oh, and if you you detect the browser doesn't support SVG-as-img, you'll want to flip out the src for an image format that is supported. Probably the-same-image.png either automatically based on a naming convention or selectively based on a data-* attribute.

Test for Support of SVG as img is a post from CSS-Tricks

The open source movement has been responsible for many great innovations over the past few decades. Linux, the Apache Web Server, and Rails are just a few examples of open source projects that have elevated the web industry to new heights.

In this post I want to discuss the ideas around the open source movement, and why you should consider giving up some of your free time to work on an open source project. Just to be clear, you don’t need to be a programmer to work on an open source project. In fact, it’s often the case that the people open source projects need the most are creative designers, copywriters, and translators.

Why Bother with Open Source?

The Open Source Initiative Logo

The open source software movement is something that many people outside the tech industry struggle to understand. Why would you give up your free time to work on something you’re not getting paid for?. I’ve heard this question many times when speaking with friends and colleagues from outside the industry. To them it seems counter-intuitive to work on something for free. So if you’re not getting paid for this work, why should you do it?

Note: Some people do get paid to work on open source projects. For example, Google engineers get paid to work on Chromium as it’s their full-time job.

There are many benefits to working on an open source project. For me personally, the biggest thing has been having the opportunity to work with some really great people. Open source allows you to make connections far outside your normal circle of friends and co-workers. Casting out into such a wide pool of talent can be daunting at first. You might have to deal with issues you haven’t encountered before, like language barriers or working with people in different timezones. All of this is good experience though, which leads me into my next point.

Working on an open source project allows you to develop your skills, learn new things, and gain valuable experience working on a collaborative software project. I can’t stress enough how important this is, especially if you’re a student or just starting out in the industry. The experience that you’ll gain through working on an open source project is invaluable. This isn’t just limited to developing technical skills. Being able to function as part of a team is also really important, and something that companies look for in job applicants.

Finding a Project

Hopefully by now you’re sold on the idea of working on an open source project and eager to get started. But how do you find a project to work on?

The first thing you should do is to look at the software you use every day. Are any of those products open source? If so, those projects are the ones you should check out first.

The chances are you’re going to do much better work if you join a project that builds something you use regularly. You’re more likely to notice little bugs and things that could be changed to make the product easier to use. This concept is generally referred to as dog fooding.

The Explore GitHub page is a great place to find interesting projects to work on.

If you’re still stuck for a project to work on take a look at GitHub or Google Code and browse the projects until you find something you’re interested in.

There are exceptions to the ‘dog fooding’ rule. You might find a product that you won’t use every day, but if it’s having a real impact on the world, that might be enough to keep you motivated. The Google Person Finder project would be a good example.

Contributing to a Project

Now that you’ve found a project to work on, where do you start? The first thing you should do is check out the project documentation. Many projects have a wiki page that outlines how to get involved. This will usually explain the project’s mission and the process for making your contributions. It’s also worth looking out for a coding style guide that defines how your code needs to be formatted for it to be accepted into the codebase. Some projects will do things differently to others so it’s important to read through this information if it’s available. Again I’m falling back to my experience as a developer here, but you may find guidelines for designers, copywriters, or translators too.

The next place you should look is the project’s issue tracker. Browse through the list of issues and try to identify something you’d like to work on. Some projects (especially larger ones) maintain a list of issues that are ideal for newcomers to the project.

Some projects tag issues that are ideal for newcomers, as shown here with the Rails project.

Many projects have forums or chat rooms where members hang out and chat about the project (as well as other things). Don’t be afraid to jump in and introduce yourself to the community. These people are there for the same reason you are. They just want to build something meaningful and have fun along the way.

You Are Not Your Code

Okay so now you’ve joined a project, submitted your first pull-request, and are waiting anxiously for someone to review your code. Then an email drops into your inbox. You open it and find that your pull-request was rejected, or someone is questioning a design decision you made. It’s natural to feel a little disheartened at this point, especially if you’ve worked really hard on your contribution. The key here is to not get too defensive or start an argument. I’ve seen this happen many times and it almost always ends with someone leaving the project.

Just remember, you are not your code.

The objective of code review is to make sure that a project’s codebase remains high quality and sticks to a consistent style. It would actually be worrying if every patch or pull-request got accepted without any discussion. This would probably mean one of two things. Either your contribution just got blindly accepted, or you’re a genius programmer (hint: click the link, it’s a great talk).

That said, you can reduce the chances that your contribution will be held back by ensuring that you follow the guidelines in the project documentation. If you’re making any big changes it’s a good idea to discuss your design decisions with the community before you write any code.

Final Thoughts

The best thing about working on an open source project is that you have control over what you work on. Contributing to open source projects is fun, that’s why people do it. If you’re not having fun, you’re free to go work on something else.

If you’ve never contributed to an open source project before I strongly recommend that you give it a go. You’ll gain some great experience and meet some fantastic people along the way. You never quite know where the journey will take you.

Useful Links

• Explore GitHub
• The Myth of the Genius Programmer

The post Getting Involved in Open Source Projects appeared first on Treehouse Blog.

by Amelia Meman

The benefits of task runners in software development is obvious. They help to automate common, often tedious tasks and let you squarely focus on more important things, like writing awesome code. Seriously though, the ability to automate tasks such as image compression, minification, unit testing and much more is a huge time saver.

For many front-end developers, the goto task runner to-date has been Grunt which allowed you to define your tasks using JavaScript inside of a file called Gruntfile.js (AKA a Gruntfile). Basically, if you knew JavaScript then setting up a Grunt task was a fairly straightforward process and the breadth of third party plugins to for other tools such as JSHint, Sass and Uglify makes it one of the most flexible tools available.

For the most part, Grunt has been the task runner of choice but recently, a new one named Gulp.js has been getting a lot of attention for its ease of setup and incredibly easy configuration file format which makes it easily readable and manageable.

In this tutorial, I'll show you how to install Gulp and create a simple configuration file to get your feet wet with this great new task runner.

Installing Gulp.js

Gulp.js is a Node-based task runner just like Grunt and as such, you'll need to have Node.js installed to use it. This could be done several different ways, especially depending on your operating system. Being on OS X, I chose to use nvm, Tim Caswell's awesome script for managing multiple versions of Node.js. You can also download the binaries directly from the Node.js site. If you're totally new to Node.js, be sure to check out the Nettuts+ series on getting up-to-speed on Node.js.

Gulp.js comes packaged as a Node module making it incredibly easily to install using npm (Node Package Manager). To install Gulp, open up your terminal and type in the following:

npm install -g gulp

This pulls Gulp from the npm registry and configures it globally on your system so you can access via command-line.

For all intents, Gulp.js is installed at this point and you're ready to start using it with your projects.

Setting Up Your Project to Use Gulp.js

To use Gulp in your project there are a couple of key things that need to be done:

• Install two dependencies packages
• Install any plugins you'd like to use
• Create a Gulp.js file to define the tasks you'd like to run

These steps need to be done inside your project's directory so that the packages and configuration files are available to Gulp.

First, lets install the dependencies:

npm install --save-dev gulp gulp-util

Now, we'll need to install the Gulp plugins that will perform the tasks that we define in our configuration file. These plugins are also Node package modules so we'll use npm again to install them.

npm install --save-dev gulp-uglify gulp-concat

In my case, I'm installing two plugins which will allow me to minify/compress my JavaScript code using the Uglify.js compressor and concatenate all my JavaScipt files into a single source file.

Notice that I used the --save-dev flag for install the Gulp dependencies and the plugins I'll need for my project. This ensures that an entry for each one is made to my devDependencies list inside my package.json file like this:

{
      "devDependencies": {
        "gulp-util": "~2.2.13",
        "gulp": "~3.5.0",
        "gulp-uglify": "~0.2.0",
        "gulp-concat": "~2.1.7"
      }
    }

This ensures that any package dependencies for this project can be easily installed later on using npm. If you don't have a package.json file in your project, just type in npm init at the command line or open a new file in your editor, include opening and closing curly braces inside and save it as "package.json". Then rerun the npm commands listed above to update it. Note that adding the curly braces is required. Otherwise, when you try to use the --save-dev flag, npm will throw an error saying it's not a valid JSON file.

While I'm only using two plugins for my tutorial, Gulp offers over 200 plugins for all types of functionality including:

• LiveReload (gulp-livereload)
• JSHint (gulp-jshint)
• Sass (gulp-sass)
• CoffeeScript file compilation (gulp-coffee)

and many more.

The Gulpfile.js File

Like Grunt, Gulp has a namesake configuration file called gulpfile.js that defines all of the required plugins along with the tasks you'll be running. You'll need to create a file called into the root of your project folder.

The syntax is straightforward and terse making it very readable and easily understandable:

var gulp    = require('gulp'),
          gutil    = require('gulp-util'),
          uglify  = require('gulp-uglify'),
        concat  = require('gulp-concat');

This simply tells Gulp which plugins are required to complete the defined tasks.

Next up, we need to define the tasks that will be run by Gulp. In my case, I'm looking to do two things:

• Compress images
• Minify my JavaScript files

Defining a task is for all intents a JavaScript call. We use the Gulp method task() to define the task we want to run:

gulp.task('js', function () {
        gulp.src('./js/*.js')
            .pipe(uglify())
            .pipe(concat('all.js'))
            .pipe(gulp.dest('./js'));
    });

Looking at the code above, there's a mix of method calls from the plugins I specified as required. The first method, task(), takes a semantic name for the task (in this case ‘js') and an anonymous function which contains the real meat. Let's breakdown the code:

gulp.src('./js/*.js')

The src() method let's me specify where to find the JavaScript files I'd like to compress and turns them into a stream representing a file structure that can be passed to the plugins for processing. This is part of Node.js' Streams API and one of the reasons for Gulp's ability to have such a terse, concise API syntax.

.pipe(uglify())

The pipe() method takes the source stream derived from the src() method and passes it to the specific plugin being referenced. In this example, the uglify plugin would receive the source stream.

.pipe(concat('all.js'))

Like uglify, the concat plugin receives the source stream via the pipe() method and concatenates all JavaScript files into one file called "all.js"

.pipe(gulp.dest('./js'));

Finally, using Gulp's dest() method, all.js is written to my target folder. The process if very straightforward and very readable.

The last thing we need to do is update the default Gulp task to run our "js" task.

gulp.task('default', function(){
        gulp.run('js'); 
    });

By going back to the command line and typing in 'gulp', Gulp finds the gulpfile.js file, loads any required plugins and dependencies, kicks off the default task and runs my 'js' task. You can see the end result here of the minification and concatenation of my jQuery JavaScript file:

Taking this a step further, Gulp also provides another method called watch() which provides a means for automatically checking a specific resource for changes. This allows for great automation of tasks versus constantly having to manually type in 'gulp' at the command line.

gulp.watch('./js/*', function () {
         gulp.run('js');
    });

When this runs, Gulp will continue to monitor the specified directly for changes to files and if a change occurs, will re-run the 'js' task to minify and concatenate the JavaScript files. Very cool!

Shifting to Gulp.js

When I initially heard about Gulp, my first reaction was "Oh brother another tool!". Boy was I off. Gulp.js truly does have a compelling syntax and API that makes setting up your tasks a breeze. While it doesn't have the breadth of plugins that Grunt has, its plugin repository seems to be growing at a nice clip, especially now with so much developer interest.

I've already spoken with many developers that are actively migrating to it so it seems this is a great time to get into Gulp.js.

When I realized I had written what seemed to be a course (i.e. not my usual article or book), I was left with a sense of panic. There are so many options for running an online course, and all of them seem slightly confusing or time-intensive to set up.

Then I remembered the autoresponders feature in my newsletter application (I use MailChimp, although every newsletter software has it). I could trigger lessons with autoresponders and deliver course material to where most people spend most of their day: the inbox.

Another problem was that the course was about writing a book, and some of the lessons were slightly onerous — like “Write a first draft.” So, setting a fixed time delay wouldn’t work because some people complete things like that much more quickly than others.

Instead of automatically firing off each lesson after a set amount of time, I created a series of lessons via autoresponders that fired only when the previous lesson was marked as finished. That way, I got to deliver each new lesson only when the student had finished the previous. This method does not require you to configure any website, plugins or additional software (beyond setting up a mailing list and creating pages on your existing website, which you probably already know how to do).

I made my own course, Write and Sell Your Damn Book, free for a few reasons. First, I was able to bring some sponsors on board to give me enough money to make it worthwhile to create and set up. Secondly, I felt that the course material should be available to anyone, on any budget, who is writing a book.

Thus, the course made money before it launched, but the downside is that it made a fixed amount of money. I set up additional (albeit minor) revenue streams for it — affiliate links on Amazon to recommended books on the same subject, links to my own paid books, as well as the course in Kindle format, just in case people wanted to read the material all at once.

Using the method outlined below, I created a self-paced email course that had over 1,000 registrations in the first 24 hours, and almost 2,500 in the first week. There are other ways to do this using MailChimp, such as triggering the completion of a course with a URL, but this is how I set up mine.

1. Create A List

This list is only for people who will take your email course. Make sure the publicity settings are set to non-public and non-archivable (otherwise, people will be able to share the lessons with whomever they want).

Check “No, my campaigns are not public,” and uncheck “Activate the archive bar.”

When creating autoresponders, ensure that you remove the “View this campaign in a browser” link, to further discourage shareability. To take things one step further and make sure only subscribers see some or all of the course’s content, read up on conditional merge tags.

2. Match The Colors And Fonts In The Course Material To The Registration Process

You’ll find these by going to “Signup Forms” and then “General Forms.” Match the fonts, colors and logo of the course’s website for a consistent user experience.

3. Select “Send A Final Welcome Email”

You’ll find this option in the drop-down menu on the “Create Forms” page; it will be automatically selected, unless you’ve unchecked the box. Add text to this email (scroll down to edit the contents), informing users to “Click the completed lesson” button in each lesson to get the next lesson.

Later, we’ll get into how to set this up, but essentially each lesson’s email will have a link that users can click when they’re finished to notify MailChimp to deliver the next lesson.

Also, in this final welcome email, let users know when the first lesson will be delivered.

4. Set Up The First Lesson And Autoresponder

Go to “Autoresponders” and then “Create autoresponder.” Select the entire list to be the recipients. On the next page, the event that triggers this autoresponder is “Subscription to the list.” Make sure that “Also trigger on list import” is checked if you want to use Twitter cards or if you will be charging for the course (more on this later).

(View larger version.)

Choose whether to send it within the hour or at another time and date. On the set-up and campaign information page, give the campaign a subject line and make sure that, under “Tracking,” “Goal Tracking” is checked — this is important because it will trigger the next autoresponder lesson.

5. Set A Goal For Your Campaign

A goal is simply a URL that you add to the lesson. For my own email course, I created a few pages on my website that thanked the user for completing the lesson. For example, I added a button to the campaign for lesson 1, reading “I have completed this lesson” and linking to http://mydamnbook.com/lessons/lessonone.

The URL may be anything, but if you are setting a reminder email (more on this later), then the URL must contain the same folder — in this case, lessons. If you use WordPress, this is simply the parent page, and each individual lesson would be a child page of the parent, /lessons/.

These pages that live on your website are important for firing off autoresponders, as well as for letting the user know that a lesson has been completed and that a new one is on the way.

A good marketing strategy is to add some social engagement to the completion page for each lesson, such as “Tweet that you’ve finished lesson 1,” with a hash tag for your course or sharing buttons, so that users can let others in their network know about the course and where to sign up.

6. Set Up Subsequent Lessons By Creating A New Autoresponder

Set the entire list as the recipients. On the next page, set “Specific link in the campaign is clicked” as the event to trigger the autoresponder.

(View larger version.)

Then, select the previous lesson. If you’re creating lesson 2, then select lesson 1’s autoresponder from the drop-down menu. Then, choose “Select a link from your campaign” and select the URL that you used for the button that tells the user they have completed that lesson.

Set the autoresponder to send either within the hour or at a time and date of your choosing. I always pick “Within the hour,” so that the user gets the next lesson fairly quickly.

Make sure to track goals for every lesson you create (otherwise, the URL clicks won’t be tracked by the following lesson).

To create lesson 3, you’d follow the steps above but would select lesson 2 from “For what campaign” and the lesson 2 completion URL for “Select a link from your campaign.” And so on, until you’ve added all of the lessons.

7. Set Up Additional Emails (If Needed)

In addition to the lessons, you may want to send out a different type of email a day or two after the final lesson has opened. The email could include additional resources, an “About the author” section, or perhaps a review of the course (if you’ve got one).

Select “Send to the entire list” for the recipients.

For the autoresponder, select “Campaign is opened” as the event to trigger the follow-up email, and select “For what campaign” as the final lesson (via the drop-down menu). Then, select the amount of time for “When the autoresponder should be sent.” If the email is a review or list of resources, then sending it a day or two after makes sense, while the lessons are still fresh.

8. Set Up A Reminder Email

Because the course is self-paced, people won’t get the next lesson if they forget about the email for the current lesson, so setting up a course reminder autoresponder is another good idea.

From step 5, if the same folder is in the URL for each lesson (in this example, /lessons/), then it’s simply a matter of creating a new reminder autoresponder that sends to a new segment of the list.

(View larger version.)

To do this, start an autoresponder, select “Send to a new segment,” then pick “Subscribers match,” and then “Any” from the drop-down menu.

In the next drop-down menu, choose “Goal Activity,” then “Doesn’t match,” and in the field type in the folder URL of all lessons (in this case, lessons) (don’t type the full URL or any slashes).

On the next page, select “Subscription to the list” as the event to trigger the autoresponder.

When setting the autoresponder, estimate a reasonable time which people would take to complete a lesson. For my own list, I’ve set the reminder to “45 days” after a user has stopped clicking anything.

Remind people that they’ve signed up for the course and, if they’ve forgotten about the lessons, to go back and read the current one (and click that they’ve finished it once they have). I also offer helpful suggestions on how to get over being stuck in the writing process.

Integrate With Payment Solution (Optional)

If you want to charge for the course, you will need to collect the user’s money before the course lessons start firing. I use Gumroad to sell items online; while it doesn’t directly integrate with MailChimp, one easy additional step makes it happen.

Giving your course a price can be done in one easy step. (View larger version.)

In your Gumroad account, click “Add a Product,” and then select the product. Where it asks for a file, create and upload a PDF of the text in your “Final welcome email” that tells people they’ve successfully signed up for the course and will get the first lesson within an hour.

Give it a price, and then “Add” the product. The next screen lets you upload a graphic (or video) and a description of the course. When it’s ready, click “Publish.”

To add an incentive (for example, to reward users with a discount for signing up early), click on the “Options” tab and create an offer. Otherwise, you’re done!

To integrate with Zapier, create a secret “free” offer, which you can use to finish the process, and delete it when you’re done.

Next, to connect Gumroad to MailChimp, sign up for an account with Zapier. Free and paid options are available. If you expect fewer than 100 users, go with a free account. Otherwise, it’s fairly cheap, and it scales. If 50,000 people are signing up a month, then the $99 per month price tag is well worth it.

By connecting Gumroad to MailChimp you can automatically add purchasers of your Gumroad product to your course’s mailing list. (View larger version.)

Once you’ve got an account, click “Create a Zap.” The trigger service is Gumroad, and the action service is MailChimp. For “Choose a trigger,” select “New sale.” For “Choose an action,” select “Add subscriber,” and then continue. From there, follow the steps to connect both your Gumroad and MailChimp accounts to Zapier.

Next, choose your “Product” (which would be your course if you have more than one product in Gumroad), and then continue. Then, choose which MailChimp mailing list to put subscribers in. When you click on “Insert fields” in the email section, Zapier will ask you to create a new purchase of your product. Go back to Gumroad and do that (using the free discount code), and continue with the process. Make sure to select “Email” in the email drop-down menu.

Also, select “No” for “Send a welcome email” because subscribers will get the PDF as a download immediately upon paying. Click “Continue,” name the Zap whatever you’d like, and turn it on!

Now, whenever someone purchases the Gumroad product for your email course, they will be automatically added to the course’s mailing list and will start receiving lessons.

And that’s how you create a self-paced email course using MailChimp, Gumroad and Zapier.

(al, il, ea)

Credits for the image used on the front page: zapier.

© Paul Jarvis for Smashing Magazine, 2014.

WordPress is still a hot technology in 2014, and the CMS of choice for the majority of web designers continues to go from strength to strength.

There are some great new – and free – themes that have been released or received major updates since the start of 2014. Now all you have to do is pick your favorite and install. What are you waiting for?

Every month we’ll be bringing you our pick of the best free WordPress themes released over the last 4 weeks. Here are our picks for February:

Alpha Forte

The attraction to Alpha Forte is in the big, custom background behind the blogging theme. The theme features a three-column layout, two widget areas in the sidebar and is mobile friendly. But what really draws you to the theme is the big-photo design.

TYPAL Business

TYPAL Business is a pretty powerful business theme with a lot of great options. It’s fully responsive and can be customized in almost every way, including headers, widgets, menus and backgrounds. The theme also includes sticky posts and is Theme-Check tested.

Elisium

This responsive theme is designed for business websites and has plenty of options for customization from logo to homepage content to social media integration. Elisium‘s look is clean and modern and includes plenty of content areas.

Mega Responsive

Mega Responsive, as the name implies, is a fully responsive theme that includes a nice infinite scroll feature. The clean, minimalistic style design was created with the flat style in mind and is SEO ready. The theme also offers a variety of customization options from color to a random image tool.

Nova Lite

Nova Lite is a responsive theme based on the Twitter Bootstrap framework, designed in the flat style. Unlike many similar themes, what makes this Nova different is that is includes an unlimited number of sidebars and galleries. The free theme also comes with 14 default skins for different looks, three custom widgets and widget areas and customizable backgrounds.

Obscura

Obscura is a theme designed to show off great images. The two-column design is appropriate for a portfolio or photography business website. The design is responsive and supports the popular NextGEN Gallery plugin to manage photo galleries. Almost all of the features are customizable as well, including navigation, menus, widgets and backgrounds.

Zippy

If you are looking for a small and clean responsive theme, Zippy might be the option for you. The theme is designed with small businesses in mind and is perfect for people who don’t want to deal with code. The simple layout includes a flexible slider, social link tools and multiple footer widgets.

Bizznis

This parent business-style theme is made for WordPress site owners who don’t want to touch complicated code or development aspects of the site. Bizznis is fully responsive, secure and fast. While this theme does not include a ton of options, the included features (categories, shopping cart, search) are designed with business owners in mind.

Undiscovered

Undiscovered is an elegant theme that includes a responsive layout and retina-ready graphic display. The theme includes a slew of post formats, making it a great platform for bloggers. Undiscovered also supports commenting, galleries (with a slider) and plenty of color, logo and typeface customization options. The theme also includes a massive social media bundle with icons for 18 popular social media networks.

x2

If you want a blog that has plenty of neat animations and extras, x2 is the place to look. With three slideshow options, widget areas and a ton of customization options — including light and dark color schemes — this theme is made for ease of building. Other features include support of the common BuddyPress, bbPress and WooCommerce.

Infinitano

This simple responsive theme is built on the popular Twitter Bootstrap framework and is best used for blogs, where the focus is on text content rather than visuals. Infinitano includes customization options and dual-level dropdown navigation.

Isis

Isis is a clean responsive theme is power-packed for visual design. It includes two home page layouts, social icons, four widgets, a large slider, three page templates and more. The design scheme works for a variety of website types, from business sites to portfolios or blogs. All you need to get started is a few great images.

Journal Box

This flexible blog theme features a high color design (with two color options) and a two column layout. Journal Box includes a handful of interactive elements as well, including a profile box for the blog owner and share buttons that can be embedded in each post.

Lithium

Lithium is a super-simple theme is designed for bloggers on Twitter Bootstrap. It includes simple posting, social media linking, and widgets for popular posts, Flickr integration and video. While the theme is free, you must share a link to download it.

Blogly Lite

Designed for bloggers, Blogly Lite is an almost-feminine styled flat theme with a variety of customization options. The theme is fully responsive and has a quite refined look and feel for a free theme. (An upgraded version is also available which unlocks additional widgets and customization options.)

Exility-light

Exility-light is a simple theme is designed for blogs and features large image areas. The two-column layout is widget-ready and includes a custom menu and two sidebars. The simple design is attractive and user-friendly.

MiniMag Pro

Designed with flat styling, MiniMag Pro packs a lot of power and clean design into a free theme. The blogging theme is fully responsive and SEO ready. The theme also includes a slider, customizable calendar, multiple post formats and has been tested in all popular web browsers. This theme also includes a ton of customization tools from color to custom logo to the appearance of the slider. This theme is one of the more feature-packed free themes available.

Nictitate

It’s easy to see why Nictitate is one of the most downloaded WordPress themes of the month. This theme features a modern and bright design with plenty of features. It is fully responsive, includes custom widgets, includes localization support, unlimited sidebars and allows for easy integration of Google Analytics and social links and sharing. For a free theme, Nictitate also has a lot of embedded goodies from neat animations to videos and clean typography.

Future

Future is a clean and creative theme that includes a good number of features. The theme is designed in the trendy flat style and is retina ready. Future’s free version includes plenty of customization tools, post formats, featured images, widgets and is SEO ready. The downside to Future is that you have to upgrade to the pro theme for the responsive layout.

MeadowHill

For a theme with a big image area, MeadowHill delivers. The responsive theme uses an almost parallax style with a long scroll design. It includes five color schemes, a ton of customizable menu and widget areas, social sharing functions and the ability to create a variety of custom shortcodes or custom CSS. This theme also includes the ability to translate into five languages.

Have you used any of these themes in a project? Have we missed one of your favorites? Let us know in the comments.

Create Picture-Perfect Portraits With Beautune – only $14!