WordPress vs Squarespace

At Dhali we design most of our sites using WordPress. WordPress is a powerful open source software and tool for building websites and apps. Some estimate that over 25% of ALL websites are currently built with WordPress.

The most common use for a WordPress site is as a content management system, or CMS. This allows users to edit their website like a Google Doc. Along with the intuitive CMS, WordPress has a multitude of powerful tools “under the hood”. These tools allow our development team to make beautiful, easy to edit websites.

Another popular CMS is the new kid on the block, Squarespace. Squarespace is a beautiful, although limited, alternative to WordPress. Squarespace thrives off of its “drag and drop” system and pre-made themes. These tools allow users to create professional looking sites with no code or prior experience.

So which is best for you, WordPress or Squarespace?

The answer is it depends.

To decide, you must have the goal of the website in mind. The best way to explain this is by giving a few examples. As you will see, the choice almost always boils down to functionality and flexibility.

Portfolio

Let’s say you are a photographer who needs a simple portfolio site. The goal of the site is to showcase your work and set up a contact form for potential clients to reach you. You don’t have a large budget want to get started immediately.

The immediate answer here is Squarespace.

Why? Squarespace has a few pre-built templates for portfolios to get you started. Because you have a small budget, the upfront cost will only be for your domain name and first month of Squarespace. If you spend a few hours uploading your photos and connecting an email address, your site is as good as live.

Why you shouldn’t choose Squarespace.
Let’s say down the line you want to add in some sort of social interaction to your site, such as the ability to “like” photos. Squarespace simply does not have this functionality. Also, because Squarespace severs are the only place you can host Squarespace sites, you will never be able to transfer your website to another hosting provider.

Small Business

Let’s say that you are a small business looking to grow their online presence. The goal of your website is to display your products and reach out to potential clients. Your brand has a very distinct style, and in the future you hope to add eCommerce to your site so that you may sell products online.

The answer here is WordPress.

Building this site on WordPress will allow you to start with the end in mind. Phase one of the project will be getting the website up and running and adding in various pages and products. Phase two can then be implemented down the road, giving your site the eCommerce functionality when you need it.

In addition, with WordPress where you host your site is completely up to you, allowing further flexibility. All while branding and customizing your site to look the way you want it.

That’s where we come in.

Our team at Dhali has the skills and tools available to help you achieve your goals. We design fully customized sites with the future in mind, and even show you show to add to your WordPress website.

(We also offer hosting programs that cover everything from security maintenance to posting blogs)

See for your self!

Visit our clients page. All of which were built on WordPress.

Update Your WordPress Website

Clients often ask what the benefits are of updating their WordPress site, including plugins and themes. While some of the benefits include fixing/addressing bugs, adding key features and increased functionality, the main reason why it is vital to be on top of your WordPress site maintenance is security reasons.

According to WPBeginner, more than 80% of WordPress sites that had not been properly maintained and updated were hacked.

There are different reasons as to why WordPress sites are frequently hacked. Most of hacks, however, can be traced back to the fact that the site is running on outdated versions of PHP, WordPress, themes, or plugins. By not updating your WordPress site regularly and in conjunction with the released WordPress updates, you are leaving your website buggy and unprotected to hacks.

We have a tested and true process for maintaining all client WordPress Websites:

  1. Read the release notes or changelog to see what the updates change.
  2. Test the update on a development site. That way, if anything breaks, we can troubleshoot before updating your live site.
  3. Back up your site.
  4. Install the updates.
  5. Review and test your site. Focus on the items that were noted in the release notes or changelog.

Just like you need to install an update on your operating system for your mobile phone, web applications such as WordPress need the same software updates from time to time.

Is Your Website ADA Compliant?

Title III of the Americans with Disabilities Act (ADA) prohibits discrimination on the basis of disability in places of public accommodation. Both large and small businesses and corporations, are affected by the ADA. Title III of the ADA is best known for its applicability to things such as lack of wheelchair access, recognition of service animals, effective communication for hard-of- hearing individuals, such as braille, and accommodations for the vision impaired. However, with the rise of the digital age and the reliance on online technologies, Title III’s focus has turned to websites.

Title III claims are on the rise, and in 2015, the DOJ received 6,391 accessibility complaints—a 40% increase over the prior year. Moreover, website compliance litigation filed by plaintiffs’ firms and advocacy groups have similarly seen a significant rise over the past year, and especially in the past several months. Complaint letters identify certain alleged ADA violations based on “access barriers” on the recipients’ websites. The letters also claim that unless the recipient modifies its website to meet the standards in the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines (WCAG 2.0 AA), the company will continue to violate Title III. The WCAG 2.0 AA Guidelines have been endorsed by the DOJ.

In 2014, the DOJ adjusted for inflation the monetary penalties for violating rules set forth by the ADA. This adjustment increases the maximum civil penalty for a first violation under title III from $55,000 to $75,000, and for a subsequent violation the new maximum is $150,000.

To make your website ADA compliant, we will create a roadmap to be able to effectively communicate how these changes will positively affect the user experience. Some of the most common issues and ways they can be fixed include:

  • Images: The images on your site must have alternative text associated with them so that if they do not render on a device or the user is unable to see the image, the image can still be explained. The alternative text will clearly describe what that element is. Without alternative text associated with the image, some screen readers will not understand what information is being presented.
  • Color and Contrasts: If important elements on your site, such as buttons, do not have enough contrast, then it is hard for users to discern what the button is and where it will take you.
  • Online Forms: If for example your checkout form on an ecommerce site does not have proper labels, it makes it difficult if not impossible for certain ADA devices to interpret their function.

Compliance standards must be followed and will evolve just as your website does, and there are guidelines all website contributors must know and implement in order to stay within ADA guidelines. ADA compliance gives your online platform a competitive advantage, and may lead to more transactions, offers a better overall experience across browsers, provides digestible information for Google and other search engine results. This in turn helps the site reach a wider audience and reduces the likelihood of future ADA litigation.

Deleting Custom Fields in WordPress

While working on a project you may have had custom fields that are left behind and that are no longer in use for the current theme these unused custom fields remain in your database. I came across this exact scenario when I was upgrading a section of a website that was outdated and needed to be re-done. The previous programmer had use a plethora of custom fields and my goal was to reduce the amount of custom fields used.

Take a look at the following example. All the custom fields that are not being used

Removing Unused Custom Fields

  1. Log into to phpMyAdmin
  2. Select your database.
  3. If you use a different database prefix than the default “wp_” one, then you’ll need to change that in the example below. Replace “meta_key” with your actual custom field name.
  4. Run the following script. ( The script will run and delete any references to that custom field and the data associated with it )
DELETE FROM wp_postmeta WHERE meta_key = 'meta_key';

Alternatively you can also run an sql script that looks at meta_key and see if there are any empty values

SELECT * FROM wp_postmeta WHERE meta_key = 'meta_key';

In my scenario I needed to look for any custom field containing the words productOption running the sql script returned the following.

SELECT * FROM wp_postmeta WHERE meta_key LIKE '%productOption%';

wp-unused-fields-db

Changing Database Prefix in WordPress

The following blog post over at DigWp.com has a great step by step tutorial on changing your database prefix in WordPress database tables. You will definitely come across this scenario when working on WordPress websites.

Change Your Database Prefix to Improve Security

What I found really helpful is that you can run an SQL command to rename all your tables at once.

RENAME table `wp_commentmeta` TO `wp_VzQCxSJv7uL_commentmeta`;
RENAME table `wp_comments` TO `wp_VzQCxSJv7uL_comments`;
RENAME table `wp_links` TO `wp_VzQCxSJv7uL_links`;
RENAME table `wp_options` TO `wp_VzQCxSJv7uL_options`;
RENAME table `wp_postmeta` TO `wp_VzQCxSJv7uL_postmeta`;
RENAME table `wp_posts` TO `wp_VzQCxSJv7uL_posts`;
RENAME table `wp_terms` TO `wp_VzQCxSJv7uL_terms`;
RENAME table `wp_term_relationships` TO `wp_VzQCxSJv7uL_term_relationships`;
RENAME table `wp_term_taxonomy` TO `wp_VzQCxSJv7uL_term_taxonomy`;
RENAME table `wp_usermeta` TO `wp_VzQCxSJv7uL_usermeta`;
RENAME table `wp_users` TO `wp_VzQCxSJv7uL_users`;

Think Lightweight – Logo and branding

THINK LIGHTWEIGHT

think_lightweight_final_logo

 

Think Lightweight is a company that focuses on applying lightweight engineering principals to traditional solid wood applications. As the company continues to grow, we worked with them to update both their website and branding.

You can visit the official Think Lightweight website here.


The Logo

think_lightweight_final_logo

 

When creating the Think Lightweight logo, we wanted to emphasize both the lightweight and structure elements that represent the company. Think Lightweight’s previous branding contained a feather, which we felt represented the idea sufficiently. With the feather as the focus, we chose a light blue color that continued to represent lightweight. Finally, we paired this with both a hexagon and the Gotham font. These are both bold visuals that we feel represent the strong structures Think Lightweight creates.


 The Logo Use Guide

In addition to creating the logo, we provided Think Lightweight with a Logo Use Guide. This document helps Think Lightweight maintain a cohesive style in all future branding. You can view the guide by clicking the image below.

 

capture


The Brochure

Because Think Lightweight offers many different products and specifications, we worked with them to create a product brochure. For both the product brochure and the website, we created individual product logos. The major challenge in creating the brochure was maintaining all of the technical information in a more simplified way. We accomplished this using a few design elements through out the website and the brochure. This includes hexagons, icons, colors and typography. You can view the entire brochure by clicking the image below.

 

brochure-page

 

Upgrade Wamp Server to PHP 7

We recently upgraded our development and production servers to PHP 7. We develop locally using Wamp Server so we needed to install PHP 7 on our computers as well. After digging around and some trial and errors I found the youtube video below.

https://www.youtube.com/watch?v=IpMSSZvVfNE&list=WL&index=3

Install Microsoft Packages

Download PHP 7

  • Download PHP zip file from http://windows.php.net/download/
  • Choose the correct file 64 or 84 bit Depending on your operating system
  • Choose the Thread Safe file

Create PHP7 Folder in wamp directory

  • Extract contents from PHP7 Download
  • Copy files over to a new folder in wamp\bin\php\php7.0
  • You will need to copy 2 files from an older php version php.ini and wampserver.conf into your new folder wamp\bin\php\php7.0

Modify php.ini

  • In your new folder open php.ini
  • In php.ini find extension_dir and replace the older php version with the new version
  • In php.ini find zend_extension and comment this line out it is no longer needed.
  • Create a copy of php.ini once the above changes are made and rename it to phpForApache.ini

Modify wampserver.conf

  • In your new folder open wampserver.conf and replace LoadModuleName and LoadModuleFile to load the PHP 7 like so

phpConf['apache']['2.4']['LoadModuleName'] = 'php7_module';
$phpConf['apache']['2.4']['LoadModuleFile'] = 'php7apache2_4.dll';
$phpConf['apache']['2.4']['AddModule'] = '';

Start Wamp Load PHP 7

  • Start Wamp > PHP > Version > 7

Notes: PHP 7 needs Apache 2.4 otherwise it will not run. Make Sure Wamp Server is running Apache 2.4. In the video the extensions were changed I tried it and it PHP 7 wouldn’t load in Wamp Server so i kept the same extensions from my previous php.ini file and it worked

Dhali Icons

DHALI WEB DESIGN ICONS

Creating a more cohesive look for Dhali’s Website.


Home Page Icons

At Dhali Web Design, our core business involves making the web an accessible and enjoyable environment for our clients. We do this by building a majority of websites on WordPress, which allows them access to their own content and media. We also involve them in our designing process, making sure everything meets expectations. In order to represent this environment, I wanted to create friendly icons that get at the core of our services.

You can view the full sized icon set on our Home Page, or check out some smaller version below.

 

website-maintenance e-commerce web-design website-hosting wordpress-dev wordpress-managment

 


WordPress Services Icons

In order to maintain a cohesive look and feel across our site, we’ve created icons similar to the homepage for all of our services.

Below are a few of the icons we created for the WordPress Services page. For a full list of our services, Click Here.

 

wordpress-training wordpress-backups website-updates staging-server  plugin-updates email-hosting

 

WordPress Core Update – 4.6.0

UPDATING WORDPRESS CORE

“New features in 4.6 help you to focus on the important things while feeling more at home.”


Why Updating your WordPress site is so important

These updates are included in your WordPress hosting with Dhali.

There are five main reasons for keeping every aspect of your WordPress site up to date, which are:

  • Security
  • Performance
  • Bug fixes
  • Compatibility
  • Features

Each of these is important for different reasons, but security is the our priority. You can see more about the most recent update below.

WordPress 4.6 “Pepper”

Email Account Greylisted

If you’re seeing the following message in Outlook. “The server responded 451 Greylisted…” Below is how you can fix the error.

email-greylisted


Step 1: Go to your Account Settings

outlook-4


Step 2: Click More Settings > Outgoing Server > Check My Outgoing Server (SMTP) requires authentication > Use same settings as my incoming mail server

outlook-5


 

Step 6: Click OK > Next > Finish

At this point you try sending out a message. You should no longer receive the following message “The server responded 451 Greylisted…”.

White Glove Data

This week most of my attention was directed to a new client of ours, White Glove Data. After the initial meeting I began work on the logo that will be used on the site and branding. When this process was completed and approved, I began work on the website layout.

A larger version of the comp can be seen here.

whiteglovedata-comp

 


Below are some shots of my initial brainstorming process, and original Photoshop wire frame. The purpose of these is always to place elements and content in a effective way before I begin to plan any design elements. Typically, wireframes help me lay out the structure of the site without having to worry about colors, typography, icons or images.

 

IMG_4384wireframe

 

 

Search and Replace

Changing permalinks or any other string in a database can be a hassle especially if you don’t know MySql commands.  When working with WordPress you’ll soon run into this situation where you need to change a string across the entire database whether you’re changing permalinks when launching or migrating a site or just doing a find and replace on the entire database.

Luckily I came across this tool called Database Search and Replace Script in PHP

Installation & Use

To use the script, download the zip file from Database Search and Replace Script in PHP, extract the folder called search-replace-db-master, renaming it to something of your choosing, upload it to your web sites root directory, then navigate to that folder in your browser (domainname.com/your-secret-search-replace-folder). The script will automatically attempt to find and populate the database fields but make sure to double check that the information is correct.

The root WordPress structure would looks like this.

/your-secret-search-replace-folder
/wp-admin
/wp-content
/wp-includes


Navigating to the following url (domainname.com/your-secret-search-replace-folder) using your browser will bring up the following page.

search-replace-db-details

  1. Fill in the field you want search for then fill in the field you want to replace with
  2. Database: Make sure the database field information is correct.
  3. Tables: Select Which tables you want to include
  4. Actions: Click dry run to run a scan first to see how many instances of your field will be replaced ( Will not change fields only runs a search )

After dry run is clicked it will go search through the database tables and look for the instance you defined in the search for field.

search-replace-db-tables


If you’re satisfied with the dry run then go ahead and click live run ( This will execute find/replace and change all the fields ).

*** Very Important *** After you’re done making your find/replace changes make sure to delete the folder ( /your-secret-search-replace-folder ) from your root directory.