Optimize Images with Responsive Breakpoints Generator

Using one image for every possible viewpoint variation of a design (desktop, laptop, tablet, mobile, and all the non-standard browser window sizes in between) isn’t exactly ideal in terms of design and maintaining the image’s resolution. With the Responsive Breakpoints Generator, however, you can now use actual equations to tell your images when to break.

screen-shot-2016-11-01-at-1-36-58-pm

Instead of guessing or choosing arbitrary breakpoints for your images, you can use the Responsive Breakpoints Generator tool to come up with breakpoints that have been calculated based upon the original dimensions of your image at full size using the generator’s advanced algorithms.

screen-shot-2016-11-01-at-1-37-27-pm

The key to the algorithm being able to find suitable breakpoints is that it finds image width values and accompanying dimensions that offer reductions in file size. After the breakpoints have been created, the generator also provides you with an HTML img tag that lists all of the breakpoint values and the option of downloading a zip file with the original image sized down to all of the breakpoints.

screen-shot-2016-11-01-at-1-37-36-pm

This is a great tool to use, especially if you find yourself doing a lot of design or development for mobile. The tool is also open source, so you can use and/or modify it however you choose. Read more about how the algorithm works here.

5 Essential WordPress Plugins

All WordPress developers have a list of their favorite plugins that they won’t create a new WordPress build without. Here are some of our favorite plugins to add to our WordPress projects:

1. Yoast

screen-shot-2016-11-01-at-11-01-15-am

Yoast isn’t your average SEO plugin. In addition to it allowing you to create your own meta tags and easily choose your keywords, it also analyzes your pages to test for SEO performance. If your page’s performance isn’t the best it can be, you’ll get an in-depth reading of what you need to do to optimize that page’s SEO, which goes above and beyond what’s offered by most SEO plugins.

2. WP Super Cache

screen-shot-2016-11-01-at-11-03-31-am

The Super Cache plugin generates static files from your WordPress site. Caching your files should seriously improve the speed of your site, which is why this plugin should be installed on all your WordPress builds.

3. Ninja Forms

screen-shot-2016-11-01-at-11-06-31-am

There are probably hundreds of WordPress contact form generating plugins available, so it can be overwhelming to decide which one is right for your project, but most of the time this is our contact form plugin of choice. The plugin allows you to easily create forms that are sleek, responsive, and easy to use.

4. Google Analytics for WordPress Dashboard

screen-shot-2016-11-01-at-11-10-15-am

The Google Analytics for WordPress plugin will allow you to access your basic Google Analytics stats right from your WordPress dashboard. You can also use it to quickly view that stats on each of your individual posts and pages.

5. DiggDigg for WordPress

screen-shot-2016-11-01-at-11-12-25-am

This plugin allows your users to easily share your content, posts, or pages on any of their social media platforms. Adding this feature to your site can dramatically increase social sharing and traffic.

5 Simple Ways to Speed Up Your Website

Looking for some new ways to optimize your code and increase the speediness of your site? Here are some simple ways to streamline your site that you may have overlooked.

1. Minimize HTTP Requests

HTTP requests are a big reason why a site’s load time can be so slow. The best way to reduce these requests is to really make sure your code is super efficient by only using one stylesheet, reducing the number of scripts you use, and don’t use unnecessary images (use CSS or HTML in place of images when at all possible).

2. Enable Caching

When a resource (stylesheets, scripts) is cached, that means it’s stored so that in can be easily and, most importantly, quickly accessed to save time when your site loads.

3. Minify Your Resources

Minifying your HTML, CSS, or JavaScript can really streamline your code and get rid of anything that might be there unnecessarily, which will definitely help with the speed of your pages. There are many tools available online that can be used to minify your HTML, CSS, and JS for free, so it’s definitely worth a shot to optimize your site’s speed.

4. Use Stylesheets Over Inline Styling

Not only is inline styling impractical and not dynamic, but it can also increase the size of your HTML files by a lot. Save yourself some load time and put all of your CSS in one stylesheet (but only use one to keep the HTTP requests down!)

5. Limit the Number of Plugins on Your Site

This one is our least favorite, but the fact is that plugins will add extra code to your site that can slow things down. Try to only use the most lightweight plugins possible, and delete any superfluous ones that you might not need.

How to Create a Custom Page Template for WordPress

Most WordPress themes should have a file that serves as the default page template that any page in a WordPress build will be assigned to by default — it should go by page.php. Sometimes, however, the default page template might not be conducive to the design and functionalities of all of your pages. You might need to create an extra (or even a few extra) custom page templates to make sure all your pages can serve their intended purposes.

To create a custom page template, you’ll ned to create a new file within your theme. Give the file a name that would indicate its purpose. Rather than start from scratch, the easiest way to create a new page template is to find the default page template and copy and paste that page into your new custom page file. Then you’re going to need to customize the information at the top of the file pertaining to the page’s name and description:

<?php
/*

* Template Name: INSERT PAGE NAME HERE
* Description: INSERT PAGE DESCRIPTION HERE

*/

// other page code

?>

The name you assign to “Template Name” is what will appear on your WordPress dashboard when assigning a template to a page. Now it’s time to add custom code to your new page. You can decide if you’d like to include a sidebar, a loop, or just completely customize the code with your own HTML. Don’t forget to add some extra style rules to your CSS to compensate for the changes in the page structure/content.

Best Chrome Extensions for Developers

If you’re a web developer, chances are you prefer to develop and work on Google Chrome over any other browser. The reason for this is probably because not only is Google’s Developer Tools dashboard and console an invaluable tool to help with development, but also because of the many helpful and useful extensions that are available for Google Chrome that can help streamline the process of web development and design. Here’s a list of some of our favorites:

1. Marmoset

Screen Shot 2016-08-30 at 11.09.08 AM

This extension can be used to take beautiful, clean snapshots of your code that you can use for demos and tutorials.

2. CSS-Shack

Screen Shot 2016-08-30 at 11.13.41 AM

CSS-Shack is a web and desktop application that allows you to create layered styles (much like you would in photo editing software like photoshop) and then it’ll export the styles for you into a CSS file — great for designers who want to learn more about coding/CSS.

3. Font Playground

Screen Shot 2016-08-30 at 11.16.20 AM

Font Playground is a really useful extension that allows you to change the font on any live webpage to one of 1000+ Google Font options or to any fonts you have loaded locally on your machine. The extension is updated with new fonts often.

4. Window Resizer

Screen Shot 2016-08-30 at 11.21.17 AM

This one might be pretty obvious, but the Window Resizer extension will resize your browser window to help you optimize your designs for any device or viewport size. A similar function is built into Google Developer Tools, but with the extension you can actually resize the entire browser window to simulate the size of a different device.

5. ColorZilla

Screen Shot 2016-08-30 at 11.23.44 AM

ColorZilla is a really great tool that allows you to use a color dropper feature to identify any color on a live site — there’s no need to download any images or open PhotoShop, it can all be done on your browser window.