It’s about delivering one website countless ways depending on the width of the screen.

What to add? What to remove? How to prioritize what’s most important? What are the implications for search rankings? And how do you do all of that with just one code base?

It truly takes an expert to responsively code a website.

So we asked Tim Cross, one of AwesomeWeb’s finest responsive web designers, to give you insight on what it takes to build a proper, responsible, and responsive website.

Whether you hire Tim or decide to add responsiveness to your website yourself, keep this as a resource to know what needs to be done.

1. Hidden navigation menus.

On smaller screens hiding the main navigation menu is a good way of keeping layouts simple. An icon, text or combination of both indicates to the user where the menu is.

Your options include a simple drop down menu where the menu slides down and covers the main content below or the overlay method where the menu expands and covers the whole screen.

BBC Sport uses a drop down menu that expands when pressed. As they have multiple collapsed menus on the same page, they use different calls to action to help the user understand the hierarchy of the page.

Huge uses an overlay menu. They also use this menu style on the desktop view, keeping the burger icon visible and simplifying the content on the page.

2. Horizontal swipeable menus.

Another way to show menus on smaller screens is to keep it visible but let the content overflow off the edge of the screen. Showing part of the text cut off indicates that they can swipe to reveal.

The Guardian uses a clear, horizontal scroll menu, with an extra call to action to see “All” – this appears as a drop down menu when pressed. A good example of applying different methods in the space available.

The horizontal scroll menu on Google is a list of plain text links, that overflow off the edge of the screen – a simple way of indicating more content to the user. Each text link has drop down menu that appears when pressed.

3. Give buttons and links large, clickable areas.

Rather than making buttons smaller on mobile, make them larger, so that they are easier to tap. In fact this doesn’t just apply to small screens, it’s good for them to be large whatever the device – from touch screen tablets to desktop PCs.

Large buttons improve usability. As well as making buttons larger, text links benefit from being larger. If, for example, you have a grid of news headlines, with a text link that says “Read More” inside each of them, rather than making this the link, make the whole content block a link, so that the user can click anywhere.

Easier to use. Better experience for all.

The Add to Basket button on the Oliver Bonas site is large, clear and stands out from the page with it’s contrasting colour.

The Pretty Green Energy site has big buttons, and large, clickable areas on content list items.

4. Balance font weights and sizes.

The size ratio between headers and paragraph text should be well balanced. Large headers don’t look good on mobile, especially if they stretch over a few lines. Everything should be resized appropriately.

Newer mobile devices have high-resolution screens, which makes text more legible and easier to read. You can afford to go a little bit smaller on mobile screens and increase the font sizes when you get to a larger display.

Nike use a chunkier weight of font on desktop, which works well in the banner. On mobile they lighten the font and reduce the size so that it fits on one line.

No Drama reduces it’s H1 titles on mobile so that they fit on the screen and don’t over power the page.

5. Optimal reading widths.

While making a layout wider on larger screens, it is important to consider the line lengths of your content.

If a line of text is too long it’s harder to read because it’s difficult to follow line-to-line. Similarly, having lines that are too short breaks the rhythm of reading as the eyes have to move back-and-forth too often.

Common practise is to keep line lengths at about 60-75 characters. This can be achieved by setting your text areas to have a max-width of approximately 500/700 pixels wide.

99u keeps their pages well balanced with optimum reading widths, simple share links and a well positioned sidebar that doesn’t detract too much from the article.

As well as having the right reading widths, The Guardian’s article layout is uncomplicated, with lots of white space and a clear, clutter-free sidebar.

6. Put important information near the top on mobile.

Show telephone numbers, contact info, buy now call to actions, etc. at the top on mobile. Mobile users want information quickly, but this also works well on any device.

Even with browser sizes being so varied now and the idea of the “fold” not really existing anymore, putting key call to actions at the top of the page is still important. For example, on a ecommerce product details page it’s good to have the “Add to Basket” button visible to the majority of users, without them having to scroll.

Metris Kitchens places it key information near the top on mobile as it is important for their users to see contact info (find a showroom) and conversion actions (request a brochure) clearly and quickly.

Ebay makes sure that the price and the buy it now button are clearly visible on mobile.

7. Change the order of content blocks when they collapse on smaller screens.

Decide what is more important to show first on a small screen, then change the content order around – this can be achieved through CSS (and sometimes JS if the layout is too complex).

If on desktop there is a text content block and an image block positioned next to one another, decide what is more relevant.

Or a sidebar and a content area on a page – on mobile if this collapses then the sidebar would be first, and would push all the content down the page, therefore it would be good to swap this around on mobile.

In this editorial content piece from Brown Thomas, the product info is positioned first on mobile. On desktop the content order is swapped around so that a lifestyle shot appears next to the product.

The Melanie F product details page places the product image first on mobile, then pushes up the product info to sit side by side on desktop.

8. Hiding content on smaller screens.

On mobile you can simplify the layout by hiding content that would be visible on larger screens, either by hiding it completely or using tabs and accordions to show/hide content. This declutters the page on smaller screens and lets the user see all the key info, with options to view more if they wish.

This product page on christianlouboutin.com simplifies it’s header and reduces product info on mobile, leaving the product image as the first content block.

On Selfridges the carousel of thumbnail images is removed on mobile, leaving just simple left/right arrows to swipe through.

9. Showing more content on wider screens.

Having a wider screen allows you to push more content further up the screen. More content is visible to the user straight away, before they have to scroll. Layouts can expand and accommodate more columns.

This portfolio grid view on Jimmy Gleeson increases it’s number of visible items as the screen gets’ wider, allowing more more content to be shown further up the page.

Smashing Magazine’s navigation layout is quite complex and changes a lot across different screen sizes. This is a good example of really thinking about the layout and maximising all space available per device and screen size.

10. Don’t forget about tablets in portrait mode.

Sometimes this orientation either falls in with the small mobile layout, which is more basic and not utilising all the screen space available, or it gets lumped in with a desktop layout which can make the content all squashed up.

Better use of media queries in your css can get the layout just right.

The layout on this Protest product details page still has a lot of information in a smaller space, without upsetting the proportions and spacing of the layout.

The Firebox product details layout doesn’t compromise anything in table portrait mode. Everything that appears on desktop is still there and the content is presented in a well balanced and simple way.

11. Replace enlarge image functionality with long scrollable gallery pages.

On small devices, having an enlarge image window doesn’t work if the image you are already looking at fills the screen.

For image galleries, use a long scrollable page, or a swipeable carousel with left/right arrows. The long scrollable gallery also works well on tablet and desktop.

This image gallery on Apple uses a long scrollable page on desktop as well as mobile. The captions are removed on mobile to simplify the layout even more.

This product gallery on UrbanEars appears on the same page and expands down after pressing a link. It’s keeps the fundamental good parts of a popup, ie. not going to a new page, but then presents the images in a better, more usable way.

12. Optimise the UX for touch screens.

Add swipe gestures to banners, menus, image galleries etc.

Touch screens are by nature intuitive to use, therefore we can be more subtle with navigational aides, e.g half an image off the screen on a carousel suggests that there is more content to come.

Hover events are inconsistent on touch screens. Disable these and replace with touch events. If the content to be displayed on hover isn’t critical and just fancy embellishment, then disable it on touch screens all together.

The hover states on the Born Group’s portfolio page are animated on desktop, and show the title of the project. As this information still needs to be accessible on touch screens the hover events are replaced with touch events – one tap to view info, then another tap to view the project.

The Made site added swipe events to it’s home page banner. They clearly thought about their users and utilises these touch events on the rest of the site, on places where it is natural to swipe – for example, on a carousel of products.

13. Use less images.

A lot of effects, like background gradients and button hover states, can be achieved by pure html & css. Pages load faster, which is especially good for mobile, and less time is wasted creating lots of graphics.

Using fonts for your icons means you don’t have to create images. They are scalable, have cleaner edges, load faster, and are good for retina displays. This optimisation works great on all devices and screens.

The desk.com site uses icon fonts well. Adding colour, which is as easy as changing a font colour, is a great way to add more impact to your page.

The Pretty Green Energy site uses large icon fonts for it’s section headers. Increasing the size of icon fonts is straightforward and does not require editing images.

14. Responsive videos.

This method allows for videos of any size to respond to device size automatically, without having to set explicit heights or widths on the video itself.

It’s achieved with only a few lines of css. This works well with videos inserted directly on the page and in iframes.

The videos on Anyilu stretch across the page and fill the whole space. This gives the page great impact. They respond and resize automatically on different screen sizes.

The embedded video’s on Brown Thomas use iframes and are fully responsive. No heights or widths are specified, allowing easy content management and quick page creation.

15. The fold no longer exists.

Devices are smaller, taller, wider, and longer.

It’s not important to cram everything at the top of the page. Let pages breath and expand with long, flowing content blocks and generous spacing.

People naturally scroll. By giving them more content below the “fold” you’re actually inviting them to be more engaged with the page and to read your content.

The iMac product page on Apple is a long, flowing page, with lots happening as you scroll. The experience pulls you in. They also utilise a fixed nav, so that the key call to actions, i.e. Buy Now, are still visible as you move down the page.

The Sonos product pages have a good balance between fixed width content text blocks and wider, full screen image panels. This keeps the page interesting and more engaging as you scroll. The spacing is well balanced without it being overcrowded.

Wrapping Up

Check your Analytics. I bet mobile traffic is a higher percentage than you think. And I bet it’s growing month-to-month.

If your site isn’t responsive, every single mobile user that comes to your site is having a bad experience.

Even if it is responsive, I’m sure there are a number of areas where it can be improved.

Responsive web design is my specialty. I can work on any website, WordPress, Modx or otherwise. My clients typically have at least 10,000+ monthly visits and I charge $1,500 – $3,000 depending on the complexity of your site.

Hire me once, I’ll do the job right, and you’ll never have to worry about a bad mobile experience ever again.

If you have questions, check out my portfolio and contact me here.

The post 15 Best Practices for Responsible Responsive Web Design appeared first on How To Make Money Online.

Everyone makes value judgments based on appearances. Unfortunately for me, that means I’ll probably never land a date with Adriana Lima (below).

It also means that simply having well-written articles on your blog isn’t good enough. A good blog post has to look good too — and that means using images to make your blogs stunningly beautiful.

How to Improve Your Blog with Images

How Beautiful Images Benefit a Blog

When you use quality images on your blog, readers associate your blog with that same level of quality. When you use dull or generic images not only will readers not click on your posts, they’ll also assume your content is dull and generic too. So use images that reflect how exciting, interesting, and beautiful you blog is (more on how to find those images below).

These types of high-quality images don’t just improve the perception of your website, but they increase its “stickiness” as well. Visitors are more likely to click on an article when the post image catches their eye or inspires a bit of curiosity.

Good images also help to make your post more likely to be shared on social networks. For instance, when someone shares an article on Facebook they have the option to choose one of the images contained on the page. If you want your content to go viral, you’d better make sure it contains some great images.

The Importance of Putting an Image Above the Fold

On most computer screens, the above image peeks just above the fold when this page loads. That means that every reader is guaranteed to see that there’s an image there — and almost every reader is going to scroll down and see what the image contains. Chances are, those readers are going to read the headline below the picture next… and so on and so on.

Simply convincing your viewers to begin reading and scrolling down is a big hurdle and it’s hugely important. It’s so important, in fact, that Michael asks that every single post on Income Diary have an image above the fold.

Does it work? Well you’ve read this far, haven’t you?

Cropping and Sizing Your Images

The best size image depends on the design of your site, specifically the width of the content area. The ideal size also depends on what works best for the individual image your using. If it’s a simple, iconic image it can afford to be smaller, whereas more intricate images have to be larger in order to view their complexity.

I’ll almost always center these larger images. In this case my favorite size is a big, beautiful 650 x 320 pixels, like the one above. This size is great for making an impact and creating separation between major sections of your article. Don’t use too many of these larger images, though. They’ll slow down the pages loading time and their larger resolution will go to waste on many mobile devices.

Thinner center-oriented images also look great and they can be used more often, like this 650 x 236 pixel image:

For left and right oriented images, I like to keep the width small (example  near the bottom). That way you can be sure that it won’t crowd the text too much, even on smaller screens. In this case I’m using a 180 x 180 square image. I orient my images to the left or right very often and that’s partly because they tend to look better in text-heavy writing with long paragraphs, whereas I prefer to write with shorter paragraphs.

On Income Diary, our post images are 345 x 180.

Where to Get Images to Use in Your Post

There are a lot of different image databases out there, but I recommend Compfight. Compfight is specifically tailored to help bloggers find images for their posts, so its easy to search for images within the creative commons and to attribute images appropriately.

If you can’t find what you’re looking for on Compfight (not bloody likely), then try Flickr or a good old-fashioned Google search.

Making Sure the Image is Licensed for Use on Your Site

Images online are licensed differently, which means that their owners have set different standards for how they can be used by others online. Images on sites like iStock have licenses which require that you pay money in order to use them, but most of the time you can find a great image that suits your needs for absolutely free.

On Compfight, it’s as simple as clicking ‘creative commons’ on the bar to left after you’ve made a search. Once you’ve found an image that you like, you can click on it and view the license agreement. There you’ll see other pertinent information, like whether you’re allowed to remix or adapt the work. I usually only use images that allow me to adapt because that way I can make sure that all of the images in my articles are sized the way I want.

If you’re planning on using an image for commercial purposes, for instance if its included in an ebook that you’re selling or as part of a membership site, then you’ll need to narrow your search further to only images that have a commercial license.

How to Credit the Photographer Online

If you’re using an image that you didn’t create, it’s only fair that you credit the creator for their work.

Again, Compfight makes this very easy. They provide you with a line of html that you can copy and paste directly into your post. Here’s the attribution for the image of Adriana Lima above:

Photo Credit: snobmodels via Compfight cc

Making Your Own Images

“For all of the most important things, the timing always sucks. Waiting for a good time to quit your job? The stars will never align and the traffic lights of life will never all be green at the same time… ‘Someday’ is a disease that will take your dreams to the grave with you.”

– Timothy Ferriss

Creating your own images allows you to create custom images that work perfectly for your article. You also don’t have to add attribution or worry about licensing.If you’re a skilled artist or photographer, then making your own images will come naturally.

I used an original photograph of a stoplight in Bellingham, Washington to illustrate a quote in an article I wrote containing life lessons from Timothy Ferriss. I like when an image has a symbolic connection to the concept that’s being discussed and I also really like this combination of block quote right underneath a big, centered image.

In addition to original photography, I’ve also used my own drawings. The drawing below is for one of my most popular Income Diary posts (21 Life Lessons from Steve Jobs). In this case, it was as simple as taking a pen to paper, scanning the results, and cleaning them up a little bit in Photoshop.

But the most common way that I’ve made my own images is by taking screen shots of web pages (ALT + PrtSc) and editing them. This is on display right here in this article, like the image of the CompFight interface above. In a niche that deals with digital technology like Income Diary, it’s pretty common for a screen capture to be relevant to your article.

Can You Write a Stunningly Beautiful Blog Post?

If so, Income Diary wants to hear from you. We think that we can help our readers more by providing them with more content, more often.

That’s why we’re now accepting submissions for articles and the best part is that we’re actually paying for your work. This is chance to share your expertise with our audience of 10,000’s. Of course, you’re article will have to be informative, well-written, and stunningly beautiful.

You can fill out the submission form here and let me know in the comments below if you have any questions or other good ideas about how to use images in blog posts.

The post How to Make Your Blog Posts Stunningly Beautiful with Images appeared first on How To Make Money Online.

But if you take your blog seriously and you want it to visually stand out, the first step is understanding the principles of design. Once you understand what makes a good blog design, you can work on it yourself or find and qualify a talented designer.

Here are 13 expert-level blog design tips that I’ve gathered from three years of being a freelance web designer. To help illustrate these tips, I’m going to use HelloBar.com’s design as an example.

1. Make Goal-Driven Design Decisions

The purpose of design is to get your website to convert towards your goals. That’s it. Everything else comes secondary.

How do you do that?

You need to have a visual hierarchy that leads to a call to action. In simpler terms, feature a headline or a series of headlines that end in a call to action. Then put this headline/call to action duo in the places that people see the most (i.e. top of homepage, top of sidebar, bottom of posts, etc.).

The goal of Hello Bar’s homepage is to get you to “Sign Up” or “Try it Out” and their design makes that obvious.

2. Use 2-3 Fonts, Max

At most, use one font for your logo, one for your headlines, and one for your body content.

Any more and your blog’ll look messy.

Hello Bar has a distinct logo font, Pacifico headline font, and a sans-serif default body font.

3. Use 2-3 Colors, Max

Your blog should have a primary color, a shade of grey, and a call to action color.

The primary color is the first color you want people to see and the last color you want them to remember. For Hello Bar, it’s light blue.

The shade of grey will help you subtly emphasize and de-emphasize certain aspects of your design.

The call to action color will be used sparingly as, you guessed it, the color you want people to look for when they’re deciding what to do next. For Hello Bar, it’s orange.

Hello Bar uses light blue, various shades of black/grey, and a bright orange to draw your attention.

4. Pick Perfectly Matching Color Schemes

Along with limiting your color scheme, your primary and call to action colors should complement one another.

To find scientifically matching color schemes, start with your primary color and find supplementary colors with ColorSchemeGenerator.com.

Hello Bar’s blue and orange are perfectly complementary.

5. Cherish Subtlety in Gradients, Shadows, and Textures

Web design is like makeup, less is more. With your gradients, shadows, and textures, make them so subtle that you have to look closely to tell that they’re there.

Subconsiously, you’ll notice that it looks good. But you’ll have to take a closer look to realize why.

If you’ll look closely, there’s a texture in the background, the logo has a shadow, the headline has a shadow, and the buttons have a subtle gradient.

6. Apply Global Light Angles for Gradients and Shadows

A common goal with art is to make it seem as life-like as possible. Web design is no different. One way to do that is to maintain a global light angle across all gradients and shadows.

Think about it. If the sun is shining on a table full of buttons and raised letters, they’re all going to have the exact same gradient-effects and shadows.

Hello Bar uses a 90 degree global light source. The logo shadow, headline shadow, and button gradients are consistently at 90 degrees.

7. Embrace White Space

Aside from effectively using padding and margines, the best way to embrace white space is to simply get rid of everything that doesn’t contribute towards accomplishing your goals.

Do you really need that tag cloud? No, you don’t. Nobody uses those.

Hello Bar uses “white” space to eliminate all distractions and draw attention to their call to action buttons.

8. Separate with 1-Pixel Borders

Borders help to clean up your design and to visually separate different sections. Use 1-pixel borders because they’re clean and crisp.

Hello Bar uses a bunch of dashed and solid, 1-pixel borders to separate their content.

9. Implement Grid-Based Alignment

This is one of the more complicated tips. Jacob Cass, from JUST™ Creative, introduced me to the 960 grid. It’s a Photoshop template that helps you align your design perfectly and precisely.

Whether or not you use the 960 grid, the different sections, parts, and text blocks in your design need to line up vertically.

I’m not sure if Hello Bar was originally designed with the 960 Grid, but everything aligns perfectly all the way down the page.

10. Implement Subhead Hierarchies in Your Content

If you want to communicate a series of thoughts or a process (i.e. a blog post), use subhead hierarchies coupled with short body copy to make it easy to move down the page.

From a design standpoint, subheads break up the content but they also make it scannable and easier to consume.

Hello Bar uses a series of well-designed subheads in the “How it Works” section of their homepage.

11. Design with CSS

The process of taking a design and putting it on your website is more complicated than you’d think. In essence, you take the images from your Photoshop file and set them as the background of certain areas with HTML and CSS.

If you have lots of intricate background areas, then this means that you website will need to load lots of images which will lengthen your loading time.

One way to get around this is to design the simple details with CSS. Here are a number of design elements you can add with CSS:

• Borders – {border: 1px dashed #CCC;}
• Frames – {border: 1px solid #CCC; padding: 1px;}
• Text Shadows – {text-shadow: 1px 1px 1px #CCC;}
• Box Shadows – {box-shadow: 10px 10px 5px #CCC;}
• Rounded Corners – {border-radius: 5px;}

You can also use CSS to create gradients, transitions, animations, font-faces, etc., but these start to get complicated and don’t show up in older browsers.

Hello Bar uses padding, borders, and a box shadow to add fast-loading CSS styling to their testimonial photos.

12. Speed Up Your Design with Small, Repeating, Background Images

If you use images to create your backgrounds, make them as small as you can so that they load faster. Then use CSS to make theme repeat-x/repeat-y.

This is the actual background image that repeats horizontally in the Hello Bar background to make the site load faster.

13. Maintain Consistency in Your Calls to Action

My final tip for you is to maintain a consistent design in your call-to-action buttons. This helps people find what they’re looking for. Plus, if they see the same button three times on a page, they’ll notice it and think, “I should probably click that.”

Hello Bar has three primary call to action buttons on their homepage and they’re all styled exactly the same.

If you’ve never checked out Hello Bar, I encourage you to do so. I use it on my blog and it seems to be working well.

The Final Word

If you’re not a designer or coder, I don’t expect you to implement these tips right away.

But once you want to upgrade your design, you’ll be able to ask your designer questions like, “When you convert your PSD to HTML, which design elements do you recreate with CSS so we don’t bog down the site with a bunch of bulky background images?”

On another note, the only rule here that’s unbreakable is #1. The rest are based on best practices and my personal thoughts on design. Bend them as you wish.

As always, if you need more guidance with any of these tips, leave a comment below and I’ll try to help you out.

Read more: ‘What to Put on Your Blog’s Homepage’

The post 13 Expert-Level Blog Design Tips for Beginners appeared first on How To Make Money Online.

If your homepage simply features a list of your latest blog posts, you’re making a big mistake.

It’s important to get your homepage right because it’s going to be one of the most viewed pages on your blog, but people don’t view it in the way that you’d think.

Who Visits the Homepage?

Before you decide what to put on your homepage, you need to understand who views your homepage and how they got there.

First-Time Visitors

You likely think that your homepage is the first page of your website that somebody sees. That’s probably not the case.

The only way your homepage will be the first viewed page is if another site links to your homepage, if someone tells somebody to go to www., or if you have a well-known brand.

On my blog, 14clicks, only 3.9% of my traffic starts on the homepage.

Second-Page Clickers

What’s more likely is that someone will first see a blog post, then click over to see the homepage. This person has already interacted with your site and they’re curious enough to click over to the homepage.

On 14clicks, the homepage accounts for 28.1% of the second-page traffic, which is 3.6 times more than any other page.

Returning Visitors

If someone found your site once, liked it, and wants to go back to it, they’ll do one of two things.

One, they’ll go directly to the domain. Two, they’ll search for the name of your site. In either case, returning visitors will probably start on the homepage.

On 14clicks, 58% of the homepage traffic comes from people typing in the domain directly or from Google (with some variation of “14 clicks” being 5 of the 6 most popular keywords).

In general, people find your site through a blog post. If they like the post, they’ll click to the homepage. If they return, they probably start on the homepage. Therefore, most people who see your homepage have already interacted with your blog and you need to adjust your content accordingly.

Your Homepage Needs to Answer Their First Question

“Why should I stick around?”

To answer that question, you need to communicate what your site is and who it’s for.

Eye-Catching and Concise Headline

The headline should be the first thing a new visitor sees. It needs to answer the question, “what are the benefits to me personally if I cruise around this blog?”

Put your headline front-and-center so it’s first thing someone sees when they visit your homepage.

Eye-Catching Image or Video

On the side of or below your headline, you need to put an eye-catching, trust-building, benefit-depicting image or video.

The purpose of this image/video is to elicit a positive emotional response while visually communicating what your site is all about. If you have a personal branding blog or a company that’s tied closely to your personality, put a photo of yourself on your homepage to build trust.

Good Example: JustCreative.com

Jacob Cass has a picture of himself and his headline featured above the fold. He also uses his headline to direct people to his portfolio and blog.

Tell People What You Want them To Do

After you tell people why they should stay on your blog, you need to tell them what to do next. Underneath your headline and image, put your call to action. This could be one of four things depending on the purpose and goal of your blog.

Request a Quote

If you have a service-based business and you want to use your blog to collect leads, the homepage is a great place to put a button or a link to your contact page.

Subscribe

If the goal of your blog is to get email subscribers, put an opt-in box at the top of your homepage.

If you’re worried that the opt-in box will annoy your existing readers, don’t be. In the same way that you tend to gloss over ads, once they’re subscribed, they’ll subconsciously scroll past it to the content.

Register or Login

If you have a membership site and your number one goal is to turn readers into users, place two buttons as your call to action: “Register” and “Login.”

Purchase Something

If you want to skip the whole email marketing step and go directly for the sale, not what I’d recommend, then you can make the homepage call to action “See Our Featured Product” or “Shop.”

Good Example: SocialTriggers.com

The sole purpose of Derek Halpern’s site is to turn readers into subscribers. So he puts opt-in boxes everywhere, including at the top of his homepage.

Add Credibility and Social Proof

Once a visitor knows how you can help them and what you want them to do, it’s up to them to make that decision. The best way to help them make that decision in your favor is to demonstrate your credibility through social proof.

Social or Subscriber Counts

People are a lot more likely to subscribe if they know that lots of other people are already subscribed.

If you have more than 1,000 subscribers, show that number directly below your call-to-action. If you don’t, you can show social proof with your number of monthly readers, Twitter followers, or Facebook fans. If none of those numbers are over 1,000, you need to get to work.

Show a Testimonial, Preferably from a Well-Known Source

Another way to build credibility is to feature someone else’s opinion of you and your blog. Ask your most active readers to give you a testimonial and tell them that you’re going to put it on the homepage.

What’s even more powerful is a testimonial from someone who everyone knows. This builds authority by association. But don’t coerce testimonials from people who wouldn’t otherwise read your site.

Press or Customer Logos

If you’ve gotten a lot of press or have worked with well-known brands, put their logos on your homepage. Again, this builds authority by association.

I’m torn whether or not you should link the logos to the articles, though. On one hand, it could build your credibility even more if people read those articles. On the other hand, you’re driving people away from your site right as they’re about to take action. What do you think? Comment below.

Good Example: Conversion-Rate-Experts.com

Ben Jesson and Dr. Karl Blanks, from Conversion Rate Experts, have worked with the largest companies in the world and their blog has been featured on a number of prestigious media outlets. They make that clear with client logos and press logos (which aren’t linked, by the way).

Regularly Updated Content and Deep-Linking for SEO

From a search engine optimization perspective, there are two important things to consider with your homepage.

One, your homepage should update at least slightly when you post new content. Google likes to see fresh content. Two, every page on your site should be two-three clicks away from the homepage to make sure it gets completely indexed.

Links to Latest Blog Posts

New content on the homepage, even if it’s just the headlines, is important for search engines, but it’s also important for your readers. When people come back to your blog, they’re expecting to easily find your latest content.

This doesn’t mean that your blog needs to be on your homepage. You can choose to use a Recent Posts plugin to display the headlines and excerpts from your latest blog posts.

Deep-Linking and Sitemap Link in the Footer

The best way to make sure that every page on your site is within three clicks of the homepage is to subtly link to your category archives and sitemap in the footer.

This also helps from a usability standpoint if people are looking for posts on particular topics.

Good Example: IncomeDiary.com

As you see, Michael showcases the latest posts on the Income Diary homepage because his goal is for you to consume as much content as possible. The more blog posts you read, the more likely you are to subscribe and buy something from him. In the footer, he links to the sitemap, category archives, a few popular posts, and author archives.

The Final Word

Blogs are different from traditional, static websites because almost everyone who sees your homepage has already seen a different part of your blog.

It’s important to adjust the content of your homepage knowing that they’re already interested in what you have to say. Whether it’s leads, subscribers, or sales, the homepage is a great place to convert people to whatever goals that you set for your blog.

How does this help you see your homepage in a new light? What are you going to do about it?

Read more: ‘7 Quick Tips to Make Your Blog Design More Readable’

The post What to Put on Your Blog’s Homepage appeared first on How To Make Money Online.

The same applies to your blog, except, you control every element that makes up the environment.

One of the easiest ways to improve the quality of your blog is to increase the readability of the design.

I’ve already made my point about the importance of subheads and lists. So now I want to tell you about seven other rarely-used, blog readability design tips.

1. Lure in their Eye with a Drop Cap

If you flip through a magazine, you’ll likely notice that many of the articles start with a drop cap.

They do that to draw your eye in to the beginning of the article. The easier it is to find the beginning of the article, the more likely you are to read.

How to Create a Drop Cap

Put this code in your theme’s style.css (or your theme’s equivalent):

.drop_cap { color:#888; float:left; font-family:Georgia; font-size:3em; font-style:normal; text-shadow:#333 1px 1px;}

Adjust the CSS to fit the colors of your theme. That’s just a good starting point.

Wrap the first letter of your posts in:

<span class=“drop_cap”>I</span>f you’ve ever…

2. Help them Start Reading with Big Intro Text

Once you lure in their eye, you need to make it as effortless as possible for them to slide into the content. One way to do this is to simply enlarge the text of the first paragraph.

This, coupled with the drop cap, will give your post intros a magazine-style professional touch.

How to Post Intro Text

Put this code in your theme’s style.css (or your theme’s equivalent):

p.intro { color:#333; font-size: 1.4em; line-height:1.4em; }

Again, adjust the CSS to your theme, but this will get you off to a good start.

Wrap the first paragraph of your post in:

<p class=“intro”> <span class=“drop_cap”>I</span>f you’ve ever…</p>

Note: I chose not to include a drop cap or intro text in this post because it wouldn’t be consistent with the rest of the posts on IncomeDiary. Consistency trumps fancy.

3. Keep Short Paragraphs

I know this advice is slightly redundant, but I think it’s important enough to mention again. Looking around the web, it’s as though we all had teachers who told us that paragraphs are comprised of 8-10 sentences.

Writing for the web is different than writing for paper because people are constantly being distracted. You need to keep somebody focused by helping the breeze through the content.

Solution: 1-3 sentence paragraphs.

4. Choose an Easy-to-Read Font

It’s a general consensus that sans-serif fonts, such as Arial and Verdana, are best for the body content of a webpage because they’re clean and not as cluttered as their serif counterparts.

I know, typography purists will argue why there’s no such thing as a best font for every situation, but here’s what some of the world’s top websites use for their body content:

• Google: Arial
• Wikipedia: Sans-Serif
• CNN: Arial
• Yahoo: Arial (home), Georgia (content)
• MSN: Arial
• New York Times: Georgia
• Wall Street Journal: Arial

When choosing your body font, you can be creative or you can go with what big sites have tested and found works best. Personally, I use Arial for almost every site I build.

5. Keep a Minimum 14 Point Font Size

A couple of weeks ago, Derek Halpern wrote a data-driven post about how the size 14 is the new size 12.

In the post, he cites a few of studies that revealed how fonts affect people’s ability to follow instructions and how they perceive your brand.

Just know that 14 pixels is the absolute minimum for easy-to-read body content.

6. Set Golden Ratio Line Height

Once you set your font size, you need to establish your line height based on the golden ratio. The golden ratio (1.618) helps you determine the optimal amount of space between lines.

Chris Pearson created a nifty tool to help us determine these numbers called the, Golden Ratio Typography Calculator.

How to Set the Golden Ratio Line Height

Use Chris’s tool to determine the optimal line height based on your font size and content width.

Let’s say your font is Arial, your font size is 14 pixels, and your content area is 600 pixels.

Put this code in your theme’s style.css (or your theme’s equivalent):

.format_text p { font-size: 14px; line-height: 23px; }

7. Pick a Light, Calming Background Color

A few months back, Neil Patel changed the background color of QuickSprout from a medium-grey to a calming yellow.

His reasoning was that as you scroll down the posts, the background area becomes more predominant. So it’s important that you choose a soothing color if you want your readers to respond positively to your message.

IncomeDiary follows suit with the light grey patchwork pattern in the background of the site.

How to Change the Background Color

Your theme likely has some built-in functionality to control the background color. If not, you can put this code in your theme’s style.css (or your theme’s equivalent):

body { background-color:#FBF7D1;}

Once again, adjust the color to fit your site.

The Final Note

As a blogger, I’m sure you spend a great deal of time creating content for your site.

That’s good, but spending a few minutes implementing a few of these tips will drastically improve the readability of every blog post you’ve written.

If you have any questions about making any of these changes, let me know in the comments and I’ll try to help.

Read more: ‘11 Ways To Dramatically Boost User Engagement On Your Blog’

Image:  Stuck in Customs

The post 7 Quick Tips to Make Your Blog Design More Readable appeared first on How To Make Money Online.

To help you set the foundation for your blog design, I’ve listed 10 design elements that almost all big blogs have in common and how you can implement them on your WordPress blog.

The 10 Big Blogs

To give you some hard data, I chose to use Mashable, TechCrunch, The Next Web, GigaOM, Seth’s Blog, Copyblogger, Problogger, KISSmetrics Blog, Freelance Switch, and The Oatmeal as examples for this post.

Header

The headers on nine out of ten of these sites were 100 pixels high or less. Most of them included the logo and a search bar.

Logo (10/10)

All ten of these blogs had their logo in the upper-left corner and hyperlinked it to the home page.

The GigaOM.com logo is in the upper left and it links to the homepage.

How to implement the hyperlinked logo: Most WordPress themes (i.e. WooThemes, Thesis, Genesis, etc.) let you upload a logo through the theme’s design settings and it automatically links home.

Search Box (6/10)

Six of the ten big blogs had a search box on the right side of the header. Seth’s Blog and Copyblogger put their search bar towards the top of the sidebar. The KISSmetrics blog and The Oatmeal don’t have a search mechanism.

TheNextWeb.com’s search box is on the right side of the header.

How to implement the search box: You can place your search bar as a widget in the Appearance > Widgets area of your theme. If you don’t have a widgetized header, this is the php for the search box:

<?php get_search_form(); ?>

Place it within your header.php or your theme’s custom php file. If you’re not familiar with php, put it near the top of your sidebar within the widgets area.

Content Area

Eight out of the ten big blogs feature the content area on the left and the sidebar on the right. Here are a few more common design elements within the content area.

Social Buttons (Slider) (10/10)

All of the big blogs include social sharing buttons with Facebook’s Like/Share and Twitter’s Tweet being the most popular. Google’s +1 and LinkedIn’s Share buttons are also popular. Digg, StumbleUpon, and Reddit buttons aren’t listed as often as they used to be.

Both Mashable and TechCrunch have social sliders on the left side of the content that slide down as you scroll down the page. IncomeDiary has this too.

TechCrunch.com’s sharing icons are in the left margin and they scroll down the page.

How to implement the social buttons: If you prefer not to hardcode the buttons into your theme, I recommend the Like, Easy Twitter Button and WordPress Google +1 Button plugins. Use the Sharebar plugin to put a scrolling social slider on the left side of your content.

Related Posts (7/10)

Seven out of the ten of those blogs feature a related posts area at the bottom of every post. This encourages people to read more of your articles, spend more time on your site, and become more engaged with your blog or business.

FreelanceSwitch.com features three related posts at the bottom of every post.

How to implement the related posts: I whole-heartedly endorse Rob Marsh’s Similar Posts plugin. You’ll also need the Post-Plugin Library plugin to get his series of plugins to work on your site.

Post Footer Call To Action (5/10)

Half of the big blogs have a very specific call to action at the bottom of the post. Usually the call to action is to subscribe or purchase.

The other five blogs just encourage you to share, comment, or click on an ad. One way or another, they all have a call to action.

TheOatmeal.com’s call to action is usually to buy The Oatmeal book.

How to implement the post footer call to action: Since every theme works differently, it’s hard to give specific instructions here. All you have to do is hook a slab of HTML into your theme at the bottom of your content area and above the comments area.

Sidebar

The sidebar is usually about half the width of the content area, and as I mentioned previously, most sidebars are on the right.

Sidebar Opt-In (8/10)

Eight out of the ten of these sites have an opt-in within their sidebars and five of them are at the top. The words Free Updates and Subscribe are the most prevalent headlines and calls to action.

Copyblogger.com’s opt-in is at the top of the sidebar with the headline, FREE UPDATES, and the call to action, JOIN US.

How to implement the sidebar opt-in: Every major email marketing provider has some sort of a form builder that spits out HTML. Embed the HTML in a text widget and put it at the top of your sidebar. You might have to play around with the CSS to get it looking the way you want.

Popular Posts (7/10)

Featuring your popular posts is a great way to introduce a new visitor to the best content on your blog. Seven out of the ten promote their most popular posts in their sidebar.

The KISSmetrics Blog features their popular posts in their sidebar.

How to implement popular posts: Use Rob Marsh’s Popular Post plugin to showcase your most viewed posts. Install the plugin and you’ll find a “Popular Posts +” widget that you can simply drag and drop into your sidebar.

Social Media  Links (9/10)

Nine out of the ten blogs feature links to their social media profiles with Twitter and Facebook being the most popular. Other notables are YouTube, LinkedIn, StumbleUpon, Flickr, and Tumblr.

Mashable.com’s sidebar features the Like Box, +1, Follow, LinkedIn, YouTube, Stumble, and RSS.

How to implement the social media links: You can create a Facebook Like Box here. Or you can get free social media icons to make your own buttons here.

Products/Ads (9/10)

Nine out of the ten promote either their products or advertisements on the sidebar, and five of them feature both. The only reason TheOatmeal.com doesn’t is because he features the products primarily as the call to action.

Seth Godin lists all of his books on his sidebar with the latest at the top.

How to add products and ads: Featuring your products on the sidebar is as simple as writing up the HTML and placing it in an arbitrary text widget. To feature rotating ads on your sidebar, I recommend the OIOpublisher plugin.

Footer

Traditionally, the footer was used as a place to list links to every nook and cranny of your website. But most sites are now opting for a more minimalist design with their footers.

Categories or Other Links (5/10)

Out of the five big blogs that have a more robust footer, they all list either category links or other links as an extra navigation menu area.

Problogger.net lists all of their categories in their footer to help visitors navigate the content.

How to implement footer links: A lot of WordPress themes have widgetized footers. If yours does, use the Text widget to place HTML within your footer. Similar to the post footer call to action, it’s hard to give detailed instructions here because every theme is different.

More Questions?

If you’d like more advanced tips around how to implement these design elements into your blog or specific themes, leave a comment below and I’ll point you in the right direction.

Read more: ‘13 Expert-Level Blog Design Tips for Beginners’

The post 10 Design Elements All Big Blogs Have In Common appeared first on How To Make Money Online.

A brilliant header, clean sidebar, and minimalist footer can go a long way towards making a blog look good. But the one area that’s often overlooked in blog design is the post styling.

Here are 15 blog post areas that need styling and 30 great examples for you to draw inspiration from.

Headlines

The headline should be the first thing they’ll see. The headline and post image needs to work together with the goal of enticing the visitor to read the first line of the post.

WebDesignerWall.com

FreelanceSwitch.com

Post Images

If not the headline, the post image is the first part of the post that people see. It needs to attract their attention first, curiosity second.

PSD.TutsPlus.com

Gizmodo.com

Breadcrumbs

Breadcrumbs help with navigation and SEO, but most of the time their ugly and unnecessary for people who frequent your site. You want the breadcrumbs to sink into the background of the design so your readers naturally glance over them but they’re easy to find if someone is looking for them.

UXBooth.com

Vector.TutsPlus.com

Meta Data

Like the breadcrumbs, you want the meta data (i.e. published on date, post author, category, etc.) to be worked into the design so it doesn’t stick out.

VisitMix.com

CSS-Tricks.com

Drop Caps

The point of the drop cap is to immediately draw your readers’ attention to the start of the post. Magazines and newspapers use this all the time and I think more blogs should do it as well.

DailyDropCap.com

AttackofDesign.com

Intro Text

The intro text should be slightly larger and easier to read than the rest of the content so it eases your readers into the post. Magazines use this technique in conjunction with the drop cap to lure in the reader in such a way that it’s hard to stop reading. It’s also called the lead.

Xheight.co.uk

Boagworld.com

Typography

Typography’s main function is to make the content easy to read. Most major news sites (i.e. CNN.com, AOL.com, MSNBC.com, and Mashable.com) use Arial because it’s widely considered as the web’s most readable font. But Arial isn’t perfect for every blog.

WebDesignLedger.com

Pearsonified.com

Subheadings

The point of a subheading is to make your content scannable. These need to be styled so they stick out and break up the content. A good subheading has the same effect as an image within a post.

FreelanceSwitch.com

DesignInformer.com

Bullets

Bulleted lists are another way to break up your content. With a little CSS magic you can use any image you want as the bullet.

Problogger.net

FreelanceSwitch.com

Blockquotes

Blockquotes are traditionally used to display, you guessed it, quotes. But some sites have started to use this formatting to draw attention to a certain part of the post to try to get you to stop scanning and read the whole thing. This is the magazine equivalent of a call out.

Copyblogger.com

Blogussion.com

Social Areas

In order to convince people to share your content, you need to style the social sharing areas so they’re obvious and remind the reader to share. I’m a big fan of the sliding social areas that sit in the left margin.

Entrepreneur.com

Mashable.com

Subscribe/Calls to Action

Every blog post needs to have a call to action. One of the more popular calls to action is to subscribe to your RSS feed or newsletter. It should be the most prominent area at the bottom of every blog post.

QuickSprout.com

Copyblogger.com

Related Posts

Listing the related posts at the bottom of your blog posts is one of the best ways to convince people to stay on your site. To maximize attention-grabbing and curiosity-inducing, this area should include the headline and the post image for each related post.

Hongkiat.com

NaldzGraphics.net

Post Authors

The post author section is a nice way to introduce who wrote the post while making it easy for the reader to connect with that person.

BuildInternet.com

InspectElement.com

Comment Areas

A nicely designed comments section goes a long way towards encouraging your readers to leave comments. The number of comments, comments, and comment form need to work together. And the comments should be nested so it’s easy to follow conversations.

WebDesignerWall.com

Blogussion.com

The Wrap-Up

Since the post area is where most of your visitors’ time is spent, I believe it’s the most important area of the design to focus on.

I hope I’ve opened your eyes to the importance of blog post styling and all the creative ways you can style these 15 elements to encourage readers to spend more time on your blog.

Read more: ‘10 Lessons From 10 Years Of Hiring Freelancers’

The post 30 Great Examples of Blog Post Styling appeared first on How To Make Money Online.

If you need a designer or developer who could’ve started yesterday, go to AweseomeWeb.com

To commemorate the redesign and, more importantly, provide you with an inspirational list, I present to you the 30 best designed blogs of 2011.

The Criteria for Good Blog Design

To remove as much of the subjectiveness as possible, I started with these five good blog design criteria.

• Simplicity – Is it simple?
• Web Design Standards – Does it follow web design standards like dark font on light background, clearly distinguished headlines, use of CSS sprites, consistent lines, and golden ratio compliance?
• Attention to Detail – Is there consistency within the design and otherwise pixel perfect?
• Easy to Navigate – Could I easily find and use menus, links, and other navigational components?
• Memorability – Could I remember what it looked like after exiting the site?

30 Best Designed Blogs of 2011

In no particular order, but roughly grouped by the design styles and subject matters of the corresponding blogs, here are the top 30 blog designs of 2011.

1. Freelance Switch

Big, bold headlines, subtle use of shadows, and practically impossible to see gradients, FreelanceSwitch.com is one of the best.

2. Copyblogger

Copyblogger.com is the epitome of simple, solid, straightforward blog design. You know exactly where to click as soon as you land on the page.

3. Pearsonified

Like Copyblogger, Pearsonified.com is beautiful in its simplicity and alluring with its gentle smattering of bright colors.

4. KISSmetrics Blog

The KISSmetrics Blog does a great job of combining modern design elements while maintaining a sense of professionalism for their mostly corporate target market.

5. AVC

AVC.com is super-clean and, at 16 pixels, it uses a slightly larger than average font which makes it noticeably more pleasant to read.

6. Startup Quote

StartupQuote.com is as elegant as it gets. Their dedication to uniquely depicting the quotes is what makes their site stick out.

7. The Next Web

But TNW does a great job of incorporating the ads without distracting too much from a clean, easy-to-navigate design.

8. Business Insider

If you’ve read an article on BusinessInsider.com, you’ve noticed that the site is designed to keep you hooked on their content for dozens upon dozens of pageviews.

9. Webs Blog

It looks great, but Webs Blog is also seamlessly integrated with the rest of the site despite the blog existing on a subdomain.

10. Go Media

With carefully-placed image overlays, the design simply pops off the screen and it’s hard to forget GoMediaZine.com’s design.

11. Hello Bar Blog

Hello Bar does an impressive job of integrating subtle textures into their design to give their site a vintage, but modern look. Plus, the clouds move!

12. Blogussion

The Blogussion.com design is the first awe-inspiring design I remember finding on the internet.

13. Modern Nerd

Modernerd.com’s logo is simple, the fonts are consistent, and the background image communicates what the blog is all about.

14. I Wear Your Shirt

IWearYourShirt.com does a wonderful job of cleanly packing information above the fold while emphasizing the important content below.

15. Johnny Cupcakes

Consistent with their timeless brand, almost every design element is black and white which makes Johnny Cupcakes’ photos and products stick out.

16. TheOatmeal

With its off-center sidebar and overflowing “Email” link in the footer, TheOatmeal.com’s design has its flaws. But reading between the imperfections, you’ll find that the design is perfect for Matthew Inman’s, “this is the way it is and if you don’t like it, I’ll unleash my army of chastising Facebook fans so you never forget” attitude that makes his site great.

17. DearBlankPleaseBlank

DearBlankPleaseBlank.com is a creatively designed blog with its constantly rotating header image, quaint use of opacity, and the fact that everything in the sidebar is the same exact width, even the ads.

18. Tuts+

Everything about the TutsPlus.com and Envato network is gorgeous when it comes to design (including the aforementioned FreelanceSwitch.com). They have a knack for choosing perfectly-aligned color schemes and their attention to detail is impeccable, even within their posts and tutorials.

19. Build Internet

BuildInternet.com is part of Smashing Magazine’s The Smashing Network rightly so with their uniquely-displayed feature post image and commitment to maintaining their design elements throughout the site.

20. 45royale Inc.

45royale.com is a web design studio that boasts an imagination-capturing header while effectively introducing you to and navigating you through the content within the blog below.

21. Web Designer Wall

As another member of The Smashing Network, WebDesignerWall.com is one of the most widely-recognized designs in the world, with their eye-popping headlines and unforgettable header image.

22. Web Designer Depot

Similar to Web Designer Wall, WebDesignerDepot.com hosts another one of those designs that’s impossible to forget.

23. Ilovecolors

Ilovecolors.com.ar has a similar style but stands on its own with a cleverly designed content area that’s emphasized through the strategic shadowing of the background image.

24. Tut Candy

TutCandy.com’s header makes you salivate which embodies their tagline, “Only the tastiest design tutorials.”

25. Owltastic

Owltastic.com is a beautiful representation of what you can do with different shades of blue. Yet, somehow, all of the important content still seems to stand out.

26. Vectips

Vectips.com does a nice job of maintaining an eventually sellable feel on a personal-ish branding site.

27. The Design Cubicle

The final Smashing Network blog in this list belongs to TheDesignCubicle.com. It looks like a website but feels like a chapter of a book.

28. ThemeBIG

I like the subtleness of the sprites in ThemeBIG.com’s nav menu along with that welcoming feeling you get when you first enter their site.

29. Ecoki

Ecoki.com is an Eco-Lifestyle blog with a remarkably, well-branded design that’s consistent across every nook and cranny of their site.

30. Fiked

Everything from the header, to the content area, to the comments area is custom designed and in tune with the rest of the site.

There You Have It

I would’ve liked to visit every blog in the world before I made this list, but I was starting to get hungry.

From now on, when anybody needs a web designer or developer, they go to AwesomeWeb.com

If you know of any great blog designs that I missed, please enlighten me with some of your favorites in the comments area below.

The post 30 Best Designed Blogs of 2011 appeared first on How To Make Money Online.