All posts by LunaW3badmin

What to Do When Your Site Updates Aren’t Showing Up

www-questionsYou just spent the better part of of 3 hours updating your website’s styling or templates only to find that you can’t get the changes to show up in your browser. Even worse, your site visitors can’t see them either.

This can be an incredibly frustrating situation, but there are several things to try!

A Hard Refresh
Your first course of action is a hard refresh. This is different from a regular refresh because the hard refresh will force your browser to reload all of the files associated with that website.

Background: when you visit a website, your browser will save certain information to your local drive (usually the stylesheet, javascript files, and images) so that the next time you pull up that website, it will load faster. This generally makes the web a more user-friendly place to be, but when you’re trying to make updates, it can be a hassle.

A hard refresh will force the browser to pull all the files from the server instead of your local cache. On a PC, just press Control + F5. On a Mac, it will be Command + Shift + R.

If your changes show up, you know that they are at least active on the server, but that still doesn’t solve the problem of repeat visitors who have the site cached in their browsers. So how can you ensure that your visitors don’t pull up a cached version of your site files?

Change the Version Number
Ok, bear with me because this one’s a little harder. So the files that your browser is most likely to cache are external files that are called in your header. They’ll probably look like this:

<link rel=”stylesheet” type=”text/css” media=”all” href=”/style.css” />

or maybe

<script type=’text/javascript’ src=”/js/jquery.js”></script>

These are both files that need to be loaded in order for your page to display correctly. If you’ve made changes to one of these files, and those changes aren’t showing up for you until you hard refresh, you may want to consider changing the version number.

How do you do it? Just add “?v=2″ to the end of the file name so it looks like this:

<link rel=”stylesheet” type=”text/css” media=”all” href=”/style.css?v=2″ />

When a site visitor hits your site and your browser sees that “?v=2″ it will basically say, “Oh! We’ve never seen this before!” and load the stylesheet anew. Already have “?v=2″ at then end? Just go with “?v=3″ and so on.

Check Your Caching Plugin
Especially if you’re on WordPress, check to see if you have a caching plugin installed. Depending on your plugin, you will be able to delete the cache under Settings or maybe it has it’s own menu button on your sidebar. The purpose of these plugins is to save your site offline on your computer and your visitors’ computers to improve load time, so when you make changes, be sure to empty the cache!

Contact Your Hosting Provider
If you’ve tried all of the above, you may be facing a server issue. Get in touch with your hosting provider to let them know you’ve tried hard refreshing, changing the version number, and clearing your caching plugin (if you have one), and still aren’t seeing the changes. They may need to perform and cache clearing of their own!

Luckily, this last option is rarely needed.

6 Web Design Trends that Will Make Your Website Pop in 2014

web-designCan you believe 2013 is more than halfway over? Next year is just around the corner, and if you’re looking to meet the future with a website that says “hip and savvy,” you’ll definitely be interested in these five web trends. Embrace all of them or none and be a design rebel!

Flat Design
We’ve already written a whole post on flat design here  but this is definitely the hottest and most-hyped trend in web design. The whole idea is about embracing the 2D screen and shedding the drop-shadows and heavy textures that try to make websites look more three-dimensional. Read more about it here!

Mix-and-Match Typography
Ok, this one is tricky because many websites try, and only some succeed in successfully mixing and matching several fonts. In general, you want to stick with one font in each larger typographical category (i.e. one serif with one sans-serif, or one serif with one script, or one script with one serif and one sans-serif). Here’s a good example of three font styles mixed beautifully on the Brooklyn Soap Company site:

brooklyn-soap

Parallax Scrolling
This one is harder to explain that to just see. Check it out here or here  See how the background actually becomes and interactive part of the content when you scroll? It even helps tell a story! Coooooool.

Single Page
Instead of putting all your content on different pages, many websites these days are opting to put all their content on one page that users scroll through. This trend is often used in conjunction with parallax scrolling, but not always!

Full-width Background Images
Often displayed with text over them, full-width photo backgrounds can give your site a unique look without much work. And it’s not just for photographers! Check out the Brooklyn Soap Company again or the Paper Mill in Edinburgh.

Responsive Design
Not everyone has jumped on the responsive design train yet, and that’s okay. We’ve actually got a post that helps break down when you might want to go with a separate mobile site instead. That said, responsive design is really hot right now, and it can be just as easy (and often easier) to develop than a separate mobile site!

Intro to BuddyPress and 7 Extensions to Beef It Up

buddypressDid you know you can turn your WordPress website in a full-fledged social network? It can be private or public, large or small, and you can build tons of different functionalities into it!

The first thing you’ll need is the BuddyPress plugin. WordPress already allows users to login to your website (if you enable that setting – it’s in Settings > General), but when you add BuddyPress, users can also create their own profile, private message other users, and create groups.

That’s only the beginning, through! Here are some great extensions to BuddyPress that really boost its functionality. Mix and match them to create your own unique network!

bbPress
Want to build forum functionality into your website? This plugin makes it easy to turn your website (or just a portion of your website) into clean, user-friendly forums. bbPress also works as a standalone forum plugin, but using it with BuddyPress enables more complex user interaction, like messaging and groups.

Membership
If you’re looking to have something a little more exclusive, or even premium, the free Membership plugin from WPMU is right up your alley. The free version comes with two levels of membership, so you can restrict access to all or part of your site. It’s also fully integrated with BuddyPress and bbPress, so when someone creates a membership profile, they are automatically registered with your social network, too. (PS – this plugin is a great way to limit some parts of your site whether or not you’re using BuddyPress!)

Welcome Pack for BuddyPress
BuddyPress is missing a major component – welcome emails for your new users! This plugin adds the ability to send your new friends a message, as well as invitations to join.

BuddyPress Activity Privacy
Give your network the privacy they deserve with this plugin which will let them decide if a particular post is for everyone, logged in users, friends only, admins only, or just for themselves.

Chat
Another fantastic plugin from the great developers over at WPMU, this one adds live chat functionality to your website. When integrated with BuddyPress, your users can talk to each other directly over your site! You can also let people sign in with Facebook or Twitter to join in the chats.

BuddyPress Activity Plus
BuddyPress doesn’t come bundled with the ability for users to share links, images, or video, but this plugin makes it easy by just adding three buttons to your users’ activity streams. Now they can share YouTube videos, upload images, and share links to all their favorite sites.

Last but DEFINITELY not least…

W3 Total Cache
This one might not have anything to do with BuddyPress integration, but it’s likely that after installing all those plugins, you’re gonna notice a lag on your site. Speed it back up with this plugin that helps your site cache offline versions so it loads WAY faster!

BuddyPress is an amazing resource to create personalized social networks. Check it out!

8 Essential Principles of Web (and Every Other Kind of) Design

Monday we brought you a summary of flat design and presented many pros and a few cons of this approach to web design. We also talked briefly about skeuomorphic design, which uses more 3D elements to convey a more realistic sense of depth on a 2D screen.

These are only two of many, many styles in web design. To better understand any design, whether it be for web, print, or just art for art’s sake, we have to go back to the fundamentals.

Hierarchy
Your various pieces of content have different purposes and levels of importance, and your designs should reflect that. But it’s more complicated that just listing your most recent posts at the top since you’ll also have modules like search fields, logos, and call to actions to work in.

So how do you establish heirarchy? By using any of the below elements to help you make the most critical parts of your web design pop!

Direction
When viewing a website, most people in the Western hemisphere tend to naturally move their eyes from left to right and top to bottom – just like we read. You can either use this tendency to your advantage by arranging your content from left to right and top to bottom, or you can buck the trend and lead the eye in a different pattern by using strong elements that divert the natural pattern.

Below, you can see that Sony is using a typical web layout to emphasize important elements along the natural path of the eye.

sony

37 Signals, on the other hand, starts your eye in the center, then down and across, then back up to less crucial elements in a layout that still works because it effectively leads your eye through the design.

37-signals

Color
There’s a million different ways you can use color on your website, but the basic principle is to use the most saturated, brightest colors to draw the eye to your most important elements. Beyond that, you want to find colors that complement each other and don’t overwhelm the eye, which can be done with color tools like Kuler.

Contrast
Hand-in-hand with color is contrast, which is basically the difference in brightness, saturation, and hue of adjacent elements. For text, you want a high-contrast between the text color and background – like black text on a white background. Less important elements might be lower contrast, like a light green search field on a darker green background – still visible, but it won’t draw too much attention.

Spacing
Spacing can make a design beautiful or illegible. White space (whether it’s literally white or not) is the empty space around an element, and in general, the more white space around a particular item, the more important it seems. When trying to pack a lot of information on one page or above the fold, white space is often sacrificed, leaving the design looking cluttered and visually confusing. Consider your spacing carefully!

Similarity
This is usually an easy one for web designers who’ve taken the time to make even a rudimentary branding plan. Some elements of similarity will be universal across the site – like rounded corners or drop shadows, while other similarities, like a specific color or shape used in just a few places, can denote that these places contain similar content or functionality.

Dominance
Usually relating to size, dominance is another way to establish your hierarchy. Larger elements are obviously the most prominent, but the most colorful or bold (as in text) will also draw attention.

Texture
A textured background can add depth and character to your site, while a textured element like a button can be visually appealing in comparison to a flat background. Use textures sparingly, though, as too much texture can be overwhelming.

Honestly, web hierarchy could have another post all it’s own… so I guess we’ll go get to work on that!

What Is This Flat Design Trend Everyone’s Talking About?

Design trends come and go, but flat design has really taken the digital world by storm. It’s suddenly everywhere!

It makes sense – flat design is all about embracing the 2D screen to make the most of that canvas. Let’s look at a very popular current example – Microsoft’s Windows 8.

windows

Windows has captured some of the most important qualities of flat design: minimalist interface, solid blocks of saturated color, creative typography, strong lines, no shadows, and few or no gradients (besides the user-set background). Websites with a flat design look modern and bright, plus from a development side, they’re much easier to create than designs that rely on more background images and embellishments.

Hand in hand with the simple “look” of flat design is a whole philosophy of user interfaces. Namely, they should be hierarchically structured (the most important content is front and center) and the overall site navigation is as simple as possible.

Let’s look at what flat design isn’t, too. Contrasting the solid blocks of color in flat designs, skeuomorphic design is a more realistic approach to websites. This method employs bevels and shadows to create a more 3D look – especially on interactive elements like buttons. Here’s a good example of skeuomorphic design versus flat design from Apple:

ios6-7

On the left we have the current iOS 6 home screen, and on the right is a proposed version of the upcoming iOS 7 home screen. The icons on the current version have clearly visible bevels, shadows, and gradients to imply a 3D button.

By cropping out these extra 3D details, iOS 7 presents an interface that looks simpler and cleaner. Flat websites also tend to have faster loading times. Consider this: for those 3D effects, textures, and gradients, a designer has to use a background image. In flat design, a square can be filled in with color just through code, which is much faster for your browser to process.

As a last plus for flat design, it’s much more adaptable to mobile, since blocks of color can be easily re-proportioned to any size on a screen. Images are much harder to scale down effectively.

All this said, flat design is not necessarily better than skeuomorphic design. It largely depends on your audience. After all, the most important thing is that your viewers can easily navigate your interface and recognize a button as a button. Since gradients and shadows are common indicators of interactive elements (like buttons), a good flat designer has to compensate for that well-known call-to-action queue with an intuitive interface.

If you’ve got a simple, relatively small content driven website, though, you might consider jumping on the flat design trend!

6 Email Etiquette Guidelines to Improve Your Correspondance

email-marketing-smaller

We use it more than the telephone, we’re more addicted to it than Twitter, and it can be more frustrating than autoplay music on a website. Email truly is one of the most revolutionary forms of communication in history, but it seems like we’re still pinning down the etiquette of this correspondence medium.

Emails often fall victim to a strange problem – we write them so fast in the name of efficiency that we don’t get our point across. This necessitates another explanatory email, and the motive of efficiency is negated.

Allow us to propose a new email philosophy: it might, in fact, be more efficient to take more time with our emails (at least a little more) to ensure that we really communicating. Here are six guidelines that will help you get the most out of your emails without sacrificing too much time.

Lead with the actionable item.
Email users often just read the subject line of an email before they decide how to file it, so if you bury your call to action in the very last sentence, it may not get addressed right away.

When in doubt, use proper grammar.
Punctuation and capitalization do make sentences easier to read and comprehend, but you don’t need to be a grammar Nazi. If you choose not to adhere to the strict rules of the English language, make sure your words and abbreviations are completely comprehendible to your reader. If there’s any question, go ahead and write it out properly. Miscommunication is less efficient than taking the extra time to type acronyms out and add commas.

Use “Reply All” sparingly.
Ever been annoyed that you got attached to an email thread that everyone is unnecessarily Replying All to? Don’t be guilty of doing the same. Consider if everyone needs to be CC’d on your reply before you press send.

Never ever ever send an email with (no subject).
Your email’s subject is like a newspaper headline – it’s your key to making your recipient think this is important or even worth reading. A (no subject) email is basically the same as saying “this doesn’t matter.”

Don’t go overboard with your signature.
We’ve got a whole post about this! Email signatures are really fantastic for getting your contact information out there, but refrain from loading it up with 2 images, 3 phone numbers, and 8 social media buttons. It makes your emails heavy (data-wise), and the chances are slim that your signature will look clean in all email clients.

But do include a signature!
Your email signature should be much like your business card – brief and relevant. Really pare it down, and consider the avenues through which you want people to contact you. Try to limit your email signature to three ways of contact (i.e. phone, email, and Facebook).

The most important component of your email is your message, so our overall point is to make sure that your primary message is front and center in your email.

Four Things You May Not Know You Can Do With Google Analytics

Google Analytics is some pretty powerful (and thankfully, free) software that can provide you with amazing insight into your website and your audience. When you know more about how people navigate your site, and even how they get there in the first place, you have the information you need to substantially increase your traffic.

Despite Analytics being a free tool, most website owners never bother to install it, and of those that do, many of them never even glance at their dashboard to find the hidden jewels! So let’s break it down for you. Here are the top four more useful things you can glean from your Analytics.

Determine your organic search keywords
If you’ve been crafting an SEO strategy, you know that your “keywords” are the specific search terms that you are targeting – which is to say that you’d like your content to show up when someone searches those keywords. Analytics can offer some insight into what people are actually searching to reach your website, which can really help you determine what keywords you’d like to target in your strategy.

keywords

Track your current traffic
This feature is especially useful if you’ve just made a big announcement or are offering a special deal! You can see how many people are on your site, what pages they are browsing, how long they’re staying on the site, and even how they are getting to your site.

real-time

Find your Exit Pages
An “Exit Page” is the last page a user visits before they navigate away from a site. This can be really helpful for discovering which pages are turning your viewers off. It’s worth looking into those pages to see if you can make them more engaging so people don’t leave!

exit-pages

Discover who’s on mobile
Ever wanted to know how much of your traffic is from users on mobile devices? Analytics has a page for that. The numbers are probably higher than you might think, which is why we recommend mobile compatibility for all websites.

mobile

Actually, Analytics will go even deeper and tell you what kind of mobile device your users are on.

mobile-2

This is only the tip of the iceberg in terms of what data Google Analytics collects and the applications for that data. We’re happy to help if you want help to install Analytics or to dive into the meaningful information to make effective action.

Learning the WordPress Lingo

wordpress-logoWe’ve brought you design terminology and web development terminology, but WordPress has a lot of terms particular to their platform. If you’re just getting started with WordPress, knowing the lingo can really help you create the website you want. Here goes!

Theme
Wordpress comes with two built in themes (Twenty Eleven and Twenty Twelve), but there are hundreds, if not thousands available. More than just “skins” for a static interface, these themes can fundamentally change the navigation, functionality, and page layout of your website, as well as the look. There are tons of free themes, but there are also premium themes. In general, premium themes are not “better” than free themes, though they do tend to include more special features like carousels or responsive design.

Plugin
In addition to all the awesome customization that themes can offer, the WordPress plugin library can further tweak your website’s functionality. A plugin is an add-on, and there are thousands of them that will add different features to your site. For instance, the Ajax Event Calendar will add an editable calendar, the SEO by Yoast plugin will add search engine optimization capabilities, and the Disqus plugin will replace the default WordPress comments with a prettier, more customizable comments feature. Basically, whatever you want – there’s a plugin for that.

The Loop
In order to display your website, WordPress “calls” your content through what they call “The Loop.” Let’s say you have a blog, and the homepage shows all your latest blogposts. The Loop is a block of code that retrieves information about each blogpost and shows the title, content, and meta data about that post, then loops back and retrieves the information for the next post. The Loop can be highly customized to show any information about a particular post you want!

Post Type
For most themes, there are only two post types: posts and pages. The difference between posts and pages can be a confusing distinction for WordPress beginners. Posts are intended to be used for a blog. New posts will automatically be added to The Loop and displayed on your blogpost homepage. Pages, on the other hand, are intended to house static content, like an About or Contact page.

Sidebar
Most themes (including ours) has a sidebar. Most often, the sidebar is the same on every page and displays some or all of the following features: recent posts, a search field, archives, comments, photos, or anything else you want to display on every page!

Widgets
Widgets are drag-and-drop functions that can be added to widgetable areas (most often the sidebar). In the image below, you can see various widgets which can be dropped into the sidebar. There are thousands of widgets available for download in the plugins area.

widgets

Dashboard
This is the term used for the WordPress admin area. From the Dashboard, you can add new posts or pages, change settings, and even see analytics about your traffic!

dashboard

What to Do When You Think Your WordPress Site Has Been Hacked

WordPress is popular for good reason: it’s user-friendly, reliable, well-built, and generally secure. But nothing’s perfect. WordPress’s popularity means its users are also tempting targets for hackers who are looking to infect a large number of websites.

One of the most treacherous things about being hacked is that you probably won’t know. In order to use your site for their purposes under-the-radar, hackers may intentionally leave your site up and running normally after they’ve installed their backdoor.

There are, of course, clues. A friend of mine recently discovered her site was hacked after her Google search results started showing ads for Viagra in the description. She sells jewelry, not pills, and was understandably concerned. After running her site through Sucuri’s security scanner, I was able to confirm that she had indeed been hacked.

If you’re concerned about your website’s security, or even worse, you’ve been blacklisted by browsers…

blacklisted

… that scan will at least let you know if you’re in danger, but it won’t fix it.

So what can you do? If you have a backup from before you noticed the issues, you might be all set. Restore the older version, repost any new content (we recommend doing it by hand instead of a WordPress export to be sure you’re not carrying the malicious code with you), and rescan your site to be sure the security issues are resolved.

If you don’t have a backup service already installed, we cannot recommend enough getting one ASAP! There are lots of great premium services, but UpdraftPlus Backup will backup both your database and files and store the files in your Dropbox, FTP, or Amazon S3 account for free. Check out this post for more information on backing up your content.

If you’re already hacked, but have no backup, don’t despair. All is not lost.

Make sure you’re updated to the latest version of WordPress. The developers over at WordPress stay on top of the latest malware and build security right into the framework. Staying up-to-date will also help the scanner detect suspicious code and prevent future attacks.

Then create a backup of your infected site because a malware site is still easier to fix than a deleted one.

Install Wordfence. Not only will this plugin help block hacking attempts, but it will also scan your site for anything out-of-place, and let you fix it with the click of a button. Perform the scan and fix any problems that it catches, then run your site through Sucuri again to see if you’re clean.

If not, your next line of defense is trial and error. Re-download and install all your plugins, rescanning with Sucuri along the way to try to narrow down where the problem is. Switch your theme to a core WordPress theme, delete yours, and rescan.

As a last resort (before contacting a professional), try exporting your WordPress posts via the WordPress exporter, backing up your wp-content/uploads folder, deleting the entire site, and reimporting your posts to a clean version of WordPress.

Good luck!

How to Make Your Business’s Website Reflect Your Business

If you’ve ever taken your business to a branding consultant, you know that your business has a personality.

It might be professional or casual, modern or classic. Whatever the personality, a good branding manager will choose it carefully and make sure any materials put forth by that business are in sync with that tone. Really well-done branding will promote credibility and customer loyalty, so it can be well worth the time to get it right.

Ideally, your business’s website is an extension of your business – it’s tone matches your tone. But how do you fit a website into your branding strategy?

1. Think of your website as an employee. Since your website should work for you, it’s not too far off! If your website were a person you could hire, would they be smart or funny? Warm or serious? Think of the key qualities you would seek in an employee to solidify what the most important aspects of your website’s personality should be.

2. Look to your logo, if you have one. Does your business’s logo have particular colors or fonts? Rounded corners or strong lines? What about any 3D elements like a drop shadow or bevel effect? All these design qualities can be included in your website to help your cohesive branding. If you don’t have a logo, well you’re freer to take your website in any direction!

3. Prioritize the most important information. Really think about your individual website as a vehicle for your individual business. What are your site visitors looking for? Make it easy for them to find.

4. Break tradition. Just because some websites have an About page doesn’t mean you have to. Or maybe you want to make the About page the first page on the site. Look around at other websites to see what you like or don’t, but think outside the box about what you want people to do on your site.

5. Make your calls to action prominent. Ultimately, your goal isn’t to get customers to marvel at your site design, but to contact you or buy your product. Make sure the actionable items are obvious, but also pay special attention that they integrate into the design well. A call to action that overtakes the design can annoy rather than intrigue.

6. Tweak the copy. Your site’s copy should emphasize your chosen personality while still providing all the valuable information your visitors need. We have a whole post about writing great site copy here!

7. Make sure it works. This one seems obvious, but the best design in the world can cover for flaws like broken links or clumsy navigation.