Category Archives: Development

Which Blogging Platform Should I Use?

why-wordpressGot something to write about? Awesome! The Internet has made publishing and sharing your ideas easier than ever, but the sheer number of options for how to set up your blog can leave you with option paralysis.

So, we’ll take some of the guesswork out of it for you with this list of blog platforms, and who they work for. Of course, we have to start with our old favorite…

WordPress
…which itself has two distant options: WordPress.com and WordPress.org. Here’s the short version: WordPress.com blogs and WordPress.org blogs function on the same content management system or CMS. The CMS is the “admin” part of your website, and in WordPress it looks like this:

Screen Shot 2013-08-21 at 12.29.17 AM

This CMS can be installed on any server space to create a WordPress.org site. The software itself is free, but you will need to rent hosting space, which can usually be acquired for very reasonable rates.

WordPress.com offers websites that are actually hosted by WordPress, so they are completely free to the users. The downside to a WordPress.com site as opposed to .org is that you can’t customize your theme or add plugins – two of the things that make WordPress so dang cool. Both versions of WordPress can, however, be correlated with a primary domain (i.e. yourdomain.com) but the cost of the domain is not included.

That said, WordPress.com does have lots of highly functional and beautiful themes, so if you find one that exactly meets your needs, you can enjoy the ease of the WordPress CMS without paying a cent. If you want a little more customizing power, it doesn’t get any better or user-friendly than WordPress.org sites.

Tumblr
If you’d go the WordPress.com route, Tumblr might be worth giving a shot, too. Like WordPress.com, Tumblr sites are remotely hosted and totally free. While there are lots of great premium themes, there is also a great library of free themes, so a Tumblr site can be completely free too. The user-interface is dead simple and there’s a built in social network. Basically, Tumblr is awesome for a single thread, regularly updated blog.

That said, Tumblr isn’t great for a multi-page website or a categorized, filterable blog. Consider if you want your blog to be more of a searchable, in-depth website or a stream of consciousness. If it’s the latter, Tumblr could be perfect, especially if you have great photos.

Now if you’re looking for something more text based, you might want to try to get in on…

Medium
This one isn’t actually open to the public yet. So, bummer. But Medium promises something interesting: a blogging platform with social media integration that shares the love between everyday bloggers and once-in-a-blue-moon bloggers, just based on what you have to say. That’s totally awesome and perfect for writers who want their words to shine.

Even though it’s not fully open yet, the beta wait time is short so the sooner you sign up, the sooner you’re in!

Blogger
Oh Blogger, you old so-and-so. I remember the days we… wait. No. Blogger was good to us for a long time – their easy interface made us feel right at home in Internet publishing – but the Internet has moved on. Google hasn’t poured many resources into the Blogger platform and will probably retire it in a few years, if not sooner. Like they did with Reader. And iGoogle, Wave, Buzz, Desktop, Picnik . I guess my point is don’t start with Blogger now. And if you’re already there, start thinking about moving.

Bonus: Svbtle
Ok, another bummer – this one isn’t open yet either. And worse still, there’s nowhere to even sign up for the beta. All the same, though, doesn’t it look so pretty?

Web Related Job Titles and What They Mean

Understanding the nuances of a particular job title can be confusing in any industry, but with a relatively new field like Internet services, the terms seem to run together even more than usual!

A common misconception for people outside the industry is to believe that any web developer can also design your site or manage your SEO strategy. It’s a wider field than many realize, and most individuals only specialize in a few areas. Whether you’re looking to hire someone, or you’re just curious, you’ll find these common title definitions helpful!

Let us start with the foundational role of the web developer, which can really be split into two categories: back end developers and front end developers.

Back End Developer
This is your code genius – the one who can look at a page of what looks like plaintext gibberish to you and diagnose why your API isn’t functioning exactly right. Back end developers work with servers, applications, and databases to ensure that website is able to pull information from the host server and distribute it to the users all over the world. Their languages include Python, Ruby, PHP, ASP and many many more, which is why back end developers tend to have a specialty within their specialty.

Back end developers construct the functionality of the Internet, basically. So it’s good they’re around, right?

Front End Developer
In short, the front end developer is in charge of what you see and experience when you visit a website. They’ll definitely know HTML and CSS, and often a few extra languages like PHP and javascript. They’re in charge of building your design and some slightly more advanced functionality like contact us forms and cool jQuery effects. A good front end developer will also cross-test your website across major browsers and devices to ensure compatibility.

While building a design, a front end developer also needs to have a head for what makes a fast, user-friendly website, as well a good eye for design in order to render the site beautifully. Not all front end developers are also original designers, though, so that’s where there is a distinction for the role of the…

Web Designer
Some web designers are also developers, but other designers will create a layered file (in Photoshop, usually) of the site design and pass it on to a front end developer to “carve” in HTML and CSS. Even if they don’t code, though, a good web designer needs to know at least a few basics about what functionality is possible, as well as the best web practices for design.

Web Marketer
This position rarely involves any code at all, but rather a thorough knowledge of social media or SEO (or both). These are the folks who can set up your pay-per-click ads, help you develop a social strategy, and track your success with Google Analytics.

Luckily for us at LunaWeb (warning: self-promotion ahead!), our team consists of a variety of web developers, designers, and marketers who can work together to provide a total solution.

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.

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!

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!

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!

Typography Terminology: What Makes a Font?

When it comes to your business’s website, a beautiful design is really an accessory of vehicle to get your message across, a message that is usually contained in words. Those words are inextricably linked with the alphabet, which is for the purposes of the Internet, linked to typography.

Different fonts have different personalities. Some go together, and some clash terribly. In a previous post focused on helping readers to choose fonts for their web design, we discussed some of the overall aesthetic principles that should guide font choice. For this article, we’d like to look more closely at the actual characters themselves and learn some type terminology.

Glyph - the shape that represents a letter in a typeface. Examples incude ‘G’, ‘#’, ‘i’, ‘?’, and ’8′.

Letterfit – the way in which characters in a font fit together to create text based on the width of the glyphs and the kerning.

Kerning – The horizontal space between two letters. A well-designed font will contain specific “kerning pairs” that set the space between particular glyphs. For instance, the pair “WA” (the letters actually overlap horizontally) has a tighter kerning setting than ‘WW” (the letters are close but do not overlap horizontally).

Monospaced – a font in which all the characters are the same width and there are no kerning pairs (meaning the width between each character is also the same) is “monospaced.”

X-Height – the height of the lowercase ‘x’ in a particular font sets the “x-height” which is used to determine the type size. The x-height of all of these fonts is the same, but see how the relation of the ‘x’ to the other letters can make the overall typeface seem larger or smaller.

x-height

Aperature - partially enclosed negative space in a glyph, such as on the top and bottom of the letter ‘s’, the lower part of ‘e’, and the top of a double-story lowercase ‘a’. In a great font, the size and shape of these apertures are carefully considered to provide balance to the letters.

Eye - the (usually) enclosed circle at the top of a lowercase ‘e’.

Ascender – any part of a lowercase letter that extends above the x-height, as in the letter ‘d’, ‘t’, or ‘f’.

Descender – any part of a lowercase letter that extends below the baseline, as in ‘j’, ‘g’, or ‘y’.

Knowing the specific names for certain parts or features of glyphs will help you to not in recognizing various fonts when they are used, but also in matching fonts by similarities. Here’s a great graphic from Font Shop that shows even more glyph characteristics!

typography

Do’s and Don’ts for Restaurant, Bar, and Cafe Websites

restaurant

The food service industry has different needs when it comes to a website. They need a menu interface and maybe review integration, but a lot of restaurants get it all wrong when it comes to websites. That’s why we’ve put together this list to help restaurants, bars, and cafe bring their websites out of 2002 and make a splash.

DO post your menu with prices.
The number one thing people want to know when they go to your website is what you serve and how much it costs. Even if your menu is seasonal and constantly changing, provide a sample menu so people know what type of food to expect and how much they can expect to pay for it. If your website only contains literally one thing, let it be a menu.

DON’T link to your PDF menu.
Forcing a user to download your 80 MB menu is not the same as having it available on your website. Save the PDF as an JPG so you can embed it right into the page, or just copy paste the text.

DO put your address and phone number on every page.
The header or footer is a great place for your address and phone number, and while you’re at it, your hours of operation would be good to have on every page, too. People aren’t on your website for an experience, they are there for information. So give it to them!

DON’T auto-play music.
This could be a whole post in an of itself, but let us be totally and completely clear: auto-playing music on your website is NEVER a good idea. While many websites are guilty of this web sin, there’s no bigger offender than the restaurant industry. No matter how much you think that a recording of a mariachi band will set the scene for your Mexican restaurant’s website, what it will actually do is be intrusive. Your visitors may be listening to their own music, or worse still, be in a quiet place where your website will become a larger disturbance. Just. Don’t. Do. It.

DO be mobile-compatible.
As a restaurant, you’re definitely going to get mobile traffic. Whether you go with a responsive design or a separate mobile site, make sure your menus, location, and phone number are prominent for mobile users so they can find your most important information quickly.

DON’T rely on flash.
You’ve seen it before. The website with a smooth photo montage introduction that slides away to reveal an elaborate video-infused website. Here’s a good example (or should we say terrible example), and it even has music to boot. If you can’t highlight any of the text on the page, that website is in flash. And guess what? Since you can’t access any of that text, neither can search engines. That means you’re not coming up in searches as often as you should be, so people aren’t finding your restaurant. Last but not least, flash is not universally mobile compatible, so you’re losing customers on smartphones and tablets, too.

DO post photos of the food.
Note: only if you can find someone who knows how to do great food photography. If so, photos of menu items can go a long way to whetting potential customers’ appetites. Bad food photos, on the other hand, will only backfire. If the photos don’t look enough to eat themselves, leave them off.

DON’T use Papyrus.
For some reason restaurant websites just love Papyrus. This font has been done. It’s been done again. And it’s over.

DO integrate good reviews.
A block of copy that says “We have friendly service and great food” is nowhere near as powerful to your potential customers as a review that says “Amazing food – great service.” Where ever possible, use real customer reviews to get your point across. Yelp provides API integration so you can display snippets of reviews, but copy-paste works too! Just keep the integrity of the original review, and if you are copy-pasting, ask the writer for permission to reproduce the review.

DON’T forget to include your specials.
For some unbeknownst reason, tons of restaurant websites forget to include happy hour specials, lunch deals, and special events nights like trivia or karaoke. This is prime homepage material, folks!

We hope this is helpful, and that your restaurant, bar, or cafe website will be a hit!

Stop Losing Customers on Your Slow WordPress Site!

stopwatch

Is your site slow to load? Afraid it’s affecting your bounce rate? Well it is, but we’ve got even worse news: if your site loads slowly, your bounce rate is probably much higher than you know. If a visitor clicks away before your Google Analytics script has loaded, that visitor isn’t even counted in your bounce rate.

Scary stuff, right? Especially if your bounce rate is already higher than you’d like.

In case you don’t know, your bounce rate is the percentage of visitors that only hit one page before exiting your site, and a lower bounce rate is always better. The lower the bounce rate percentage, the more people are enjoying your content, subscribing to your newsletters, and buying your products. But one of the major factors driving up bounce rates for many websites is a slow load time.

Another huge downside of having a slow load time is that it affects your Google search ranking negatively, so it’s definitely worth your while to try some of the methods below to get your site up to snuff!

On WordPress, slow load times are a particular problem because of how people tend to overload their sites with heavy content and plugins. Fear not though, we’ve got the tools and tips to help you!

Pingdom Speed Test
Don’t know how fast your site loads? Well you can’t fix a problem if you don’t know how bad it is! Plug your URL into this speed test tool to see how you measure up and what files are slowing you down.

Remove Extra Plugins
That includes Hello Dolly (unless you use it… but does anyone?). Try to pare your plugins down as much as possible because every extra plugin means more files for the browser to download. Delete the inactive ones too for good measure.

Empty Your Trash
Get rid of your spam comments by going to Comments > Empty Spam. Empty the Trash by going to Posts > Trash > Empty Trash and also Posts > Trash > Empty Trash. And especially delete old post revisions. The easiest way is with this plugin (that you can delete when you’re done), Better Delete Revision.

Optimize Your Images
If you’re uploading 5MB photos to your website – quit! Edit your images to be as small as possible (and still look great on your website!). If you don’t have Photoshop, use this wonderful online editor, Pixlr.

A Caching Plugin
“But you just said to cut down on plugins!” you exclaim. We know, but this is one worth having. WP Super Cache and W3 Total Cache are the leaders in the field. Both are great, though WP Super Cache is a little less overwhelming for beginners.

Ask for Help from Your Hosting Provider
It’s a little known fact, but your hosting provider might be able to move you to a less crowded shared server or increase your bandwidth. All you have to do is ask (or insist, depending on your customer service representative).

Then re-test your site to see if you’re faster! If not, ask your hosting provider what you can do to speed up your site.