My Web Design Secret Weapon: Browser Extensions
Are you an entrepreneur who DIYs their website projects?
You know, things like building your own site, creating blog headers and designing your opt-ins.
Are you full of ideas, but getting stuck on how to actually CREATE your designs?
Don’t panic. And don’t run off and purchase Photoshop just yet.
In this post, I’m going to share some little powerhouse tools called browser extensions that you probably haven’t heard of before.
And I’m going to walk you through exactly how and where they can help your DIY design efforts.
What's a browser extension?
If you're scratching your head, wondering what the hell I'm talking about, then you're in exactly the right place.These little powerhouses will transform the way you DIY your web design.
A browser extension is a tool that you download that sits on your browser bar. Like this:
They are small tools that do a simple job.
And they do that job directly from within your browser.
I think they’re freaking awesome, and you need to get on board with them. Like yesterday.
Let's get your images web ready
Let me ask you a question. And you have to be honest here.When you upload images to your website, do you resize them? Optimise them in any way?
For example: let’s talk about blog header images. You upload your image, and let Wordpress customise the size to fit that space. Right?
Big mistake.
You know why?
Because that massive original image you uploaded is still sitting on your server. Right next to a different version of the same image at the size you need for your blog header.
Having big, oversized images on your site is clogging it up. And a clogged up site runs sloooooowly. Visitors hate that, and it’s bad for SEO.
So, what should you do?
- You should upload an image that is resized for the space it's going to sit.
- If your blog is 600px wide, your blog image should be 600px wide.
Here’s a 2 step process that’s not only easy and fast, but will improve your site rankings.
Step 1: Download Page Ruler
Grab your copy of Page Ruler here.Page Ruler is a browser extension that lets you quickly check the dimensions of an image or space on a web page.
Once downloaded, you click the icon and you can then measure how big an image is on a web page.
See those red numbers up there on the image? Let’s break it down:
- This is the icon on your browser
- This is the window that opens and tells you what the dimensions are
- This is where you drag around an image to get those dimensions
Step 2: Web Resizer
Web Resizer is definitely a site you want to bookmark. Seriously, go do it now. I'll wait.Its nothing fancy, it doesn’t have lots of bells and whistles. But what is does, it does well.
It allows you to quickly and easily crop, resize and optimise your images for uploading to your website. There are some simple editing tools thrown in as well.
Let’s have a look at how it works:
- Browse for your image
- Upload it
- Plug in the dimensions that you now KNOW you need for your image
- Try different image qualities (60-80 is usually a good range) and tick Compare Image Sizes
- Apply changes
- Check image size
How awesome is that? It’s fast. It’s easy. It’s SEO-friendly. That’s a lot of box ticking, right there.
Keeping your brand colours consistent
When you're designing your site, it's easy to get overwhelmed with choices of images and colours.But you need consistency in your brand, and one of the easiest ways to do this is with your brand colour.
This tool lets you pick the exact right colour, every time.
Colorzilla
This bad boy is making my life soooo much easier these days.Before I discovered this tool, I would create colour swatches in a program like Illustrator. Then, when needing the colour value for something like a web button, or background overlay – I’d switch back and forth, to copy and paste that colour value.
Not anymore!
With this browser extension, in one click you can grab the colour value of anything on your screen, and paste it right into where it needs to go.
This tool works perfectly in conjunction with web builders such as Divi. And it dances perfectly with online graphic design tools such as Canva or Picmonkey.
It’s seriously an amazing browser extension.
And here’s what you do:
- Click the icon on your browser - and then click anywhere on the page where you want to sample a colour
- The browser extension saves the colour value to your clipboard
Grab your copy of Colorzilla here.
4. Picking fonts
What Font lets you find out which fonts are being used on a web page.
Let’s break it down again:
- Click on the browser extension
- Click on a font on the page and a pop up box appear with all the details
Grab your copy of What Font here.
How to create custom icons
So, I've saved the best till last here.Up until really recently, I hadn’t found an easy way to help DIYers work with icons and illustrations.
For example, what if you want an icon that doesn’t come bundled with your theme?
Sure, you can find places to download the custom illustration, but you’ll download it as an image file (PNG) that you can’t really do anything with.
You’ll also start losing quality when you try to resize it.
Ideally, you need a program like Illustrator for these sorts of tasks. Not only is it expensive, there’s a huge learning curve.
But…no more!
I’ve found a great resource (or 2) where you can download icons and illustrations for as little as $2. And even better….I’ve found an online tool that lets you work on your illustration files without all the hassle of complicated, expensive software.
I got so excited, that I went and made a video!
You can check it by clicking on that image below….
Cathy is the owner of Your Web Toolkit, where she empowers online entrepreneurs to turn their business dreams into reality.