Tuesday, October 21, 2014

How to Make Your Blog Load Faster: Image and Photo Trick

In the process of switching this blog from self-hosted WordPress to Blogger (I know… who does that, right?) I also fixed some of the images as I went along.

After a couple of years of blogging, I noticed that my site was loading slow. Simultaneously I learned about SFW. That isn't Safe For Work. It's Save For Web.

In Photoshop, there's a magical and quick way to prep your images so they load fast and don't bog down your site.

JPG vs PNG




First let's talk about JPEG images versus PNG images. There's a lot of technical aspects behind the different file types, but I'm going to cut through that to get to the takeaway information so you know how to apply it to your blog.

Most basically, you want to save your images as JPG files if they're photos or if there's a lot of "stuff" going on in them.

The PNG file type should be reserved for when you need to save something with a transparent background.

A great example is the logo at the top of my site: while it has a complex and textured background of the speech bubble, the area surrounding the image at the corners is transparent so it will lie nicely on the textured background without having a white border.

You can also use PNG for illustrative work, like simpler line drawings and flat design work (meaning no gradients).

What if I'm Not Sure on JPG vs PNG?


The great news is that Photoshop's Save For Web dialog box will help you make decisions on those tough images where it's hard to decide whether the PNG or JPG file type would be better.

Here's a great example from my Heart and Arrow design feature. Because most of the image is a screenshot of a blog design, wouldn't it make sense that PNG would be better since it's a flat image? No: because of the high resolution rendering of the Macbook combined with the images within the screenshot, it's a very complex image.

This image was originally saved as a 442KB png file. Here it is as a PNG:

sparkle social blog design by heart and arrow saved as a PNG

And here it is as a Saved-For-Web JPG, at 73KB.

sparkle social blog design by heart and arrow saved as a JPG for web

Not much difference, huh? And I've saved 369KB by saving this image for web.

How to Save For Web in Photoshop


So how do you work your magic?

Within Photoshop, open your image file.

Go to File → Save For Web…. (Or if you're feeling shortcut-ey, type Command+Option+Shift+C on a mac or Ctrl+Alt+Shift+C on a PC.)

Within the dialog box, choose JPEG as the File Type and Very High as the Compression Quality.

save for web dialog box in photoshop

The key points to look at are the preview box to see if you're losing quality, but also the file size directly underneath the preview box. When you're changing settings on the right, you can see the file size grow or shrink. The goal is to get the best quality image at the lowest file size.

how to save for web in photoshop for your blog

You can also play around with the other settings, as it'll show you the preview within the dialog box. If the colors look off, try playing around with the Preview drop down.

This is also a great time to resize your images. In this example, I don't need the file to be 1024 PX, so I can save a lot of file size by resizing it to be 700px wide. Photoshop will automatically calculate the image height so it stays within the same aspect ratio.

save for web dialog box in photoshop change image size to size needed

Notice the drastically reduced file size!

And again, here is the image as a 442KB png file:

sparkle social blog design by heart and arrow saved as a PNG

And here it is as a Saved-For-Web JPG, at 73KB, with a savings of 369KB.

sparkle social blog design by heart and arrow saved as a JPG for web

Conclusion


Your blog will load tons faster if your images are Saved For Web. This includes not only your blog content images, but also the images used on every page of your blog:

  • Header image
  • Sidebar images, including your bio photo
  • Social media buttons
  • Any other images that appears in the Header, Sidebar, or Footer of your blog

Do your blog a favor and help it to load faster by Saving For Web within Photoshop. It'll make your readers happier and will also help you look more like a professional blogger with a fast load time.

Go ahead: clean up your blog and save your images for web moving forward.

Read More »

Thursday, October 9, 2014

How to Look Like a Professional Blogger: 6 Quick Tips

Your blog is your baby. It's your creative outlet and your way to express yourself. It's important to look professional on your blog. There are a few quick functional and aesthetic fixes and checks to do just this:

how to look like a professional blogger
Bunn wants to look like a professional blogger.

  1. Don't have any broken images - Images can make or break a blog, but broken images are empty boxes of sadness. Broken images are promises that weren't kept. Showing other people's images? Download their image onto your server and host it on your site (and credit the source!). Do not rely on other sites to host their images for you. URL's change and break all the time, and you don't want that to reflect poorly on your site.
  2. Don't have any broken links - Once a year or so, plan to run your site through a broken link checker. External links aren't always possible to keep up with, but links within your site should work. Getting a 404 on your own page will cause your audience to lose trust in you, whether that is a conscious loss in trust or not.
  3. Have an about and contact page - As a blogger, you're putting yourself out there. People want to learn more about you as a person, and they also want to be able to contact you. Whether these critical blog components are mushed together in one page or are on separate pages, just make sure they're there, updated, and easily found.
  4. Have readable text - Standard web fonts do exist for a reason. These classic fonts have been around so long and have survived the onslaught of thousands of new fonts for a few reasons, but the most important being they're readable. People are on your blog to read. If your text is cursive, all caps, as wide as the browser, ├╝ber tiny, very light grey, etc, your text won't be readable. Stay up on the typography trends and model your text after that. New, highly read sites like Medium use very large serif fonts. Web designer? Don't fall into the trap of using a super light grey, tiny font. It may look cool, but it's very hard to read. Trust me. Also, Open Sans is the devil for body text.
  5. Have comprehensive aesthetics - What does this mean? Use no more than two fonts. No more than 2 or 3 colors. Use a repeated motif or theme throughout your design. Use your best judgement, download a premade template, or hire a designer. You probably spend money and time on your own appearance because you want to look like a functional person. Spend some money and/or time on your blog theme, as it's somewhat an extension of yourself.
  6. Write good. - edit, edit, edit. No one's perfect, but at least give it your best shot.

What are some blogger no-no's that make you cringe?

Read More »

Tuesday, August 19, 2014

How to Be More Productive By Focusing on What You've Already Done

Forget the To-Do list.


Productivity and happiness heavily influence each other.

I spend a lot of time thinking about productivity and happiness. Together or separate, one heavily influences the other. If you're not productive, your happiness may dwindle. And if you're not happy, you may not feel like being productive. In a lot of ways, happiness is derived from your perceived self-worth and sense of purpose, so if you're not producing anything meaningful, you will end up feeling schlumpy or bored.

As someone who works from home for my full-time gig and also is constantly working at other passion projects, whether it's helping clients, practicing lettering, slicing a blog template, or furthering my doodling ventures, I often feel like I'm not doing enough. Which when I think about it, is an insane thought. As a creative, there's a high chance you feel the same way.

The Short To-Do List Hack


Keeping a short handwritten to-do list will help you be focused.

I came across a to do list hack twice in the past couple of weeks. First, I read in Tim Ferriss's book The 4 Hour Workweek that having a short and handwritten to-do list at your desk every morning was going to help you be most productive. If you make this list at the end of each day, you can come to your desk the following morning and know exactly where you need to put your focus. By limiting yourself to two projects, there's a much higher chance you'll complete your list since there's less choice. We all know how more choice leads to more procrastination, fidgeting and angst.

So, I'm about a week into practicing this short to do list method and it's got me feeling kind of unfulfilled. My productivity is still high and I'm still working in time chunks to be able to hit different items on my passion project list every day. But I've still felt meh at the end of the day.

The short to-do list productivity hack came up again in listening to one of Sean McCabe's earlier podcasts about productivity and Guilt-Free Free Time. Sean is the type of person who is always working on something awesome and allows himself very little true down time, and I fully relate to that. (“True down time” meaning spending time on something that absolutely does not further you in your interests or as a person in any way.)

I was running this morning and listening to this podcast. Sean mentioned a very intriguing approach to to-do lists. I can't remember what he called it, but I'm going to call it The Done List.

The Done List is exactly what it sounds like: it's a running list of things that you've completed.

Boost your motivation by keeping a Done List.

By keeping a complete list of your accomplishments, you're giving yourself a pat on the back and are keeping a record of the really great things you've done that day. The 3pm-time-for-coffee-or-nap slump can easily be cured by taking a look at your Done List.

Sound familiar? That's because it's really important to recognize positive things in your life, daily.

How to Keep a Done List


The Done List: A way to celebrate your accomplishments and boost productivity

Grab a small notebook and a pen. Using actual pen and paper will feel much more cemented than typing a list. Then you can keep this notebook on the corner of your desk.

As you accomplish things throughout the day, write it down. Title each day something awesome, like:

  • Reasons why I kicked butt today:
  • I got all of this stuff done today:
  • I rock because today I:
  • Look at everything I did today:

You get the idea.

I certainly get a rush of adrenaline when I think about everything I've accomplished in a day or a week, rather than focusing on everything I want to accomplish.

Staying Balanced and Productive as a Creative and Ambitious Person


This also lends itself to the “Live in the moment” life philosophy. A list of goals is the future. Short actionable to-do lists are the present. And Done Lists are the past. While you do need all three to be a productive and ambitious person, the Done List can help you keep a healthy balance of all three by helping you recognize your accomplishments.

If you feel like you're too hard on yourself, give The Done List method a shot and let me know how it goes.

Read More »

Tuesday, August 12, 2014

How to Set Up a Self Hosted WordPress Blog in 4 Easy Steps

When talking about choosing a blogging platform, I recommend Self Hosted WordPress as the way to go. Because of its flexibility and power, a self hosted WordPress blog help you achieve your blogging goals and can give you room for growth and change with a relatively small investment.

Recently I've talked a lot about how to choose a blogging platform (things like what a blogging platform is, what you need to think about before choosing a blogging platform, the ins and outs of Tumblr and Blogger, and WordPress.com vs WordPress.org).

This post is a quick start guide of how to get your Self Hosted WordPress blog up and running in a matter of minutes.

I'll walk you through the technical details step by step so you can follow along, get set up, and move on with more fun blogging endeavors.

While there are multiple ways to get your WordPress blog up and running, these are the steps that I use whenever I set up a blog for a client. I choose to use services like GoDaddy and HostGator because of their unparalleled customer service and helpful documentation.

self-hosted-wordpress

Follow along with my video or with the step by step guide below. The tutorial below may look long but as evidenced by my 10 minute walkthrough video, getting set up with your own self hosted WordPress blog won't take long at all.



Register for a domain with GoDaddy


I choose to register for domains with GoDaddy because of their great customer service and simply because they're an industry standard.

  • GoDaddy.com .
  • Search for your desired domain name.
  • If it's available, add it to your cart.
  • I recommend signing up for Privacy Protection so your name, address and phone number will be protected.
  • Enter your billing information and sign up.

Sign Up for Web Hosting with HostGator


I use HostGator for all of my WordPress blogs and have been using them since 2010. I highly recommend HostGator to anyone signing up for web hosting for WordPress. **Update - I personally am using Blogger now to save money, but still build all client sites on WordPress**

  • Go to HostGator.
  • Click on the “View Web Hosting Plans” button.
  • Choose your plan. I recommend Hatchling if you're only going to have one domain name, and Baby if you plan on having multiple websites.
  • In the Order Wizard, choose “I already own this domain” since you registered for a domain with GoDaddy.
  • Enter in your domain name.
  • Choose your hosting package information and Billing Cycle.
  • Enter your preferred username and password.
  • Enter your billing information and credit card or Paypal info.
  • Uncheck the Hosting Addons if you choose.
  • Check Accept terms and conditions and then click Create Account.

Within a few minutes you'll get your welcome email from HostGator. This email contains a lot of important information, like your logins and passwords for HostGator billing and HostGator Control Panel (aka CPanel). This email also contains your Nameservers, which is pertinent for the next step.

Point Your Domain to HostGator by Changing Settings in GoDaddy


Now you just need to make a small change to your domain in GoDaddy so that your domain name points to your HostGator web hosting plan.

  • Log into GoDaddy.
  • Click on Visit Your Account and navigate to your domains. Next to the domain you wish to edit, click Launch.
  • Under the Settings tab, find Nameservers. Click on Manage.
  • Click on Custom nameservers, then click Enter Custom Nameservers.
  • Paste in the two nameservers from the HostGator welcome email in each row. They look like this: nsXXXX.hostgator.com
  • Click OK.

Install WordPress


This is the last step! You'll need to go back to your HostGator welcome email and click on the Control Panel link. Log in with the username and password provided in the HostGator welcome email.

Once you're logged into HostGator's Control Panel:

  • Locate and open QuickInstall (under Software/Services or by using the Find search bar.
  • In QuickInstall, click WordPress under Blog Software.
  • Click Continue.
  • Choose where you want your WordPress installation to occur. If you want it at the top level of your domain, leave the first field blank. If you want it under “blog”, enter blog after the domain.
  • Enter your admin email, blog title, admin username (choose something other than “admin” for security purposes), and your first and last name.
  • Click Install Now.

WordPress will install instantly. When it's finished, the QuickInstall page will refresh and you'll get your WordPress login URL (something like http://yourdomain.com/wp-admin) as well as your login username and password.

From here, I recommend that you bookmark your wp-admin login page, log into WordPress and immediately change your password under Users as shown in the video.

That's it! You've now installed your self hosted WordPress blog. Now get blogging!

I hope this tutorial was helpful - as always, please leave questions in the comments.

Read More »

Tuesday, July 29, 2014

WordPress for beginner bloggers: General Settings and Branding

When you're getting started with WordPress versus other blogging platforms, the settings available can feel overwhelming because of the sheer quantity of choice.

bunny thinking of starting a wordpress blog
Bunn dreams of starting a blog. -Sour Bunnies

Within the Settings menu, there are five major categories for settings that should be looked at first, before starting to blog. Some of these settings are important to get right the first time because they are harder to change further down the blogging road. Other settings can be forgotten; this post series will be a good reminder to comb through these settings again if your WordPress blog is already set up.

general

First up is Title, Tagline, and other General settings. This post is meant to be for absolute WordPress beginners or for anyone looking to improve their blog's first-glance branding.

General


Within the General Settings, there fields for the name and description of your blog, time and timezone, and your language.

Site Title


The Site Title blog is important. This doesn't affect the URL of your blog which displays in the browser's address bar, but it will show up in a lot of important places. For example:

  • The top of your blog design
  • In the title of the browser tab
  • In search results

So, be sure to use proper formatting when entering your Site Title. Proper spelling and capitalization are important here.

For reference, the official Site Title of my blog is Hello Brio Studio.

Tagline


Your blog's Tagline is your blog's short description, and defaults to “Just Another WordPress Blog” when you're getting started. So make sure to change this right away!

On my blog, my current Tagline is “Design. Blogging. Creativity.” Your Tagline can encompass what your blog is about, what your mission statement is, and more. In the past, I've had Taglines like this:

  • A creative lifestyle blog
  • A creative lifestyle blog with posts about blogging and design.

Taglines sometimes display underneath the Site Title on your blog's design, but it really depends on your blog's theme.

The Title and Tagline partnership


Writing taglines is an art within itself. Between your blog's Site Title and Tagline, your site needs to be close to self-explanatory.

When new visitors come across your blog, it's important for them to be able to tell what your blog is about within seconds. If they come across a blog that is titled “Mary's Blog” where the tagline is “A place where I share the stuff I love”, there's a chance people will quickly skip over your site.

But say you're Mary, and you write a blog on really awesome and alternative knitting patterns. You may consider this pairing:

  • Title: Knitting Mary
  • Tagline: Kickass knitting pattern reviews for cool chicks

This pairing not only introduces the blog's main topic, but it also helps incorporate a bit of Mary's personality and niche within the knitting community.

Again, crafting the perfect Title and Tagline combo is a process. Revisit these items periodically while you're blogging, and make sure your blog is still well-represented in your Title and Tagline.

Now, some quick boring things before we move on:

Time, Timezone, and a quick note on some “mystery” WordPress settings


While some of these settings may seem pointless to choose now, they are important to choose now and keep in mind for later because the settings may take into effect when you switch your WordPress blog's theme (i.e. Timezone, Date Format, Time Format, Week Starts on, and Language).

When designers make themes, they can choose what is shown and what isn't. So for example: while a certain time format (as set in General Settings) may not be applicable for one theme, it can be for another.

On Timezone: because WordPress likes to use UTC timezones, it can be a bit confusing. Not sure what timezone you're in? Google it! I've googled Philadelphia time zone and Google spit back:

Eastern Time Zone (UTC-05:00)
Philadelphia, Time zone

General Settings complete!


That's all I've got for you here.

Just remember that your Title and Tagline is an important work in progress, and to keep it in the back of your mind for periodic improvements.

Questions about WordPress settings? Comment below.
Read More »

Monday, July 28, 2014

Change scenery for a new perspective

There's something to be said for changing your scenery in order to help you get more done, feel more creative, and become inspired.

Living in center city Philadelphia, I can leave my apartment any time and park myself at a coffee shop so I can get more work done. If I'm really feeling bold, I can do the coffee-shop-hop and grab a large cup of house drip at each place I go until the day is done.

plenty rittenhouse coffee shop
Photo via Hello Brio Photo

There's no question in my mind that I thrive best in the city. The thrill of being able to walk anywhere at any given time is a freeing feeling. I feel like 90% of everything I need can be reached by walking.

However, any city person can start to get wrapped up in a bubble pretty quickly. Sometimes it's necessary to hop in a car and take a long drive in order to gain a new perspective on what you want and how you want to achieve it.

Choose your destination - Chevy Volt
Choose your destination.

Driving through the Hershey area this past weekend let me do just that. Escape the congestion and boxed-in feeling that comes along with living in the city by zooming between farms that stretch as far as you can see.

farm roads in hershey pa

No matter where you're from or where you live, seeing new sights and not getting stuck in your routine surroundings can help open your mind and help you gain clarity.

That's why travel is so popular for so many people. But an expensive vacation doesn't always have to be the answer: you can relax your mind enough sometimes just by taking a drive.

How do you change scenery to help gain clarity and creative inspiration?
Read More »

Wednesday, July 23, 2014

What to do with your old awkward blog photos

If you've been blogging for a while, you may or may not be aware of your early posts.

You know them. The ones that would probably make you cringe if you re-read them or looked at how they were formatted within your fresh blog design. I mean yeah, I have quite a few myself.

Ignorance is bliss. Ignorance is bliss. But here is one AWKWARD photo:

Awkward! Sorry!
Awkward! Sorry!

I got a question from a fellow blogger recently. She runs a review blog and noticed that a few of her older images are ranking nicely within Google, but those photos are unfortunately pretty bad. Bad in terms of poor lighting, awkward poses, and probably lower resolution.

She knows that she can't be the only blogger with this problem, and she is right! She asks if she should replace the images or if that would make "Google angry" (which I love, by the way).

So here are my two cents. Please share your thoughts in the comments!

What to do with your old and bad blog photos


About the old low-quality photos - a couple of things.

First, any publicity is good publicity.

And the second thing: the best way to have better photos come up sooner is to continue to post new photographic content with better lighting and poses, making sure to include those search keywords within your image "alt" tags.

The image alt tags within your blog are going to help categorize your photos and will make them more Google-friendly. (Alt tags are actually designed to help blind people "read" your images and be able to tell what is going on in a webpage, but they also help with SEO, or Search Engine Optimization. All good things.)

The takeaway


Keep blogging, and work on improving your photography skills. The right lighting can make a huge difference, too.

Do you have embarrassing old blog photos floating around? What is your approach with them?

Read More »