Category Archives: Blog Tuts
Compressing
I get questions from bloggers all the time asking if they can help them make their site load faster. The culprit is probably not your blog design, but rather your content.
As you can see in this screesnshot, the original image of Oliver is HUGE. And would make my site take a good long time to load, which will likely make my readers sad and maybe even sad enough to leave. Obviously, none of us want our content’s loading time to be the thing that sends people away! So here I’ll show you how to compress your images so that they load faster!
Blogger and WordPress both allow you to choose a size of image to drop into your post, but when the original image you’re uploading is huge, it’s going to make things much slower. I always tell people it’s best to crop your images to the size you want BEFORE you upload them to your blog. I like my images to be the same width as my text, so I crop them to the main column width, which for me is 680px. It looks clean and crisp and it shows off the details of the images. The only time I use smaller images is when the original is smaller than the width of my main column. You can try to make them larger, butttttt, typically they’ll be pixelated and look grainy and that’s just a no-no.
The next step in making your images load quickly is compressing them. I always compress all the images I use for my blog — from good ole photos to collages with multiple images and text. What you’ll need to do is open your photo in Photoshop. At this point your photo should be cropped. Do any editing you need to and then save the image.
Then go to ‘File’ > ‘Save for Web & Devices’ and you can see when the dialog box pops up how much smaller this final image is than the original. You’ll have the option to save as either a PNG or JPEG. My rule of thumb on selecting a format is this: Text & Images? Use PNG. Just images? Just JPEG. JPEGs are smaller than PNGs, but if you have text in their, the text appears less sharp than a PNG.
Save the web version with a different name so you don’t get them confused. Now all that’s left is dropping them into your site. Upload like normal and enjoy that quick load time!
Oh hey there Oli bear! And I should mention, this photo wasn’t super crisp to begin with, but I just thought it was cute and might keep you more interested in the above tutorial, ha!
Note: This also works for collages in Photoshop and Illustrator as well!
Cheater’s Guide to Updating WordPress
Being a web designer, I forget that most people are clueless when it comes to the inner-workings of WordPress, web hosts and FTP servers. Gosh, I just scream nerd after that sentence. Nevertheless, I may be a bit of a computer nerd and I’ve been wanting to share some of these quick tips with you guys for a while, it’s just taken me some time to get my act together. As if screenshots were a difficult task (COMMAND + SHIFT + 3 for those of you who don’t know how).
One thing I constantly find when I log in to client’s Worpdress backend is that they’re working on an old version. And no worries, that’s not a terrible thing, but keeping up to date is also important. It will keep your site in standards with what designers are designing for and typically things just work better if you’re staying up to date.
But updating is maybe a little freaky. Why? Because there’s a good warning about making sure you’ve backed up your database and all your files before attempting. Yeah, terrifying. None of us want to lose years worth of posts, content, or that gorgeous design we’ve got.
So when you update, please don’t cross your fingers and hope for the best. At least attempt a little bit of precaution and save your files. I’m not perfect, but I’m not taking my chances either. This is how I update my version of WordPress and I can’t guarantee that it’s fail-safe — I don’t do a database backup — but it’s quick and I’ve never had any issues with it. That being said, I also feel that I need to say, this is NOT how WordPress recommends you back up your site so I cannot be held responsible for any lost content. I’m sure some designers and developers will disagree with my method, but this is merely a sharing of my ideas and how I do things here at Leap & Design That Inspires.
Also, if you haven’t updated in a really really long time and have a really really old version, then I completely recommend backing up everything. Just to be safe.
So without further ado, the lovely WordPress updating tutorial…
STEP 1
Find out if you need to update or not! WordPress proudly displays this message at the top of your dashboard if you’re in need of an update.
STEP 2
Login to your FTP server, I use Cyberduck, and download your all your theme files — child theme and parent themes please. Any if you really want to be safe, you can download all your plugin files, but I don’t use anything too wild that I can’t easily re-install so I typically skip this step.
STEP 3
Download an XML file of your content. I definitely think this is the MOST important step. If worse came to worst and you lost your design, at least you’d still have your content. There’s no making up for that, am I right? But then again, we’ve already got all those theme files downloaded, so we’re good!
STEP 4
Hit the update button and wait for the new WordPress dashboard to appear. Feel free to update your plugins at this time too. Again, I’m never as worried about backing these up because all I usually need to add is a username and password and that’s easy.
Honestly, I can’t tell you what happens if shit hits the fan. It’s never happened to me (knocking on wood now). I end up tossing all those back-up files in the trash. A few things I’d make sure of before starting is that I have a good, reliable & fast internet connection so there’s less room for mistakes. And if you’re really concerned, contact your web host, they’ll gladly walk you through the steps of backing up your database to do the full WordPress recommended back up.
So there you have it. A cheater’s guide to backing up WordPress! Questions, feel free to ask, I can’t guarantee I’ll know the answer, but I’ll try my best!
Blogging Better
I get questions asking about different WordPress plugins all the time. I’ve tested quite a few and figured I’d share the ones I use on my own blog and ones that I use for clients websites and highly recommend for Bloggers using the WordPress platform.
There’s thousands of plugins out there, some paid, some free. These are all free (YEAH!) and all really well made. Feel free to leave questions if I missed something or you need a recommendation on a different type of plugin! Enjoy!
To Reduce Spam: Akismet
Akismet has saved me countless hours of deleting spam comments. Seriously, if you hate every other plugin I talk about today, just install this one, you’ll be so happy you did. All you need is an Akismet key, which you can get here. You set the price you’d like to pay. $0-whatever. A small donation is always kind as these developers are doing some seriously awesome work! Once you get your key, you just drop it in and the chance of any future spam comments will practically disappear. Typically Akismet is already installed to your WP installation, all you need to do is add the key!
To Display Your Twitter Feed Cleanly: Xhanch – My Twitter
Xhanch Studios offers this great Twitter plugin for free. It displays your Twitter feed quite cleanly, or if you’re handy with design and CSS you can make it look pretty! styled Twitter via VenzEdits.com
Showing off Your Instagram Pics: Instapress
There’s plenty of Instagram plugins, but I like this one, it allows you to select how many you want to show, and how often you want it updated. Also the size! When you click on the image, you have the option to open it in a lightbox, as shown above. I decided to show four of my latest pics which is a good reminder that I take too many pictures of Oliver.
Pinning Images Directly: Pinterest Pin It Button for Images
Pinterest Pin It Button for Images by Canha allows you to pin images directly from the image itself. Love this plugin, it’s one of the newest ones I’ve installed. Just roll over any of the images in this post and you’ll see what I’m talking about. This comes with a basic Pin It button, but with a little extra designing, CSS and access to your FTP server you can add your own custom button.
A Better Commenting System: Disqus
I like this commenting system better. You can reply directly to each message and it tallies other ‘reactions’ which means shout outs on Twitter, etc. You’ll need to sign up for an account at disqus.com and then install the plugin and configure it. Simple. Oh and this one also works with Blogger, so if you can’t stand the Blogger commenting system, try this one!
Search Engine Help: Google XML Sitemaps
This helps search engines index your blog. A sitemap helps the crawlers by seeing the structure of your blog and grab the good stuff more efficiently. It’s a behind the scenes app, but definitely a good one!
Monitoring Traffic: Google Analytics
And this one, you’re probably already familiar with, but if not, go sign up for Google Analytics now and then install this plugin by Kevin Sylvestre to drop in your tracking code and see how much and where your traffic is coming from!
If you’re not sure how to add plugins, simply click on ‘Plugins’ from your WordPress dashboard, then ‘Add New’ and search for the one you’re looking for. Sometimes they have the same name, but different authors, so double check that if you’re looking for one of the plugins above. Hit ‘Install Now’ and then ‘Activate Plugin’. Some plugins you’ll need to configure after the fact. Typically it’s under ‘Settings’ or it creates it’s own button on the dashboard. Click there and fill in the required fields and go! If it’s a sidebar item, you typically will set it up under ‘Widgets’.
I’ve been wanting to do some blogging tutorials and finally got around to it. If you have other questions about blogging tips, etc. please leave suggestions below and I’ll try to cover them! Hope this was helpful for all the WordPress bloggers out there!
