Tools for Building an One Page Website

You need to build an one page website. How do you go about building one? Do you use specific tools? You can chose to build a landing page with a pre-built template that you customize or build your own from scratch. The best way to learn a new set of tools or a framework is to build your own. I choose to build a new website with Bootstrap and LESS.
Tools For Building One Page Website

What type of website?

One page portfolio for a Developer. I sketched out on paper a basic design.
Developer Portfolio Template Sketch

When building a new website, you have to make a lot of design decisions. For this project, I am focusing on choosing colors, fonts and images.

How do you choose the colors?

For inspiration, I looked books that I own. I selected one with a color scheme that I liked. Next, I used a Material Design Generator to create a color palette. For this project, I used coolors.co and selected a color palette similar to the book cover.
Coolors Color Palette

What fonts are you going to use?

You want to pick fonts that work well with your website’s content. You can use these tools to help pick fonts that look good together. fontpair.co or 20 Inspirational Free Resources for Better Typeface Pairing Or if you want to experiment, use fonts.google.com to find a font you like and look at the recommended pairings.

For this project, I decided to use: Julius Sans One and Crimson Text. I found it on https://femmebot.github.io/google-type/.

Where do you get images from?

Do you take your own photos or get them from a stock photography website? Whenever you can, you want to customize your website with your own custom photography. Not all projects give you the time to create your own photos. When you can’t create your own photos, you can use stock photography from different web collections. I like to get stock images from pixabay for my projects. I picked out a hero image and several support images for this project.
Binary Background

What was the result?

It didn’t work out. The color scheme and hero image seemed too busy, red and angry. So, I decide to look for a better hero photo. The one I chose wasn’t working. I tried a couple of different photos. I found one that I liked better, but it didn’t fit the existing color palette. The next step was to change the color scheme slightly. I picked out two colors in the photo that looked good with the other colors in the color palette. I changed the CSS to see how the new colors worked. They looked much better. The newer version of the website works better than the original.
One Page Programmer Final

As web developers, we make decisions that affect the design and functioning of a website. Not all decisions work. Sometimes, you have to make changes that affect the design for the better. You may even have to change your approach in order to make a website or app an reality. Have you ever had to make minor changes that improved your original design?

Notes on Building Accessible Websites

Everyone should be able to go to a website and do what they want with a minimal amount of effort. What makes a website accessible? An accessible website should be perceivable, operable, understandable and robust. A website is perceivable when you provide text for any non-text content like images, videos, podcasts or other sound files and provide alternatives for time-based media. An operable website makes all functionality available via keyboard and provides users enough time. Your website is understandable when you create content that is readable and understandable. It becomes robust when your create it using techniques that maximizes future compatibility.
Notes On Building Accessible Websites

How do you achieve this?

You get started by adding accessibility to your website with HTML, CSS and files names.

  • Add alt tags to images. Not all images need the alt tag. If your image is for decoration only, you can skip the alt tag.
  • Use headings frequently. Headings help break up the text and make it easy to understand. Remember, to use one H1 tag per page
  • Use color contrast. The right color combinations can make text either easy or hard to read. Try Lea Verou’s color contrast tool.
  • Make your file names meaningful. Your camera gives your images names with long sets of letters and numbers. Rename them to describe the image. Meaningful names can help with SEO and finding an image if you need to updated it later.
  • Add a label to every form element.

How do you know how accessible your website is?

You can use the following tools to determine your websites accessibility and take steps to fix issues.

Wave

Wave is an accessibility evaluation tool. It can help you to make your content more accessible. It shows you errors in red, warnings in yellow and accessible content features in green.

Wave On Burlington Footwear

ChromeVox

A screen reader for the Chrome browser. Use ChromeVox to learn how a visually impaired person has to use your website.

Your Keyboard

Use your keyboard to navigate through your website without using your mouse. If you need to use your mouse, then you have some items that need fixing.

Do you use Chrome for Your Development?

Ire Aderinokun, UI Designer and Front End Developer, talks about the Chrome Accessibility tools that she uses to test for accessibility issues.

While you develop your next website, use these tools and tips to ensure that you build a site that is perceivable, operable, understandable and robust. By using a variety of tools, you can help to make the user experience better for all of your users.

Want to learn more about accessibility? The A11Y Project is working to make web accessibility easier for web developers to implement.

Designing Your Process (For Fun and Profit)

What is design? Design solves problems. If you aren’t solving a problem, than your design is making it pretty. Whether it is a website, an app or service, your design must do something. Pretty is not the goal of design.

How do you go from pretty to design?

  • Understand your clients needs. Whether its an app, service or website, work with them to learn what they want.
  • Know who the audience you are designing for. Who are they? What problem to they need solved? Why would they use your solution?
  • Define the problem. What is the problem that you want to solve?
  • Solve the problem. Develop the solution to your problem.

In order to do this, you need to develop a process that help you get from idea to solution. Chris Ford at WordCamp Orange County 2016, talks about Designing Your Process.

You can also find the presentation slides on Slide Deck.

By developing a design process, you can see where you are going, choose the right tools and deal with unexpected surprises and failures when they occur. What have you included in your design process?

How Do I Manage Multiple WordPress Websites?

When you have a single WordPress website, managing it is easy. You log in update plugins, WordPress or your theme. Once you start making more WordPress websites whether for yourself or clients, you’ll need a more effective way of managing them.

Manage Multiple Sites

With WordPress, you have a number of solutions to choice from that help you manage multiple WordPress websites from one location. No more logging in and out and switching between websites. Here is a quick overview of three of the best WordPress Management solutions.

MainWP

A WordPress Management plugin that allows to manage multiple WordPress sites from one location. You can manage your day to day WordPress tasks from posts to updates. MainWP is a free plugin with many features.

You can:

  • Manage Plugins and Themes
  • Manage Unlimited WordPress sites
  • Manage Users
  • Host on Your Own Server
  • Manage content, upgrades and backups

What do you get with the paid version?

  • Article Uploader
  • Advance Uptime Monitor
  • Bulk Settings Manager

Infinite WP

A self-hosted, multiple WordPress management platform that simplifies your WordPress management tasks. You can backup and update multiple WordPress sites from one location without having to login to each site.

  • Written in PHP; not native to WordPress
  • Free
  • Self-hosted
  • Master Login
  • One Click Update
  • Back Up and Restore
  • Doesn’t matter what server you install it on

What do you get in the paid version?

  • Scheduled Backups
  • Manage Users
  • Publish Posts and Pages
  • Security Plugins like WordFence and iThemes Security
  • WP Maintenance
  • Cloud Backup
  • Staging

CMS Commander

A powerful dashboard that allow you to manage all of your WordPress websites in one solution. CMS Commander also provides tools for bulk posts articles and pages to your blogs simultaneously, create a new WordPress site with all the settings that you need to get started and more.

  • Free to try
  • One Dashboard to Control All WordPress Websites
  • Full Overview of Traffic and Statistics
  • Copy Entire WordPress Sites for a New Project
  • Complete Control to Manage Posts, Comments and Users
  • Easy to Update All WordPress Sites
  • Automatic Backups of All Your Sites

Summary

Managing multiple WordPress websites individually is both time-consuming and unproductive. By using a WordPress management tool, you can be more productive by streamlining your maintenance tasks and save time. Each tool has different features, benefits and pricing. Pick the one that fits your needs.

How to build Landing Pages for your website

Do you have landing pages on your website? A landing page is a high focused page that has one call to action and targets a specific audience. This type of page can be temporary like getting people interested in an event or a webinar that you are host. Or it can be permanent page that you use to get people to purchase your eBook or new product.

Build a Landing Page

Here are some tips I learned from a recent talk on building landing pages:

What should your landing page have?

  • Heading and Subheading. Use headings and subheadings to break up the content and make it easier to read.
  • Content. Write quality content that speaks to your audience.
  • Key Benefits and Features. People like to know how you can help them solve a problem that they have.
  • Social Proof. Get people who like your product or service explain how you helped them.
  • Social Share. Provide links to social media, so people can share your website.
  • Call To Action. Your landing page should have one step that you want people to take.
  • Lead Intake Form. Provide a form so that people can get in touch with you for more information.
  • Little or no navigation bar. You want to keep them on the page. Navigation bars provide a way to leave your page quickly.

How do I drive traffic to my landing page?

  • Email. You can get people to your website through email newsletters.
  • In Person. When you meet people, whether at a conference, networking meeting or anywhere else, tell them about your website.
  • Blog. Either write a post on your own website or guest blog post on another site. Blog posts can bring visitors to your site. Weeks or months after you have written the post.
  • Social Media. Share the link to your website. People will share links if it is helpful, interesting or helped them solve a problem.
  • Video. Create a video and include a link to your website in the video.
  • Custom Business Cards. Make custom business cards for an event such as networking that includes a link to your website.

What parts of the landing page should I test?

  • Headlines. They can help or hurt your results. Try different headlines to see if you get a better response.
  • Images. Your landing page should use photos, graphics or icon. Different images can help sell your story.
  • Text. Your text is an important part of your landing page. Experiment with different types of content: lists, testimonials, or stories.
  • Call to Action. Change your call to action. Try “Getting Started” vs “Buy Now”.
  • Page Layouts. Single column, two columns or three columns can help you organize your page. Try rearrange your page to see if one, two, three or a combination of columns works better.
  • Other design elements. Experiment with color, fonts and other design element. Color can font choices can influence how people perceive your website. Your intended audience may respond to different choices.

What tools and apps can I use to make my landing page?

  • WordPress
  • OptimizePress
  • Gravity Forms
  • X Theme
  • LeadPages
  • Optimizely

Additional tools to make your landing page better:

  • Copyblogger. You’ll find tips and techniques on copywriting, marketing and more.
  • Google Analytics. Use to measure how much traffic your page is getting and to help you make adjustments to your page.
  • Hubspot. Use their software to help you streamline and increase your sales and marketing efforts.

Summary

Landing pages are different from other pages on your website. It can be a permanent or temporary page. You want the page to be focused on a specific audience and topic. By using different elements like headlines, call to action, social proof, lead intake form, copy and photos, you can create a landing page that fits your target audience. Test and experiment with different elements to create a landing page that works for your intended audience.