Web Design Academy: March 2015

Monday, March 30, 2015

1stwebdesigner

The Best Job Search Sites For Freelance Graphic And Web Designers

Posted: 30 Mar 2015 03:57 PM PDT

#EspressoMonday Episode Nr.13

What are the best job search sites for freelance graphic and web designers?

One of the most common issues often faced by freelancers is the best place to find clients or new projects. While this is not a big problem since there are a lot to choose from on the Internet, the big question is which among these job sites are the best in terms of financial returns.

Let’s have a great time tackling an interesting issue once again on this thirteenth episode of #EspressoMonday. And yes, we are taking a real espresso shot this time.

Most people think that when you become a freelancer, you are now free to do anything with your time. While this is true, they didn’t really know the challenges you face in finding new projects or new clients. Of course, this is not difficult since there’s a lot of job sites or marketplaces on the World Wide Web that connect you with clients from all over the world.

If you have been freelancing for many years, chances are you already know which sites deliver the best in terms of projects, clients, and monetary rewards. If you are a new freelancer, however, you might not know where to look for. In fact, there are still cases where even those who’ve been around the business for quite some time don’t know where to look for.

The Search is On

In answer to our question today regarding what job site is the best for freelance web and graphic designers, the answer can greatly vary because there are certain factors involved in it. These factors include your experience, the workload you want to take on, and the type of relationship you want to build with a client – are you looking for short-term or long-term relationships?

To give you a much better idea and a bigger perspective, we will compare 8 of the most popular marketplaces for freelancers. We will use three kinds of metrics to evaluate each of them based on the questions we receive here on 1stWebDesigner.

Income Fees – How much percentage will be taken away from you once you accumulated a certain amount of earnings? Under this, we will have two earning brackets – $1k and $4k.
Competition – How many designers are already in that site looking for a job?

1. Freelancer

$1k Income Fees: $121
$4k Income Fees: $483
Competition: approximately 14.1 million freelance web designers

2. Elance

$1k Income Fees: $98
$4k Income Fees: $360
Competition: 4 million freelance web designers

3. oDesk

$1k Income Fees: $114
$4k Income Fees: $454
Competition: 4 million freelance web designers

4. People Per Hour

$1k Income Fees: $85
$4k Income Fees: $245
Competition: 500,000 freelance web designers

5. 99 Designs

$1k Income Fees: $300
$4k Income Fees: $1,200
Competition: 900,000 freelance web designers

6. Envato

$1k Income Fees: $300
$4k Income Fees: $1200
Competition: 2,000 freelance web designers

7. Codeable

$1k Income Fees: $150
$4k Income Fees: $600
Competition: 100 freelance web designers

Codeable is a marketplace designed especially for WordPress experts. They don’t readily accept anyone in this marketplace unless proven that you really are an expert.

8. AwesomeWeb

$1k Income Fees: $17
$4k Income Fees: $17
Competition: 350 freelance web designers

AwesomeWeb is 1stWebDesigner’s own marketplace and what makes it different from all the rest is that it doesn’t take any percentage from your earnings – You only pay a flat rate of $17. Although we also screen all the web designers before we accept them in the marketplace, the screening process we use is not as tough as that of Codeable.

All you need is show us a portfolio of at least 3 websites that you have already built to prove that you are indeed a designer.

You can also find this information, along with a complete comparison table, in an article we have written about these different freelancing websites. Just out our very extensive article we did very recently.

And that concludes our #EspressoMonday episode for today. Best wishes to your job hunt.

A Modern Approach to Improving Website Speed - Six Revisions

A Modern Approach to Improving Website Speed

Posted: 30 Mar 2015 07:00 AM PDT

Have you ever had the experience of going to a site and patiently waiting forever for it to load?

Probably not, because no one waits forever for a site to load. We just close the browser tab and move on.

Time matters.

When it comes to getting the user’s attention, we only have a very brief window of opportunity. According to Ilya Grigorik, on his “Speed, Performance, and Human Perception” keynote, you only have one second.

One second!

After that first second, a mental context switch occurs. In the user’s mind, it has been so long that they start to think about other things.

And after about 10 seconds, the user is already bored and will probably close their browser tab and get on with their day.

What I will cover in this guide is a process for optimizing your website’s performance. I’m going to use my own site as an example.

If you haven’t done the things discussed in this guide, you will get guaranteed website speed improvements after performing the steps that I will be discussing.

Initial Benchmarking

The first thing to do is to test the current performance of the site. This will help us see issues related to web performance, as well as help us prioritize our efforts.

One excellent tool for benchmarking front-end performance is Google’s performance analysis tool, PageSpeed Insights. It will check your site and give you a score based against a set of performance guidelines and best practices.

Here’s the first result I got for mobile:

First analysis on mobile

And for desktop:

First analysis for desktop

Google Developers has another useful test available, called Mobile-Friendly Test. This tool will show you potential areas for improvements. For this test, everything’s OK on my site:

Mobile-Friendly Test

Improving Performance

There are two general approaches to improving website performance with the use of developer tools.

You can use online tools
You can use open source web development tools on your machine

The first approach is straightforward: Grab all your files and use the online tools to do whatever it needs to do (lint, minify, concatenate, etc.).

Done. Well… not quite.

What if you have 50 files to minify? Or 200? And what if you change your code? Are you going to repeat that task over and over?

That’s why I’ll cover the second approach, because it’s more flexible and scalable. However, it’s a more complicated approach, especially at the start.

We’ll use Gulp, a JavaScript task runner (similar to Grunt), that will do all the work for us. (If you don’t know what developer tools like Gulp, Grunt, Bower, and Yeoman are, check my blog post where I give a brief intro about them.)

To improve website speed and performance, this is what we will do:

Set up Gulp
Minify the CSS and JavaScript files
Concatenate the CSS files and JavaScript files
Lint our JavaScript code to check for errors and issues
Optimize the images
Minify the HTML documents

Setting Up Gulp

The first thing to do is to set up a project working environment. All I did was grab all the files from my site and move them to a folder called src in my computer.

Move your data inside src folder

By the way, you will need Node (and npm) installed to be able to use Gulp in the manner I’ll be describing. See How to Install Node.js.

First, we need to install Gulp globally so that it’s accessible anywhere in our computer. Just open your terminal/command prompt and type:

npm install --global gulp

Then go to your project folder and install it in your development dependencies.

npm install --save-dev gulp

After that, you’ll see a new folder that will automatically be created for you called node_modules. That’s where Gulp and all your other Node modules for the project will be stored.

There’s just one more step to perform before running Gulp: We need to set up a configuration file so that Gulp knows what tasks to perform on our files. And that’s as easy as creating a file called gulpfile.js in your root folder with any text editor or source code editor.

Here’s the initial contents of gulpfile.js:

var gulp = require('gulp');  gulp.task('default', function () {});

Right now it isn’t doing anything, but you can still run it. Just type:

gulp

and you should get an output like this:

[14:12:14] Starting 'default'...  [14:12:14] Finished 'default' after 72 μs

Now that we have Gulp ready to go, the next step is to create the Gulp tasks to do all the work for us.

Minifying CSS and JS Files

OK, let’s get some stuff done with Gulp! First task: Minifying our CSS and JS files.

The minification process, what it does basically does, is it strips off all white spaces, tabs, carriage returns, newlines, comments, and other unnecessary characters from our files. For JavaScript, it will also change object names to shorter ones.

Minification is performed in order to get a very small file size, while still preserving all our style rules and JS functionality.

In order to minify our files, we’ll need to install node modules that will help us with the task.

Let’s install the gulp-minify-css package, which will minify our CSS files. Then we will use the gulp-uglify package for our JavaScript files.

npm install --save-dev gulp-minify-css  npm install --save-dev gulp-uglify

Now that we have our required modules, we have to create the task for each one. We can actually do everything inside our default task, but I prefer to do a separate task for each type of file. This way, we’ll keep our code cleaner, easier to read and maintain, and, if we want, we can run the task for the CSS or the JS files separately.

Let’s add our minify-css and gulp-uglify modules to the top of our gulpfile.js.

var minifycss = require('gulp-minify-css');  var uglify = require('gulp-uglify');

Let’s create a couple of tasks. This is what they’ll do:

Read all the .css and .js files
Minify the files’ source code
Export the output to another folder called dist

// CSS minification task  gulp.task('css', function() {    return gulp.src('src/css/*.css')      .pipe(minifycss())      .pipe(gulp.dest('dist/css'));  });    // JS minification task  gulp.task('js', function() {    return gulp.src('src/js/*.js')      .pipe(uglify())      .pipe(gulp.dest('dist/js'));  });

All the processed files will go inside the dist folder after the tasks have been performed.

Issuing the gulp command again in your terminal/command prompt will create the dist folder, with the css and js folders inside that will contain our minified files.

Concatenating CSS and JS Files

Sending down the wire just a couple of files instead a bunch of them makes the whole process of loading a page much faster.

So what we’re going to do next is merge all our CSS files into one .css file, and all our JS files into one .js file. And for that, we’ll use the modules gulp-concat-css and gulp-concat.

$ npm install --save-dev gulp-concat-css  $ npm install --save-dev gulp-concat

We’re using different modules because gulp-concat-css is more appropriate for CSS files since it does the rebase of the URLs automatically.

Gulp is a stream-based build system, so if you want to apply another process after that, you just keep piping. Both modules require a string argument with the name of the concatenated file. In this case, I’m using semeano.min.css and semeano.min.js. (Actually, I’m not using any JS on my site, but I’ll do it just for the sake of the tutorial.)

First, let’s add our dependencies on top:

var concatcss = require('gulp-concat-css');  var concat = require('gulp-concat');

Then the additional piping for the tasks:

// CSS concatenation + minification task  gulp.task('css', function() {    return gulp.src('src/css/*.css')      .pipe(concatcss('semeano.min.css'))      .pipe(minifycss())      .pipe(gulp.dest('dist/css'));  });    // JS concatenation + minification task  gulp.task('js', function() {    return gulp.src('src/js/*.js')      .pipe(uglify())      .pipe(concat('semeano.min.js'))      .pipe(gulp.dest('dist/js'));  });

Linting JS Files

Linting won’t actually help reduce the size of the files, but it will help you detect errors and potential problems in our JavaScript code. And if we were to stretch it, JavaScript errors can lead to broken or low-performing functionality and, subsequently, a bad user experience. So linting your code is a must, in my opinion.

JSHint is a fork from another similar tool called JSLint. So why use JSHint? Basically, it all comes down to what you prefer. (If you want to know the reason behind the JSHint fork, read this article.)

Let’s install JSHint:

npm install --save-dev gulp-jshint

Add the dependency:

var jshint = require('gulp-jshint');

We need to pipe the code linting process before uglifying our source code, or else it will be tough to debug if JSHint spots an error:

// JS linting + minification + concatenation task  gulp.task('js', function() {    return gulp.src('src/js/*.js')      .pipe(jshint())      .pipe(jshint.reporter("default"))      .pipe(uglify())      .pipe(concat('semeano.min.js'))      .pipe(gulp.dest('dist/js'));  });

The reporter method is what will output the warnings on the terminal/command prompt. We’re using the default reporter, but you can change it to a different one.

Optimizing Images

When we run PageSpeed Insights, it will check if the images that we’re using are larger than they need to be. We can strip all the metadata from the images, which will reduce the file size a small bit. To optimize images, we’ll be using gulp-imagemin for raster images (e.g. JPG, PNG, and GIF) and gulp-svgmin for SVG files respectively.

$ npm install --save-dev gulp-imagemin  $ npm install --save-dev gulp-svgmin

Here are the tasks for minimizing images and SVG files. I think it’s pretty self-explanatory by now:

var imagemin = require('gulp-imagemin'),      svgmin = require('gulp-svgmin');    ...    // Image optimization task  gulp.task('img', function () {    return gulp.src('src/img/*.*')      .pipe(imagemin())      .pipe(gulp.dest('dist/img'));  });    // SVG optimization task  gulp.task('svg', function () {    return gulp.src('src/svg/*.svg')      .pipe(svgmin())      .pipe(gulp.dest('dist/svg'));  });

In my case, this didn’t actually make a big difference on the image, it just saved 543 bytes:

gulp-imagemin: Minified 1 image (saved 543 B - 0.2%)

But I remembered that the image was the main issue on the tests:

Main issue

That is happening because I’m using the same image for desktop and mobile. Everything was fine on the desktop tests, but on mobile, since I’m using the original image and resizing it, I’m wasting a lot of pixels. The solution for this is to have different image sizes for each media-query breakpoint. That way, if you need a 200x200px image, the browser will download only that size, saving bandwidth along the wire.

Minifying HTML

Minifying our HTML files is also important, and here is where you’ll probably see the most savings in file size. To minify our HTML documents, we’ll use the gulp-minify-html. Also, in order to make the changes on the resources automatically, from the files in the src folder to the dist folder, we need to install gulp-useref.

npm install --save-dev gulp-minify-html  $ npm install --save-dev gulp-useref

Here’s the task:

var minifyhtml = require('gulp-minify-html'),      useref = require('gulp-useref');  ...  // Switch URIs to dist files + minify HTML task  gulp.task('html', function () {    return gulp.src('src/*.html')      .pipe(useref())      .pipe(minifyhtml())      .pipe(gulp.dest('dist'));  });

This task requires a small change in the HTML files (in this case there’s only one, the index.html). We need to add a special comment for the gulp-useref module referencing a block on resource files (html5reset-1.6.1.css and semeano.css) that will result in a single file (semeano.min.css) after the concatenation and minification.

<!-- build:css css/semeano.min.css -->  <link rel="stylesheet" type="text/css" href="css/html5reset-1.6.1.css" />  <link rel="stylesheet" type="text/css" href="css/semeano.css" />  <!-- endbuild -->

This way, the index.html in the dist folder will have just one link tag:

<link rel="stylesheet" type="text/css" href="css/semeano.min.css" />

Note: Now that we have all these tasks declared we need to call them. Just add the created tasks to the default task dependencies, i.e. an array of task names as the second argument:

// Default task  gulp.task('default', ['css', 'js', 'img', 'svg', 'html'], function () {});

What that basically means is that before running the default task, Gulp needs to run all those tasks first.

Conclusion

After these changes, we can see some improvement on the score. It seems like a small change (only 12%) but after the minification of our files we are sending 33% fewer KBs compared to before. That’s something! And it didn’t take a whole lot of time to achieve.

PageSpeed score after 1st part of improvements

Here are some other things that could help improve the loading speed of your web pages:

Use of spritesheets. Instead of downloading a set of images, just put them all together inside one single image file and use CSS to specify the area of each image. This solution also applies to SVGs.
Convert images to WebP. WebP is a new image format that provides lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. But WebP browser support is low compared to PNG, GIF and JPEG.
Inline CSS. If your CSS files are small, just inline them in your HTML using the <style> tag. That will save you some server requests and will help avoid page-render-blocking CSS. This is a practice Google PageSpeed Insights recommends.

In future guides, I’ll share more intermediate-to-advanced website performance optimization tips and strategies, such as making changes to the structure of our HTML markup, other solutions for optimizing content delivery, and even some server configurations that will give us that final speed boost!

Feel free to share this guide on Twitter and Facebook if this was helpful to you. Also, if you have ideas and tips for improving website speed, please share them in the comments.

Friday, March 27, 2015

1stwebdesigner

50 High Quality and Responsive HTML Website And Admin Templates

Posted: 26 Mar 2015 06:00 AM PDT

Free is not bad at all. However, if you want to put your design onto the next level, save time when setting design up and simply look more professional right outside of the box, you need to invest in a premium theme.

Everyone’s running around trying to hop on the newest trend: flat design, but before flat, there was responsive web design. It was the craze two years ago, and 8/10 websites you will visit today are responsive. This is in response to the mobile web revolution, of course. It has become the standard, even if a web design client is not specifically looking for a responsive website, it’s already a given that you, as a web designer or developer, need to deliver responsive sites all of the time.

So, here are 50 best responsive website, admin, coming soon & under construction templates to speed up your design/development process.

Metronic

1. Metronic – Responsive Admin Dashboard Template ($27)

Metronic is the #1 best-selling responsive HTML template on ThemeForest with more than 25,000 sales since it was introduced in the market in 2013. It is a multi-purpose admin and fronted theme running on Twitter Bootstrap 3.3.2 & AngularJS 1.3 frameworks.

To date, the theme has 4 complete admin themes and 3 front end themes. KeenThemes, the developers of Metronic, has committed to update the theme regularly with new features in order to keep up with the theme’s goal, which is to be the theme for any web applications.

Metronic Theme Best Features:

150+ Valid Template Pages
jQuery 1.10.2
Bootstrap 3.1.0 Framework
Full SASS Support
Developer Friendly Code
Full Featured Frontend eCommerce
Multi-level Menu

Monday, March 30, 2015

1stwebdesigner

1stwebdesigner

What are the best job search sites for freelance graphic and web designers?

The Search is On

1. Freelancer

2. Elance

3. oDesk

4. People Per Hour

5. 99 Designs

6. Envato

7. Codeable

8. AwesomeWeb

A Modern Approach to Improving Website Speed - Six Revisions

A Modern Approach to Improving Website Speed - Six Revisions

Initial Benchmarking

Improving Performance

Setting Up Gulp

Minifying CSS and JS Files

Concatenating CSS and JS Files

Linting JS Files

Optimizing Images

Minifying HTML

Conclusion

Related Content

Friday, March 27, 2015

1stwebdesigner

1stwebdesigner

1. Metronic – Responsive Admin Dashboard Template ($27)

2. Canvas – The Multi-Purpose HTML5 Template ($16)

3. Porto HTML5 Responsive Template ($15)

4. Material Admin – Bootstrap Admin HTML5 App ($19)

5. Rhythm Multipurpose One/Multi Page Template ($16)

6. Make Admin Template & Builder with Frontend ($23)

7. Pages Responsive Admin Dashboard Template ($23)

8. Clip-Two Bootstrap Admin Template with AngularJS ($21)

9. Angulr Bootstrap Admin Web App with AngularJS ($21)

10. Pivot Multi-Purpose HTML with Page Builder v2.0.2 ($17)

11. AdminDesigns Responsive Admin UI Framework ($23)

12. Biss Corporate HTML Template ($16)

13. Triada Creative Coming Soon Template ($7)

14. Progressive Multi-Purpose Template ($16)

15. BuildPress Construction Business HTML Template ($16)

16. Euforia Responsive Vcard Template ($16)

17. Minovate Angular Admin Dashboard ($23)

18. Palas Bootstrap Multipurpose HTML5 Template ($16)

19. Slidebox Mobile & Tablet Responsive Template ($10)

20. Minio HTML Mobile Template ($10)

21. Oli Responsive Coming Soon Template ($6)

22. Nietzsche Creative Multi-Purpose HTML Template ($16)

23. ThemeKit Angular HTML Bootstrap Themes & Admin ($23)

24. Travelo Responsive Travel Booking Site Template ($18)

25. Hempstead Responsive HTML5 Portfolio Template ($16)

26. Pleasure Material Design Responsive Admin Panel ($23)

27. Housebuild HTML Construction Business Template ($16)

28. ServerEast Web Hosting HTML Template ($16)

29. Gatwick Responsive Multipurpose Template ($16)

30. Machine Multi-Purpose HTML with Page Builder v1.1.0 ($17)

31. Automotive Car Dealership & Business HTML Template ($18)

32. Lambda Multi Purpose Bootstrap HTML Template ($18)

33. Aura Responsive Multipurpose Template v1.8.6 ($18)

34. Orbitex Concept Responsive Coming Soon Template ($7)

35. Base Hotel Responsive Booking & Gallery Template ($16)

36. Xenon Bootstrap Admin Theme with AngularJS ($23)

37. Eagle Creative Business Website Template ($17)

38. MaterialX Material Design Personal Template ($14)

39. Learning App Learning Management System Template ($23)

40. Gravity Coming Soon – Under Construction ($6)

41. Atlant Bootstrap Admin Template with Frontend ($23)

42. EDENA Creative & Multipurpose Bootstrap Template ($16)

43. Vossen Responsive Parallax Multipurpose Template ($14)

44. CityTours – City Tours, Tour Tickets and Guides ($16)

45. Imago Multipurpose HTML5 Template ($16)

46. ODIN Simple & Easy Creative One Page Template ($14)

47. Elixir Restaurant HTML Responsive Template ($16)

48. ShopMe Ecommerce Multipurpose HTML Template ($16)

49. CONCEPT Minimal Portfolio Template ($14)

50. Extended HTML5 Creative Portfolio Template ($16)