Sunday, April 2, 2017

April 2017 Special

We've done a few WordPress website specials recently.  This month we've decided to focus on non-Wordpress sites.  So we are offering a 25% discount on all websites that are not build on WordPress.

This discount covers mockups, design, development, SEO research and site publication.  Also included is the creation or editing of images for the site... so everything!

Additionally, with this offer, we will include a 25% discount on our basic service package when you host your site on our servers.  That's our basic service package for $18.75 / month*.

For more information, please contact us through our website or by commenting here.  (We will not publish comments with contact information).  If you are ready to get a quote for your website project, please start here.

*Basic service includes monthly backups of your complete site and database (when applicable), restoration from these backups when necessary, quarterly SEO reviews and updates. Regular price for the basic service package is $25 / month. Other service packages are available.  You are not required to get a service package.

WordPress Twenty Seventeen - Code Full-Width Page Layout


I have never started a WordPress site for a client based on one of the default themes.  I just didn't like them as a starting point - that is until the Twenty Seventeen theme arrived.

I really like the full-width image on the home page and the placement of the site title and tag line.  I also think the parallax effect on the home page is pretty neat.  I even like the half-page layout.  It's something different and something that works well with most content.  But, there are times when you just want or need to use the full page for your content.

With very little code, you can create a full-page template for the Twenty Seventeen theme.  It really only involves some very simple PHP and some CSS.  I definitely recommend that you create a child theme for this code.  It's the best way to make sure your customizations won't be overwritten when WordPress updates.  If you are not sure about creating a child theme, it's very simple, follow the directions here or do a Google search.  There are several good tutorials out there.  (Don't want to create a child theme? See the notes in orange).

Step 1 (If you did not create a child theme, skip to Step 2).
After you create your child theme, create the following directory structure, replacing "your_child_theme" with the name of your theme:

wp-content/themes/your_child_theme/template-parts/page/

We will be cloning and customizing two files, one that will be placed in the directory you created above.

Step 2
We'll begin by cloning the page.php file.

(a) Open the file at wp-content/themes/twentyseventeen/page.php for editing.  At the top of the file, just under the <?php code starter, add the following:

/**
     Template Name: Full Width
**/

(b) Next find the following line of code (originally, it was on line 27 of the file, but you just added the lines above to the top of the file, so move down appropriately):

get_template_part( 'template-parts/page/content', 'page' );

and change it to:

get_template_part( 'template-parts/page/content', 'page-full-width' );

(c) Now, save this file with the name, page-full-width.php in your child theme directory:

wp-content/themes/your_child_theme/page-full-width.php

If you did not create the child theme, save this file (same file name) to the twentyseventeen theme directory:

wp-content/themes/twentyseventeen/page-full-width.php

Step 3
Now we are going to clone the default content file and customize it with some special CSS class names.

(a) Open this file for editing:

wp-content/themes/twentyseventeen/template-pages/page/content-page.php

(b) Now find the following line of code (around line 16):

<header class="entry-header">

And change it to:

<header class="entry-header-full-width">

(c) Next, find this code (around line 20):

<div class="entry-content">

Change this to:

<div class="entry-content-full-width">

In the next step, we will be writing some CSS that will use these new class names to alter the default layout of pages in the twentyseventeen theme.

(d) Before moving on, save the above with the name, content-page-full-width.php in the following directory:

wp-content/themes/your_child_theme/template-parts/page/content-page-full-width.php

If you did not create a child theme, save the file (with the same name) to:

wp-content/themes/twentyseventeen/template-parts/page/content-page-full-width.php

Step 4
In this step we will add the CSS rules to give us the desired full-page effect.  Open the style.css file in your child theme directory.

I add the following lines to the end of the style.css file and make sure they stay at the bottom.  This helps to insure that no other rules will take precedence over this code.

body:not(.has-sidebar):not(.page-one-column) .page-header,
body.has-sidebar.error404 #primary .page-header,
body.page-two-column:not(.archive) #primary .entry-header-full-width,
body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
     display: block;
     width: 100%;
}

.blog:not(.has-sidebar) #primary article,
.archive:not(.page-one-column):not(.has-sidebar) #primary article,
.search:not(.has-sidebar) #primary article,
.error404:not(.has-sidebar) #primary .page-content,
.error404.has-sidebar #primary .page-content,
body.page-two-column:not(.archive) #primary .entry-content-full-width,
body.page-two-column #comments {
     display: block;
     width: 100%;
}

If you did not create your own child theme, I would recommend that you put the above code in the twentyseventeen default style.css file near similar code.  The default style sheet is found at:

wp-content/themes/twentyseventeen/

For the first block of code above, add it at line 3756 - remember to put line breaks above and below it.  And for the second block of code, add it at line 3775.

You can, of course, add any other custom styles you would like to the .entry-header-full-width and .entry-content-full-width classes.

That's it!  Now when you are creating a page, you can choose the "Full Width" template in the Page Attributes section (see image).   I hope you find this code helpful.



Note: you can find plugins that will do this for you.  But, why bloat your site with all the code associated with a plugin, when you can add the simple code here?  I obviously wouldn't. 😎😎



Thursday, March 9, 2017

Help Us Help You

When starting a project to either build a new website/app or update an existing website/app, there are questions that any good designer/developer should ask.  With some of the questions, it's easy to understand why the designer/developer needs to know the answer - questions like, "how many forms will you need?" and "will you be accepting payments online."  Others are not so obvious, but are still understandable.  Questions like, "who's your target audience?" are not always expected, but with a little thought, you can figure out why the designer/developer would need to know this. (Note: for the rest of this post "developer" will refer to designers and developers).

But, it seems that there are five questions that always cause confusion - "why do you want to know that??" is often the first response. Below are the five questions and I'll try to explain why these questions are important to a developer when planning your project.

Why do you want the new website/app?
The 'why' is often overlooked.  You want a new site or app and the developer wants to make some money.  So, skip the why, just do.

Maybe you are trying to meet an industry standard or government requirement. With this information, a developer can build the standards/requirements in from the start of the project and check to make sure they are followed during the project.

Also, a good (honest) developer will let you know if your reason for 'why' is even valid.  For example, if you want a new app to rapidly increase sales, your developer should explain that an app can help increase sales, but it is seldom 'rapid.'

What do you think this project will improve?
"I want to improve my image with a new, modern site," or "I want to appeal to younger customers with a mobile app," are totally valid answers.

It is important for your developer to understand what you are trying to improve with your site or app.  Answering this question helps the developer understand your vision for the project.

What are your long-term goals?
This ties into the questions above. It helps the developer to understand more about what you would like out of the project. For example, how long will this app/site be around - are we designing for the future as well as the present? Should we create for expansion or do you see a new project to meet future requirements?

What's the timeline for the project?
A clear timeline for the project needs to be established. What can realistically be completed in that time? If the project cannot be completed in the desired limit, can a scaled down version be developed that meets your needs? If a full version must be completed, can we adjust the timeline? 

What is the budget for this project?
This is somewhat related to the above question. Understandably, the developer is thinking, "Realistically, can I still make a profit AND give the client what they want and in the time they want?" Potential clients fishing around for the best price is understandable. (But don't forget the adage, "you get what you pay for.") Knowing your budget will help the developer know what he/she can realistically deliver.

These questions are often difficult for the developer to ask.  And I find that often, the client has not given them much consideration.  But, the discussion and answers to these questions will help the developer-client relationship and improve the outcome of the project.

Thursday, March 2, 2017

March 2017 Special - It's a Redo!

Our February special was such a hit that we decided to do it again for March!  So, if you liked it last month and missed out... here's your chance again! Get 20% off the development of a custom mobile application when paired with the development of a website or web application!


Contract with us in the month of March to create a new website or web application and get a 20% discount on the development of a companion mobile application.

For more information, contact us at questions@freelanceitsolutions.com
If you would like to get a quote for your project, you may start by using this link.  We will review the information and get back with you within 24 hours.

Also, visit the website for a look at out portfolio and testimonials.

Wednesday, February 15, 2017

Chat App Demo

Here's a little demo that I recently complete that shows how a business could implement a chat
app on their website.

The Chat App uses sessions to keep track of the visitors using the app - for the demo, there is a Representative and a Guest.

The web application can be customized for use on your website.  It would allow clients and potential clients to contact you for help and information.   If you have an employee at the computer or answering the phones, they could also monitor the app for active users.

For a production version, you could keep track of client information, guest names and/or email addresses, etc.  And the complete conversation is saved to a database for future reference.  The app can also be set up to allow the guest/client/visitor to have a transcript of the conversation send to their email.

To try the demo, visit our site at: http://demos.freelanceitsolutions.com/myChat/
You will find information and directions on this page as well.

If you have any questions on how this app could be set up and customized for your site, please contact us.  You can also comment below.  We will not publish comments that include personal or business contact information.

Wednesday, February 8, 2017

New App Mockups and A/B Testing

Below are some mockup screenshots for a new mobile application we are developing.  First, I'm just kind-of showing them off.  But also, I'd like to know which set you prefer.  Please comment below with "White and Red" or "Black and Yellow" to indicate your choice.  ~Thanks 😊


Black and Yellow White and Red

Thursday, February 2, 2017

February 2017 Special - Web + Mobile and Save

For February 2017, get 20% off the development of a custom mobile application when paired
with the development of a website or web application!

Contract with us in the month of February to create a new website or web application and get a 20% discount on the development of a companion mobile application.

For more information, contact us at questions@freelanceitsolutions.com
If you would like to get a quote for your project, you may start by using this link.  We will review the information and get back with you within 24 hours.