Follow Us

© 2017 Pixel Forge

How to Optimize Your Facebook Business Page

How to Optimize Your Facebook Page

Maximize Your Facebook Business Marketing

Now that you’ve got the basics of how to setup a Facebook Business Page in place, it’s time to think about ways to optimize your Page to maximize engagement and meet your Facebook marketing goals.

Add a call to action

There are hundreds of reasons why people visit your page, and you may not be able to provide them with all the information they need right on your Page. But you can provide them with a way to get it by setting up a call-to-action (CTA) button.

Facebook’s built-in CTA button makes it virtually frictionless to give the consumer what they’re looking for, including allowing them to engage with your business in real life.

By default, Facebook adds a Send Message button, encouraging visitors to contact you through Facebook Messenger. But you can change this to allow visitors to learn more about your business, shop, download your app, or book an appointment.

To customize your CTA, hover your mouse over the Send Message button on your Facebook Page, then select Edit Button. Choose the type of button you want, then select the specific message to appear on the button. When you’re happy with your choice, click Next.

Call to Action

Depending on the button you chose, you may be asked to select some additional options. When you’re ready, click Finish and your call-to-action button will go live.

Add a pinned post

Is there important information you want all visitors to your Page to see? A promotion you don’t want them to miss? A top-performing piece of content you want to show off? Put it in a pinned post.

A pinned post sits at the top of your Facebook Page, just under your cover image, so it’s a great place to put an attention-grabbing item that will draw your visitors in and make them want to stick around.

Start by writing a normal post, or scrolling down your feed to find an existing post you want to pin to the top of your Page. Click the three dots on the top right of the post, then click Pin to Top of Page.

Once you’ve pinned the post, you’ll see a blue thumbtack icon in the top right corner.

Pin Icon

Make the most of tabs

Tabs appear on the left-hand side of your Facebook Page, and include standard options such as the About section and photos. You can take your Page to the next level by adding other tabs and apps that enhance the user experience.

Facebook tab apps, such as TabSite, allow you to build custom tabs so that you can run campaigns and contests, share special offers, and capture leads. For other tab options, check out our list of 32 useful Facebook Page apps for business.

If you are a developer or are working with a developer, and your Page has more than 2,000 fans, you can also create custom tabs from scratch. For more information on this, see the Facebook for Developers guide on Using Page Tabs.

Like other Pages

Since Facebook is, after all, a social network, it’s a good idea to use your Page to build a community for your business rather than viewing it as simply an extension of your online presence. One way to build community is to feature other Pages that are relevant to your business but not competitors.

For example, if you run a shop in a popular shopping area or mall, you could feature other shops in the same area, like an online version of your local business improvement association or chamber of commerce. If you have a virtual business, you could feature other businesses in your industry that could provide additional value for your followers without competing directly with your products.

To feature a Facebook for Business Page in your Likes Pages section, click the more icon (three dots) under the Page’s cover photo, then click Like as Your Page. If you have more than one Facebook Business Page, choose which one you want to use to Like the other business, then click Submit.

Review your settings

Your Facebook Page settings allow you to get into some pretty fine details about who can administer the page, where the page is visible, words banned from the page, and so on. You can also see how fans are interacting with your Page, including who has favorited it, and so much more.

Think of the Settings tab as your behind-the-scenes console for every adjustable parameter available to you. Take a few minutes to go through each setting and make sure that it’s optimized for how you want to manage the Page and how you want your audience to interact with you.

To access your settings, just click Settings at the top right of your Facebook Page.

It’s important to check your settings regularly, as your preferences and requirements may change as your business—and social following—grows.

Learn from Page Insights

The more information you have about your audience, the more content you can create to satisfy their needs. Facebook’s Page Insights makes it easy to gather data about how your fans are interacting with your Page and the content you share.

Insights gives you information about your Page’s overall performance, including data on audience demographics and engagement. You can see metrics on your posts so you can understand how many people you’re reaching. You’ll also see how many comments and reactions are gained from specific posts—data that helps you plan future content.

A key feature of Insights is the ability to see how many people have clicked on your call-to-action button, website, phone number, and address. This data is divided by demographics such as age, gender, country, city, and device, making it easier for you to tailor future content to your audience.

Link to your Facebook Page from other web pages

Backlinks help boost the credibility of your Facebook Business Page and may help improve your search engine ranking.

Simply link to your brand’s Facebook Page wherever you can. Include a link at the bottom of your blog posts and where appropriate on your website. Encourage other companies and bloggers to do the same whenever possible, such as when sharing content or mentioning your business.

Get verified

The coveted verification badge shows visitors to your Facebook Page that you’re legit—so they can be confident they’re dealing directly with your brand and not with an imposter or fan page.

How to Create a Facebook Business Page

How to Create a Facebook Business Page

In 8 Easy Steps

You know by now that you need a Facebook Business Page.

You’ve seen the statistics. You know that Facebook’s more than two billion monthly active users make it an impossible platform for any business to ignore.

The fact is being on Facebook makes it easier for people to discover and interact with your brand online.

So, let’s dive into how to create a Facebook Business Page. Follow these steps and you’ll have your Page up and running by end of day.

How to set up a Facebook Page for your business

Step 1: Sign up

Go to facebook.com/business and click Create a Page from the dropdown in the top right hand corner (Create an Ad is likely the default value). You’ll be greeted with a couple business type options. Select the type of business you’re creating the Facebook Page for. If your business type falls into more than one of the category options, choose the one your customers are most likely to think of when they think about your business.

facebook options

When you click on a business type, a box will open asking for a few further details, like the name of your business, your address, and your Page category. Categories are basically sub-types within the larger business category you’ve already chosen. When you start typing in the category field, you’ll see a list of potential category options to choose from.

Facebook Info

When you’re ready, click Continue. Note that doing so indicates your acceptance of Facebook’s terms and conditions for Business Pages, so you might want to check those out before you proceed.

Step 2. Add Pictures

Next, you’ll upload profile and cover images for your Facebook Page. It’s important to create a good visual first impression, so choose wisely here. Make sure the photos you choose align with your brand and are easily identifiable with your business.

You’ll upload your profile image first. This image accompanies your business name in search results and when you interact with users, and also appears on the top left of your Facebook Page.

If you’re a big brand, using your logo is probably a safe way to go. If you’re a celebrity or public figure, a picture of your face will work like a charm. And if you’re a local business, maybe a well-shot image of your signature offering is what will allow a potential follower or customer to make the connection immediately.

Your profile picture will appear as a square on your Facebook Page, but will be cropped to a circle in ads and posts, so don’t put any critical details in the corners. Once you’ve chosen a great one, click Upload Profile Picture.

Now it’s time to choose your cover image, the most prominent image on your Facebook Business Page. This image should capture the essence of your brand and convey your brand personality. It will display at 820 x 312 pixels on desktop or 640 x 360 pixels on mobile. The image must be at least 400 pixels wide and 150 tall.

Once you’ve selected an appropriate image, click Upload a Cover Photo.

facebook pic

Step 3: Explore your new Page

Ta-da! Your page is alive, albeit it extremely sparse. At this point, you’ll be prompted to take a quick walk-through of a few features. Unless you’re already well aware of how Facebook Business Pages operate, we recommend clicking through the prompts, just so you know where everything is. It only takes a few seconds.

Of course, while the skeleton of the Facebook Page for your business is now in place, you’ve still got some work to do before you share it with your audience.

Step 4: Add a short description

This is your opportunity to tell people about your business. It should be just a couple of sentences (maximum 155 characters), so there’s no need to get too elaborate here. Click Add a Short Description, then just share what your customers need to know as clearly and concisely as possible. You can add a longer description later on.

Describe Your Page

Click Save when you’re done.

Step 5: Create your username

Your username, also called your vanity URL, is how you’ll tell people where to find you on Facebook. Your username can be up to 50 characters long, but don’t use extra characters just because you can. You want it to be easy to type and easy to remember. Your business name or some obvious variation of it is a safe bet.

Click Create a Username for Your Page to set up your vanity URL.

Click Create Username when you’re done. A box will pop up showing you the links people can use to connect with your business on Facebook and Facebook Messenger.

You're All Set

Click OK to continue filling in your Facebook for business Page details.

Step 6: Complete your about section

While you might be tempted to leave the details for later, it’s important to fill out all of the fields in your Facebook Page’s About section right from the start. As Facebook is often the very first place a customer goes to get information about you, having it all there is extremely important. If someone is looking for a business that’s open till 9 and can’t find this information on your Page, they’ll surely keep looking until they find another place that’s more forthcoming.

It’s also a good idea to list information about your Facebook Messenger protocol, such as your customer service reps’ online hours and estimated response time.

To get started, click About in the left-hand menu of your Facebook Page.

From this screen, you can add or edit your specific business details, like your start date, contact information, and other social accounts. Depending on your type of business, you may be able to add specific details like a menu or information about your price range and whether you offer valet parking.

This is also the screen where you can add a longer description of your business. Click Edit Story on the right side of the Page to provide a detailed description of what your business offers customers and why they should Like or Follow your Page. This is a great place to set expectations about how you’ll interact with fans through your Facebook Page for business purposes and to offer a compelling reason for them to engage with you online.

To specify your business location and hours, click Edit Page Info on the top right of the screen.

When you’re finished, click Save Changes.

Step 7. Create your first post

Before you start inviting people to like the Facebook Page for your business, you’ll want to make sure you share some valuable content. You can create some of your own posts, or share relevant content from thought leaders in your industry.

You could also create a more specific type of post, like an event or product offer—just click through the tabs at the top of the status box to bring up all the options.

Make sure that whatever you post offers value for your visitors when they arrive at your Facebook Page, so they’ll be inclined to stick around.

Your Facebook Business Page now represents a robust online presence that will make potential customers and fans feel comfortable interacting with you.

Step 8: Start engaging

Now you’re ready to give your Facebook Business Page a bit of a nudge. Invite family and friends to like the Page. Use your other channels, like your website and Twitter, to promote it. Add “follow us” logos on your promotional materials and/or email signature. If you’re comfortable with it, you can even ask your customers review you on Facebook, too.

7 Ways to Increase Website Security, Without Sacrificing UX

7 Ways to Increase Website Security

Without Sacrificing UX

Did you know that the longest word in the English dictionary is 189,891 letters long?

It is (and you can see a full spelling here). This word is the name for a protein dubbed “Tintin” and would take you more than 3 and a half hours to say out loud. Pretty crazy, right?

But why in the world am I sharing this with you today? Because 189,891 letters is way too long! It could have been reduced to 50, 25, or even 10 letters, but it wasn’t.

Why?

Because people love to complicate things.

And nowhere is this more true than in the realm of online security and user experience. You see, most self-proclaimed gurus will try and overwhelm you with fancy industry jargon and advanced (but entirely unnecessary) security recommendations in order to appear like they know what they’re talking about and sell you on overpriced services.

But the truth of the matter is that increasing the security of your website without sacrificing the user experience is actually pretty simple.

If you implement a few key tactics and adhere to some basic security standards, you can sleep soundly at night knowing that your website is not only easy to use but keeps you, and your users, safe.

With that in mind, here are 7 quick and easy tips to boost your website’s security without destroying the user experience.

1. Use reCaptcha to Verify Form Submissions

Out of all the security recommendations I’m going to make in this guide, this particular recommendation is the only one that will have an appreciable impact on the quality of your users’ experience.

Setting up reCaptcha for your various lead and purchase forms is admittedly, not a user-friendly thing to do.

However, when you consider that this simple tactic will protect you from 90% of the possible spam tactics and form hacking, it’s well worth the 0.02 seconds it will require your users to validate that they are indeed “Not a Robot”.

To set up reCaptcha, simply follow the steps outlined on this page.

2. Limit the Plugins You Install (and Keep Them Updated)

One of the biggest mistakes that most webmasters make is that they download far too many plugins in order to improve the UX of their site.

Like most things in the online space, a good user experience comes down to only a small handful of things such as a clean design, easy navigability, and fast load times.

Adding dozens of unvetted plugins to optimize the minutiae of your UX is a guaranteed way to compromise the integrity of your website and expose your users’ private data to hackers.

Instead, I recommend picking a small handful of plugins that are well reviewed and approved by your CMS or website builder and then stick to those. This will mitigate the chances that your website is (successfully) attacked and will make managing your site significantly easier.

Just be sure to keep them up to date in order to patch potential weaknesses as they arise.

3. Create a Secret WP Login Page

By far the easiest way for a hacker to gain entry to your admin dashboard and wreak havoc on your previously immaculate website is through a brute force attack.

A brute force attack is simply an attack where a hacker will go to your login page and then use an automated software to rapidly guess different number and letter combinations until they crack your username and password.

However, a hacker cannot execute a brute force attack if they don’t know the login URL to your WordPress page.

Most WordPress websites use the traditional /wp-admin/ URL to login to their site meaning that hackers know exactly where to go if they want to brute force their way into your dashboard.

By using a plugin like ManageWP you can change this URL to a custom address like /my-secret-login/ and stop 99% of brute force attacks in their tracks.

4. Invest in an SSL Certificate

I’m baffled at how often I have to repeat this recommendation…

An SSL (or secure socket layer) is a standard security protocol that establishes an encrypted link between a web server and a browser.

This means that the information your customers and audience members submit on your website (such as names, email addresses, and credit card numbers) cannot be intercepted by hackers. This is good for the user experience and great for your site’s security.

The installation of an SSL certificate costs around $60 and many top tier web hosts will provide them free of charge.

5. Upgrade (or Change) Your Web Hosting Provider

The security (or lack thereof) of your website is largely dependent on the quality of the web hosting provider that is hosting your website.

A high quality web host acts as your first layer of defense against hackers and they will provide you with a free SSL certificate, network monitoring, firewalls, anti-malware, and damage recovery programs, just to name a few features.

Do your research and find the web host that is right for you. Regardless of price, most popular web hosts today offer these types of security features and also include one free website migration, meaning that you typically can switch your hosting over to a new provider over the course of afternoon.

6. Use a Separate Platform for Your Checkout Pages

A simple and (relatively) easy to implement tactic for improving your website security is to use a separate platform for your checkout pages.

For example, many marketers will offer a list of products on their website and then send customers to a secure Clickfunnels checkout page to complete their purchase.

This strategy will take nothing away from the user experience but will add another barrier to entry for potential hackers ensuring that you and your customers remain safe and secure.

7. Setup Daily Backups

The worst user experience a webmaster can commit is to allow thousands of fans to lose access to one of their favorite sites overnight.

And this scenario is much more common than you might imagine.

By setting up daily (or at least weekly) website backups you will prevent your data and content from being lost in the event of a security breach and you will ensure that your fans always have a place to go for the latest and greatest in your particular niche.

You can do this manually or ask your web host to backup your website on a recurring basis.

What’s New for Designers

What's New for Designers

New Design Tools and Information

What kind of projects are you working on? It might be the hotter days (with more time at a computer) that have me focused on ways to enhance productivity.

In this month’s roundup of new design tools and information, you’ll find plenty of helpful items that relate to workflow.


UnDraw

UnDraw is a curated collection of SVG images that you can use for free, without attribution. All of the images fall under the MIT license and the site is packed with scalable images for web projects. Embed tiny SVGs or edit the code and make each image your own before adding it to your design. (One of the most fun features? You can browse SVGs by color.)

UnDraw

Placid

Placid allows you to create custom social media share card images via API. Choose a pre-designed preset and automate image creation (and show social users exactly what you want). The tool is free with limited use and there’s special beta pricing for more power users.

Placid

HTML Email

HTML Email is an email design system for Sketch. Download one file and get 10 templates for mobile and desktop emails with plenty of reusable components to make building HTML emails easy. Using the system will help create more consistency in email design, saving you time with a reusable grid, modules, styles and colors.

HTML Email

Gradient Joy

Gradient Joy is a placeholder image generator that puts pretty gradient boxes in image areas. Just add an image size, pick a color (if you like) and pop the simple code in as a placeholder.

Gradient Joy

ColorSpark

ColorSpark is a fun color gradient tool that helps you generate cool color combinations. (And it makes this list as the second gradient tool because they are just so nice) Start with a color you know or click the “generate” button for a random, but well-paired, color combination.

ColorSpark

MapKit JS

MapKit JS allows you to embed Apple Maps on your website and search using location-based tools. The JavaScript API allows for direct embedding of interactive maps; it does require authorization via JSON Web Tokens for initialization and come API calls.

Open Logos

Open Logos is a project to help you find free logos and divots for other open source projects. There are a few rules to make sure that each logo only goes to one project, so make sure to read the instructions to get started and claim a logo.

Scrolling Gradient

Scrolling Gradient is a fun little pen with a background gradient that changes color as the user scrolls down the page. It works by using two gradients that are overlaid to create a nifty scrolling effect.

Sensorama

Sensorama collects samples from all the sensors on your iPhone and sends the data to you via email. It activates with your prompt and the developer is looking for additional help on GitHub. Plus, it is fun for data geeks.

Maze

Maze adds analytics to your design prototypes so that you can think about projects in progress in the same way you would monitor live websites. Create actionable paths and test the results with real users, then analyze results in a live dashboard. And you can do it all without adding code to your design. Maze is free for a single project and also offers paid plans.

Maze

Roller

Roller is a Sketch plugin to help you find and fix inconsistencies in design projects. The creator calls is “spellcheck for Sketch.” The free plugin is easy and pretty effective.

Roller

Free Illustrations

Free Illustrations is a collection of icons and images that you can use for projects. All of the illustrations are vector-based and the collection is updated weekly. (So there’s always something new to play with.) The project is thanks to Lukasz Adam.

Free Illustrations

Tropical Icons

Tropical Icons is a set of 50 free scalable vectors that evoke feelings of summer fun. The set includes icons in outline, outline with color, and color settings. Plus the design make it easy to switch the color palette to match your website colors.

Tropical Icons

150 Vector Icons

150 Vector Icons is a fun set of line icons in 15 different categories. Every style is easy to edit, customize and make your own for pretty much any project. Each icon also comes in color and monochromatic styles in AI, EPS and PNG formats.

150 Vector Icons

API.video

API.video is billed as a way to create your own Netflix using a scalable webservice with an API based on the REST standard. You can host and broadcast videos anywhere in the world. Toll pricing is based on encoding, hosting and streaming needs.

Whimsical

Whimsical is a visual design workspace that can help you mange projects. Create flowcharts or wireframes in a collaborative environment. The tool is adding new elements all the time and has promised a Sticky Notes feature next. The tool is free for up to four diagrams a month, after that the model switches to paid plans.

Whimsical

Sonar

Sonar is now open source. The tool is Facebook’s creation and is designed to debug mobile apps. Plus, you can do it all from a single desktop interface. It is available for us as-is or through a plugin API.

Overflow

Overflow is a collaborative design tool that’s currently in beta. Use it to help create user flow diagrams to help clients or team members better understand projects. (You might not go back to your old method of showing mobile app user patterns.)

Overflow

Tenori-Off

Tenori-Off is a fun little distraction. The smart music sequencer uses some back-end machine learning to match drums to a melody. It might be the most interesting thing you play with all day.

Tenori

DevTube

DevTube might be your new go-to video channel. It’s a lot like YouTube, but all the videos are made for web developers with topics, talk and tutorials that will make your work life better or inspire you to try new things. Sort by type of information, favorite speaker or even channel.

DevTube

Codementor

Codementor is designed to connect developers to programming and freelance jobs. The website is an interface to find someone who can help you solve design problems as well as workplace connector. The site claims to already have 8,000-plus developers on board.

CodeMentor

Alpha

Alpha is a fun and modern sans serif typeface. It includes four styles – medium, regular, light and inline – with a full upper- and lowercase character set.

Alpha

Fivo Sans

Fivo Sans is a neo-grotesque sans serif with a strong stance and high style. It is fairly neutral and with multiple weight and styles, can be used for almost anything. The complete font – including six families – is free to use and packed with characters.

Fivo Sans

Heptal

Heptal is designed as a multipurpose typeface for wide usage. The thick stroke, block style makes an excellent display option. The character set includes letters, numbers and some punctuation, but is otherwise somewhat limited.

Heptal

Leira

Leira is a hand-drawn style typeface with an all uppercase character set. It makes a fun and interesting option for display uses. The font also includes numerals and some basic punctuation.

Leira
3 Handy New Features in Chrome DevTools

3 Handy New Features in Chrome DevTools

The Most Useful New Additions

Chrome DevTools are consistently marching forward and providing us with helpful new features that make our lives as web designers easier.

In this roundup we’ll be checking out three of the handiest recent additions. Let’s jump in!

1. Inspect and Modify CSS Variable Values

If you were using CSS variables in your CSS, up until now when you inspected your code with Chrome DevTools all you would see in the Styles tab would be something like font-size: var(--fontsize), with no indication of what that variable actually represented. To make sense of your code you’d have to find the variable name in the :root section of your CSS, look up the value, remember it, go back to the section of code you were inspecting and try to work with it from there.

Now, DevTools will compute CSS variable in the Styles tab so you can inspect their values inline, as well as see previews of colors. You’ll also be able to make modifications to your CSS variable values. Here’s how it all works.

Note: You’ll need Chrome 67 to try these features. Chromium 67 does not yet have them included.

How to Inspect Values Inline

In the screenshot below you’ll see an example of the new variable inspection functionality. In the Styles tab, look at the color and font-size properties highlighted by the red box. In front of the variable var(--text) you’ll see a small colored square–this is a preview of the color defined by this variable. Below it you’ll see the mouse hovering over var(--fontsize), which makes its computed value appear in a tooltip. This hovering functionality can be used to inspect the value of any type of CSS variable.

Dev Tools Var Color Value Preview

Introducing the Variables Color Palette

The bottom section of the color picker in Chrome DevTools already gave us access to different types of color palettes, such as “Material” colors, or the colors detected as being in use by the current page. When using the color picker on CSS variables an additional palette now becomes available, one that shows you all the colors defined as variables in your style sheet.

To open the color picker, click on the little color preview square in front of a color variable. To access the list of available palettes click the toggle switch located on the right side of the palette section.

Dev Tools Switch Palettes

This will show you the available color palettes, one per line. Here you’ll see a line labeled “CSS Variables”, and if you hover over the colors here you’ll see a tooltip showing you the variables they represent. Select the “CSS Variables” palette by clicking on that line.

Dev Tools Select CSS Variable Palette

Now when you select a different color from this palette, the name of that new variable will be substituted into the code. For example, in the image below the variable name --text has been replaced by --alternative-text after clicking on a different color in the palette.

Dev Tools Switch Color Var

Editing Variable Values

Not only can you inspect and modify CSS variable code for individual styles, you can also do so at the root level.

Select any element, scroll down to the bottom of the Styles, tab and find :root, where all your variables are defined. You can change any variable value here and the changes will be updated across your whole page.

To edit a color value, click the color preview box next to it and use the color picker. To edit other types of values, such as font sizes for example, double-click them and type in your new value.

In the example below you can see we’re using the color picker to adjust the value of the --text variable controlling our text color.

Dev Tools Edit Values

If you’d like to give this new functionality a go, we’ve setup this pen so you can use DevTools to tinker with the background color, text color and font size of a simple page:


2. Pretty Print / Format Minified Code

If you’ve ever tried to debug minified code you know it can be a painful process. Thanks to Chrome / Chromium 66 you won’t need to deal with that issue any longer, as it now has the ability to pretty print / format minified code for better readability.

To use this feature go into the Sources tab, in there go to the Page tab, then select a minified file from the list of loaded files in the left panel. This will display the file’s contents in the center window. At the bottom of this window you’ll see a pair of curly brackets {}, and if you hover over them you’ll see a tooltip that reads “Pretty print”.

Dev Tools Pretty Print

Click this button and your file will be “prettily printed”, and made far more debugging friendly:

Dev Tools Pretty Printed

You can do the same thing for minified CSS files, but instead of the tooltip saying “Pretty print” it will say “Format”.

Dev Tools Format CSS Button

Click the little {} button and your CSS will become nice and readable as well:

Dev Tools Formated CSS

3. Preserve Tweaks Between Reloads

Have you ever been working on some tweaks to a page via DevTools, but then needed to refresh the page and had to lose all the adjustments you’d been testing out?

As of Chrome / Chromium 65 you’ll never have that problem again, thanks to the “Local Overrides” feature. With this feature active, any tweaks you make via DevTools can be automatically saved in a local file on your hard drive, and when you refresh the page that file will be loaded in, thereby preserving your adjustments.

To turn on local overrides go to the Sources tab, and in there to the Overrides tab. If you can’t see the tab, expand the selection by clicking the >> button.

Dev Tools Sources Overrides

The first time you activate local overrides you’ll see a little button labeled + Select folder for overrides. As the name suggests, this will let you specify where your local override files should be saved. Hit that button and select the folder you want to use:

Dev Tools Select Folder for Overrides

Once you select a folder you’ll see a security warning appear at the top of the browser. Go ahead and click Allow to proceed:

Now try making a change to a web page using DevTools, such as changing the text color on a live site for example. Refresh the page and you’ll see your color change will still be present.

If you go back into the Overrides section now you’ll see a newly added file. Assuming the tweak you made was to a text color, it will be a CSS file. This is the file that contains your local overrides, and as long as local overrides are active this file will be loaded instead of the site’s true file. Brilliant!

You can disable local overrides at any time by unchecking the Enable Local Overrides box. You can also delete individual override files from the Overrides tab, or manually through your system’s file manager.

Wrapping Up

There we have them: three great new features from Chrome DevTools that should prove super useful! CSS variables are now easier to work with, minified code can now be made readable, and using DevTools to test tweaks to sites is more powerful.

We’ll look forward to seeing what the Chrome DevTools team has in store for us next!

A Guide to Technology Stacks

A Guide to Technology Stacks

Technologies, Software, and Tools

A technology stack or tech stack for short refers to a set of technologies, software, and tools that are used in the development and deployment of sites, apps, and other digital products.

For example, a classic technology stack is the LAMP stack. The LAMP stack is traditionally used for creating an environment for running PHP applications. The stack is made up of the following technologies: Linux (the environments OS), Apache (the HTTP server), MySQL (the database), and PHP (the server-side programming language).

The infographic below provides you with an exceptional introduction to technology stacks. It covers:

  • Web development stacks

  • Software stacks

  • A glimpse of the large-scale technology stacks of major tech companies like Airbnb and Stack Overflow

Technology Stack Infographic

Technology Stack Infographic
Common WordPress Errors & How to Fix Them

Common WordPress Errors

And How to Fix Them

Get your site back up and running!

WordPress is an incredibly stable Content Management System that many people use (including Pixel Forge!) due to the ease of use and level of customization available. With its widespread use and huge number of developers contributing to it, it’s difficult to guarantee that nothing will ever go wrong. Here are a few common WordPress problems that users encounter and how to fix them.

Before You Begin

Step 1 – Many solutions involve editing, deleting or updating files in your WordPress install. Make sure you have an FTP client you are comfortable using, and a text editor capable of showing syntax highlighting for HTML and PHP.

Step 2 – Determine where to start: Can you see an error message or is the problem more vague?

Theme is missing the style.css stylesheet

This message is caused by the theme you are trying to install having an incorrect file structure, the stylesheet actually being missing, or the theme not being a theme at all.

  • Make sure you have the correct file. If you downloaded your theme from Themeforest, for example, you must unzip that download to find the theme install file

  • Open the file to verify the structure is correct. Theme zips should show a folder inside. Inside that folder, you should see a style.css file.

  • Make sure the file is actually a theme. Is it possible the file is a plugin instead? This is a common mistake with theme-related plugins like Divi, Themify Builder and Visual Composer. To find out, you can try installing it under Plugins → Add New.

  • If all else fails, get in touch with the theme author to get you a working file.

404 Not Found

In most cases, this error is caused by a missing file, or an incorrect URL.

To solve it for post/page links:

  • From the WordPress Admin, go to Settings → Permalinks

  • Choose an option other than Default and click Save to regenerate your permalinks, then try again.

  • Didn’t work? Choose the Default option and try again. If that worked, skip down to .htaccess troubleshooting..

You can avoid 404 errors by periodically re-saving your permalinks, and making sure you never edit the slug of published posts, categories or tags. The Broken Link Checker and Redirection plugins can help if you really need to edit slugs and want to avoid broken link errors.

To solve it for images or other filetypes:

  • Edit the post, menu or widget where the link is set and make sure it is pointing to the right file by re-setting the link.

  • Make sure file names are lower-case with no special characters or spaces to reduce the chance of problems in the browser.

  • Re-upload the file – sometimes the link is fine but the file is really missing!

Error establishing a Database Connection

The most common cause of this error on new setups is an incorrect database path in the wp-config.php, but sometimes it can mean your database server is down.

To solve it:

  • Connect to the site with your FTP client and download a copy of the wp-config.php file and open it up to verify the server name and login/password are correct. You can check these from the hosting control panel. If you make changes, simply rename the original file on the server to something like wp_config.old, then upload your fixed copy.

  • Login to WordPress. If you see a message indicating the database needs repair, follow the prompts to run the repair.

  • If these two steps do not solve it, get in touch with your host or check their server status pages for downtime affecting your website.

Maintenance Mode Message

Updates are a vital part of keeping your WordPress website functional, and sometimes they happen automatically. Whether you initiate an update yourself or are welcomed with a surprise maintenance message in your browser, wait a few minutes before taking action. You might just be trying to view your home page while an update is running on the back-end, in which case this message is totally normal. If the message doesn’t go away, or is keeping you from logging on, something has interrupted the update process, so you’ll need to delete the file yourself.

To solve it:

  • Log into the website via your FTP program or your hosting control panel’s File Manager and locate the .maintenance file in your root folder.

  • Right-click to delete it. Don’t worry, this is totally safe.

Allowed Memory Size Exhausted

You’re installing a plugin, trying to load the customizer or clicking around in your admin panel just to have it time out and tell you you have insufficient memory or that your site memory allocation has been exceeded. This is referring to the amount of memory your database and scripts can use on your server. On most shared (cheap) hosting, the default memory allocated to WordPress is often not enough to handle setups with database-heavy plugins. These can include translation plugins, image management, gallery, link checking or SEO plugins. In many cases, you can increase the memory limit yourself.

You may also see the error worded as “out of memory.”

To solve it:

1. First, try adding the following to your wp-config.php

define( 'WP_MEMORY_LIMIT', '64M' );

This will increase the memory limit to 64MB (you can also set it to 128MB or 256MB if you want).

2. When the first step is not enough, try deactivating all plugins except those that provide critical features to the front-end display of your site. This includes caching plugins. If the situation is improved, see the Check Plugins section of the 5 Step Solution below for more detailed advice on choosing plugins.

3. This may not be enough if your issue is related to script memory. If the problem persists, you will need to increase the PHP limit set in the php.ini.

Fatal Errors

Fatal errors are almost always due to a plugin conflict, the file is damaged, or the file is not compatible with a dependency. In most cases, the function will tell you exactly what the problem is, and in which file. You can interpret fatal errors pretty easily by breaking them down into four parts:

  1. Error type – Google this part when you’re unsure
  2. Function or code issue – helps you find code errors
  3. Path to file where error occurred
  4. Line of code in the file that contains the error

Some common fatal errors are:

Call to Undefined Function

This is caused by a plugin or theme using a function hook but the function not being defined anywhere.

To solve it:

  • Make sure any plugins you have activated do not require a specific theme or other plugin. For example, a WooCommerce Paypal plugin needs WooCommerce to be installed and activated.

  • Check the code of the file indicated if you are comfortable with PHP, and solve the problem there.

  • If all else fails, go through the 5 Step Solution below.

Cannot Redeclare

Similar to the above, except in this case the function is declared more than once instead of not at all. This happens if there are conflicting plugins activated, or if the theme or plugin author did not use a unique function name.

To solve it:

  1. If you are comfortable with the code, follow the error message to find the duplicate function and change the function name to something unique. Make sure to update all hooks that use it.
  2. Not code-savvy? Check plugins.

PARSE ERROR: SYNTAX ERROR

This message means there is a mistake in the code of your theme or plugins that needs to be corrected.

To solve it:

  1. If you’ve just added some custom code to your theme’s functions.php, use your FTP client to download a copy of the file and fix the snippet. The easiest way to find syntax errors is to use an HTML editor with PHP syntax highlighting, but check for common mistakes such as missing quotes or semi-colons. If you’re really unsure, just delete your custom code and re-upload the file without it.
  2. If the error is in a plugin file, skip down to Check plugins.

You can avoid this problem in the future by always testing custom code locally before applying it to a live site, or making a backup of the file you are editing first so it can be easily restored via FTP if something goes wrong. The Solid Code Theme Editor is helpful for showing syntax errors before you hit Save when editing via your WordPress admin.

WARNING: CREATING DEFAULT OBJECT FROM EMPTY VALUE IN CUSTOMIZER.PHP

This error is due to your PHP version being too low for your current WordPress version. Get in touch with your host and make sure your site meets WordPress minimum requirements.

TEMPORARY FIX FOR ERRORS

Often times fatal errors that do not block access to your WordPress admin are just reporting a problem with the code in your theme or an active plugin, and are visible due to DEBUG mode being active on your site.

To solve it:

  1. Connect to the site via your FTP client and download a copy of the wp-config.php file.
  2. See if this line exists:
    define('WP_DEBUG',true);
  3. If so, change it from true to false, then save and upload back to the server to overwrite the existing file.
  4. Make sure your theme and plugins are up to date, and work with the authors to solve the errors, as even hidden errors can cause functionality to fail or the site to load slowly.

Internal Server Error (HTTP 500)

This one is almost always caused by the server configuration. Skip down to the 5 Step Solution to troubleshoot.

The Blank White Screen

Known affectionately as the “white screen of death”, blank browser pages where your website should be are the most frustrating thing to deal with, as they also block access to your admin panel.

The most common cause of this problem is a plugin conflict, either with another plugin, or with your active theme, or it may be hiding a fatal error you just can’t see.

To solve it:

If you right-click and view the source, you may be able to see this error, OR:

  1. Connect to the site via your FTP client and download a copy of the wp-config.php file.
  2. See if this line exists:
    define('WP_DEBUG', false);
  3. If so, change it from false to true. If not, copy and paste the following right above “/* That’s all, stop editing! Happy blogging. */”
  4. Save and upload back to the server to overwrite the existing file.

If any errors are available, this will allow you to see them. Don’t forget to set the value back to false once you solve your problem, or your visitors risk seeing all sorts of normal developer messages and errors, even on a working website!

If this does not help, you probably have a plugin conflict. Continue with the 5 Step Solution:

5 Step Solution

The following five steps solve just about any WordPress problem that is not caused by the server or bad code, or at the very least will help you determine what the problem is. Follow each step until your issue is solved or improved.

STEP 1 – UPDATE!

Having an out of date WordPress install or theme can cause a multitude of problems as files become unsynched or functions stop working because their dependencies have been removed or replaced.

  1. If you can login to your WordPress admin, go to Dashboard → Updates and apply any WordPress updates, Plugin updates, and Theme updates available. If you can’t login, update the files manually using your FTP client.
  2. If you have premium themes or plugins installed, be sure to check with the theme author or marketplace where you bought it to see if an updated file is available, then follow the author’s instructions for updating.

STEP 2 – CHECK PLUGINS

Due to the open-source nature of WordPress, the code quality of plugins varies wildly. This leads to many common WordPress problems.

  1. Connect to the site via your FTP client and navigate to the wp-content folder.
  2. Rename the plugins folder to plugins-old
    • Renaming your folder forces all of your plugins to deactivate so they cannot conflict with one another.
  3. Attempt to access the WordPress admin again

If this solved it, a plugin was probably the culprit. Rename the folder back to plugins and then visit the Plugins page in your WordPress admin. Reactivate your plugins one at a time, reloading your site in a new browser tab after each reactivation until it breaks (or hopefully doesn’t). This should help you narrow down which plugin triggers the problem. Simply repeat these steps again, then delete the offending plugin.

STEP 3 – CHECK YOUR THEME

If your theme author has thoroughly tested your main theme, the problem is not likely inherent to the theme itself, but the theme may have become corrupted, become infected with malware or have a problem with your sever’s configuration that prevents your site from working. To ensure the theme files are sound, try reinstalling the theme and leave any customization or child themes out for now.

STEP 4 – CHECK .HTACCESS

This file controls some aspects of security on your site, and how redirects work, including permalinks in WordPress. Some security plugins will modify this incorrectly or in too strict a manner which causes problems in WordPress. Your host may also enforce specific .htaccess rules that cause problems in WordPress.

  1. Connect to the site using your FTP client and locate the .htaccess file in the root.
  2. Right click and rename the file to something like .htaccess_old and try reloading your site.
  3. If that fixed the issue, log into your site and go to Settings → Permalinks, make sure something other than Default is selected, and click Save to regenerate your permalinks. This will also generate a fresh .htaccess file if you have WordPress Multisite, visit NETWORK ADMIN NETWORK SETUP and verify your wp-config.php and .htaccess are configured as outlined on that page.
  4. If turning on permalinks breaks things again, contact your host to troubleshoot. For best results, be sure to host your site on a host that offers WordPress hosting, and/or uses Unix-based servers.

For detailed .htaccess help, check out these .htaccess tips to speed up and secure WordPress.

STEP 5 – CHECK PHP & CACHING

  1. PHP should be at least 5.6.
  2. Disable eaccelerator for PHP. See this article for help? or ask your host.
  3. Turn off server-side caching. In most cases, it is better to manage caching from WordPress with a plugin designed for WordPress. unless you are on Managed WP hosting. Your host can assist you with disabling server caching such as Varnish, Pagespeed, X-Cache or Cloudflare etc, usually there is a setting in your domain page on your cPanel to turn these off.

Conclusion

Sometimes the solution to a really tough issue in WordPress is to restore a recent backup, but that won’t help if you aren’t maintaining regular backups! In addition to backup options offered by your host, see this guide for keeping your Content Backed Up.

One of the ways to streamline this process is to explore your managed WordPress hosting options. If manage your site yourself, make sure you backup the entire site at least weekly and keep at least 3 previous backups. For sites that are updated often, make sure you backup the database daily and do periodic content exports as a fallback.

One of the ways to streamline this process is to explore your managed WordPress hosting options. If manage your site yourself, make sure you backup the entire site at least weekly and keep at least 3 previous backups. For sites that are updated often, make sure you backup the database daily and do periodic content exports as a fallback.

If all else fails, your problem may be with WordPress itself, or with the data in your database. Start by reinstalling WordPress, and if that fails, you may need to contact your host for further help.

  • If all else fails, get in touch with the theme author to get you a working file.

  • Answer These Questions

    Answer These Questions

    Get the Most Out of Your New Website

    Prepare for a successful website!

    When you’re working with a web design company on your new website, you want to get the most out of your investment. A good website will help you attract more and better leads that are more likely to engage with your business.

    Part of maximizing the success of your website is being prepared with relevant information. This will help us build the most effective marketing platform for you.

    Let’s take a look!


    1. What does your business do?

    To create the best website for your business, a web design company needs to fully understand your business. They can’t produce a website that works for you if they don’t know much about your company. It is important that your web design company has the opportunity to get to know your business.

    This includes the history of your business, the products or services you offer, your employees, competitors, and more. All these questions should help us get a better understanding of your business, how you operate, and your company values.

    When a web design company knows your business, they can start to shape a site that reflects your business best.

    2. Do you have a website?

    It may seem like a silly question, but we need to know if you already have a website built. This is an important part of the process for two reasons.

    The first reason is that your web design company needs to know how much work they need to put into your site. If you don’t have a website, they’ll need to put in more effort to build one for you. For businesses with established sites, they know that they have an existing structure they can modify.

    It is also important to know if your business has a website because if you do, your web design company can ask you about your site. They can ask you what you like and dislike about your site, what you wish was on your site, and how your website drives (or fails to drive) results for your campaign.

    This is an opportunity for us to learn what you like and dislike about websites. It will help us create a site that drives results for your business.

    3. What is your site’s goal?

    Before beginning the project, you should know what you want to achieve with your website. You shouldn’t just build a site “just because.”

    There are numerous goals you can focus on with your website. You can aim to earn more leads and revenue, increase brand awareness, capture emails or social followers, or get more phone calls to your business. It is important that you establish a goal for your website to help your web design company create a better site for your business.

    Your goal impacts the design of your site. If you want to increase more brand awareness, your web design company will focus on building your brand and helping people become familiar with it. On the other hand, if you wanted to earn more leads, your web design company will focus on incorporating elements that encourage people to learn more and ultimately purchase.

    4. Who is your target audience?

    Your target audience plays an important role in how you shape all aspects of your campaign. You want to appeal to them and get them interested in your business. Your website’s design is no different.

    To design a website that drives results, you need to know who is in your target audience. We will ask you about your target audience so they can build a site that works better for your audience. Your audience’s behavior will impact how you structure your site.

    5. How is your company unique?

    Each company across the globe has something unique to offer their customers. There is something that sets them aside from the competition. It may be something small, but there are things that make your business unique compared to your competition.

    This is an important selling factor that we’ll want to incorporate into or emphasize in the design.

    You want to stand out from the competition. Your unique features of your business will help you do that.

    6. Who are your competitors?

    You want to create a website that will help you stand out from the competition. It is important that your web design company knows about your competitors so they can create a website that makes you unique from your competitors.

    You’ll need to think of a short list of competitors that directly impact your business. You can give this list to your web design company so they can check out their sites. This will give them an idea of how your competitors sites look and how they can produce a site that is better.

    7. What features do you want on your site?

    It is important that you incorporate features that will help you achieve your campaign goals.

    You’ll need to think about how you want your site to look. There are numerous features you can add to engage your audience and keep them interested in your site. You need to think about which features you want on your site.

    Some popular features include email sign-up bars, social media icons, incorporation of videos, or color choices. These are all features that have an impact on your audience. It is important that you think about which features are important to your campaign.

    You want to be sure that you are incorporating elements that help you achieve your site’s goal. If your goal is to capture more leads, you’ll want to incorporate an email sign-up bar and social media icons. The features you incorporate on your site should help you build a site that gets your audience to complete the intended action.


    Start building a better website today

    If you want to build the best website for your business, you need to make sure you know the answers to questions that help you construct your ideal website. These questions should help you construct a better site that is more effective for your audience.

    Want to get started today? Contact PixelForge today to begin building a better website!

    WPA3 – Wi-Fi is Getting an Upgrade

    WPA3 Security

    Wi-Fi is Getting an Upgrade

    The WPA3 security standard is formally finished.

    Wi-Fi Alliance, which developed the protocol, has announced that the WPA3 security standard is ready for introduction. The new follow-up to WPA and WPA2 is intended to replace them with a standard that, well, hasn’t been cracked yet. There’s more to say on the topic, but that’s what the announcement boils down to. WPA has been breached enough that it’s now considered generally insecure, and some high-profile attacks like KRACK and the ability to predict the Group Temporal Key have breached WPA2 as well. It’s time for a new, (temporarily) secure standard.

    One of the major features of WPA3 is its resistance to offline dictionary attacks. With WPA2, if you can observe a single password exchange between a person signing on to a network and the router, you can take that data and attempt to brute-force it via an offline dictionary attack. But WPA3 no longer relies on the same Pre-Shared Key (PSK) that WPA2 used. (Note: This discussion only applies to WPA3 Personal, not WPA3 Enterprise, which didn’t rely on the same PSK algorithm in the first place).

    As PCMag reports, the only way to crack into a WPA3 network should be if you’re already connected to it…which largely removes the benefit of hacking it in the first place. The Wi-Fi Alliance also notes that WPA3 includes protections that kick in “even when users choose passwords that fall short of typical complexity recommendations,” which appears to refer to this additional password obfuscation. WPA3 also remains interoperable with WPA2 networks, though this apparently means WPA2 devices can connect to routers using WPA3 without compromising the security of other connected devices. The WPA2 device, presumably, does not gain any benefit from WPA3 security changes or improvements while connected to a WPA3 router.



    Alongside WPA3 in its personal and enterprise flavors, the Wi-Fi Alliance also announced Wi-Fi Certified Easy Connect, which aims to let you add an IoT device (typically one with a limited display, or without a display at all) to a Wi-Fi network using another device with an easier interface. An example would be scanning a product quick response (QR) code with your phone. Then there’s Wi-Fi Enhanced Open, which is intended to provide “improved data protections while maintaining the convenience and use of open networks.” Exactly how much protection will be provided is something we may not know until we see how shipping hardware handles the standard — there’s often a rather significant gap between how these standards are intended to be used and how they’re actually deployed.

    It’s also not clear if we’ll see older devices patched to provide support for WPA3, or if that support will be particularly robust. Each time a new security standard is released, there’s an inevitable period of “well, I’ve got Product A and Product B and they’re both supposed to support this thing… but won’t connect to each other while using it.”

    Firefox Quantum vs. Google Chrome

    Firefox Quantum vs. Google Chrome

    Which browser is faster?

    Firefox Quantum is here.

    Firefox’s new web browser is the most interesting thing to happen in the browsing space in a long time, and, yes, it will let you run all the tabs you want. But there’s one obstacle standing in Firefox’s way to greatness, and that’s Google’s browsing behemoth, Chrome.

    Since its debut in 2008, Chrome has cemented itself as the web browser of choice for anyone who knows better than to use the default — a title that used to belong to Firefox. Over time, thanks to its speed and lack of bloat, Chrome made Firefox irrelevant.

    Quantum aims to turn back the tide, partly by hitting Chrome where it hurts: speed. Firefox claims Quantum loads some popular websites twice as fast.

    Each web browser was tested using default settings with no extensions or add-ons. Neither browser was enabled with an ad blocker or any functionality that didn’t come with the original download. Browsing history, cache, and cookies were cleared beforehand. Each test was performed three times.

    Ares-6 test

    Ares-6 measures how quickly a browser can run new Javascript functions, including a number of mathematical functions. You can read the nitty-gritty details here.

    Better browsers get lower scores.

    Firefox Quantum vs Google Chrome Trial
    Firefox Quantum vs Google Chrome Ares-6

    As you can see, when it comes to the speed of complex Javascript functions, Chrome absolutely destroys Firefox.

    Winner: Google Chrome

    JetStream

    JetStream 1.1 tests a browser’s ability to run advanced web applications. It measures a number of tasks, including 3D cube rotation, integer math, and library parsing. You can see the full list here.

    Better browsers get higher scores.

    Firefox Quantum vs Google Chrome Trial
    Firefox Quantum vs Google Chrome JetStream

    This time, Firefox comes out on top, but not by much. This means it’s, according to JetStream, slightly better suited for “advanced workloads and programming techniques.”

    Winner: Firefox Quantum

    Speedometer

    Speedometer simulates user actions on web applications (specifically, adding items to a to-do list) and measures the time they take. Check it out for yourself here.

    Better browsers get higher scores.

    Firefox Quantum vs Google Chrome Trial
    Firefox Quantum vs Google Chrome Speedometer

    When it comes to user interactions in web applications, Chrome takes the day.

    Winner: Google Chrome

    Chrome is still the boss

    Unfortunately for Mozilla, Chrome looks like it’s keeping the top spot, at least for now. The only test that favors Quantum is JetStream, and that’s by a hair. And in Ares-6, Quantum gets eviscerated.

    In reality, however, Quantum is no slug. It’s a capable, fast, and gorgeous browser with innovative bookmark functionality and a library full of creative add-ons. As Mozilla’s developers fine-tune Quantum in the coming months, it’s possible it could catch up to Chrome.

    In the meantime, the differences in page-load time are slight at best; you probably won’t notice the difference.