We've been experimenting with creating some very stripped down landing pages for one of our Maple Plain Minnesota Landscaper clients. So far we have created pages for Drainage Solutions, Irrigation, Tree and Shrub Care - Pruning, Retaining Walls - Hardscapes, and Snow Removal.
These pages were constructed to replace other landing pages with the same URLs, which previously had the same navigation and footer as the rest of the site. The new versions have been updated so that there is a lot less code clutterin the source code. There was no need fror a lot of the navigation elements, so they were removed. Also, we worked with the <div> structure and CSS to manipulate the main content area so that although it is about midway down the page to the viewer, it is actually on of the first elements of the source code for each page.
Timber Creek Landscape have been awesome to work with, and do excellent landscaping work throughout the Minneapolis, Maple Plain, Eden Prairie, Minnetonka, Wayzata, Edina, Orono, and Surrounding Areas.
Tuesday, June 12, 2012
Wednesday, May 16, 2012
End of an Era
Jeff C. has been our Account Manager since mid December 2011. At the end of this week, he will be leaving Porterware/LandscaperWebsites/GreenIndustryWebsites to take a position at The Gainesville Times. He did a great job with the account management, and we'll miss his sense of humor around the office.
Jeff (left) & Robert (right)
Wednesday, May 2, 2012
HELP SITE UPDATE 5.1.2012
Looks like this space may take the form of an online notepad as I use it to keep notes and thoughts throughout the development of the HELP.PORTERWARE.COM site, which I'll just call the HELP site from here forward. I realize that there is not a big number of hits here, so a lot of the time I will be documenting just for my own records, and also occasionally so I will have a definitive timestamp on an issue or record. This project feels like my baby, so I am hoping to see it through with maximum organizational efforts.
The reasonI think I have gravitated to this project with so much positive energy is because if it is done well, and maintained correctly, there is no question that the HELP site will be a huge asset to our team, to our time management, and to our overall sanity. No other project I have had the opportunity to work on here at Porterware has been this perfect for what I think are my best skills, and which I also enjoy doing. I guess if we were to try to attach terminology to it it would be somewhere between front end web development and technical writing, with a touch of simple graphics manipulation thrown in just for kicks.
Since the bulk of the HELP site inner pages will be built via our standard "service pages" system, all of the items will have a wiki-like quality in that they can be edited and updated at any point by anyone on the team. This allows for each how-to instruction or answer to have room to grow, or shrink, depending on the responses we get to how well each item actually helped the client who used it.
NEXT ITEMS ON TO-DO LIST:
The reasonI think I have gravitated to this project with so much positive energy is because if it is done well, and maintained correctly, there is no question that the HELP site will be a huge asset to our team, to our time management, and to our overall sanity. No other project I have had the opportunity to work on here at Porterware has been this perfect for what I think are my best skills, and which I also enjoy doing. I guess if we were to try to attach terminology to it it would be somewhere between front end web development and technical writing, with a touch of simple graphics manipulation thrown in just for kicks.
Since the bulk of the HELP site inner pages will be built via our standard "service pages" system, all of the items will have a wiki-like quality in that they can be edited and updated at any point by anyone on the team. This allows for each how-to instruction or answer to have room to grow, or shrink, depending on the responses we get to how well each item actually helped the client who used it.
NEXT ITEMS ON TO-DO LIST:
- Begin build out of home page. This should not take too long. The only difficulty might be the gigantic form field but I am sure that is just a styles/dimension issue, no worries
- Build out base inner page that will expand to fit content
- Create a scheme for formatting the posts consistently as far as fonts & font size, use of bold, use of caps, use of italics, use of color. Being consistent throughout will be VERY important to keep a precision look. NO SERIFS PLEASE.
- Begin transferring post content from this blog to the new site. Refine posts as necessary.
- Survey other team members if there are any common questions they get asked, or help requests they have to field, that I did not list on the original rough draft of the info design spreadsheet
Tuesday, May 1, 2012
LandscaperWebsites.com / Porterware
NEW HELP RESOURCE WEBSITE!
I'm very excited to report that my "How-To" posts on this blog have been working well to help our clients understand the website content management tool, which is the basis of all Porterware related sites.
After it became apparent that the posts were having a positive impact, I showed a few to my boss Chris, the owner of Porterware, and he seemed to really like the idea. He immediately remarked to the effect of, "We need to have our own help/faq and how-to site for all the Porterware divisions since they all share the same manual and terms." I asked if he minded if I still post some info in this space for some things, which he gave me the impression he was okay with. I explained that if we did a proper site with company branding, that the text content might need to be a little more formal than I present here, and I still think that is true. Also, I didn't want to have to stop creating helpful posts while the details of making a proper help site were being hashed out and put into motion which is sometimes a lengthy process. But...not in this case.
I'll be honest...the desire part is completely selfish on my end...I -desire- to stay on task with my development duties and not have to spend lengthy amounts of time on "tech support" type customer calls, which would be better answered with written instructions and illustrations/photos.
The necessity pushing this project forward is the recent and ongoing rebuild of the Website Admin System, which is the web based interface where a site owner can update, edit, and create content that will appear on their site. The Website Admin is the control center for all USER EDITABLE areas of our website packages. There have been lots of changes and improvements over the last iteration of the Website Admin, and the new Admin is already launched, but as of this writing there is no instruction manual. So we need to construct one...fast.
This new manual will not be set up for print, it will be exclusively on the new help/faq/how-to site. Since we already have launched several sites that utilize this new Admin, creating the manual as soon as possible is incredibly important in order to maximize the benefits to our clients.
STEP 1. Brainstorming and Organizing Information
For some reason last weekend, without any real prompting, I created a spreadsheet and began creating a sort of information layout based on what questions are most important, what questions we get all the time, and what information do clients need to know but do not know to ask about. The result was 4 main categories:
Next I added as many questions as I could think of to these 4 sections, and arranged them into an order that seemed to make the most logical progression. I showed this spreadsheet to Chris the following Monday, and that is when he basically put the project in my hands. So rad!
STEP 2: Design / Wireframing / Usability Contemplation
Once Chris gave the go ahead for me to head up the project I got started on a screenshot of how I envisioned the homepage to look right away. My goal was to keep the momentum going because it is very easy for "quiet" projects to get pushed aside as we try to keep up with the day to day workload...so this project will not be "quiet". This project will move fast and it will make noise.
The first screenshot was very basic, and I wanted to do something with several different shades of white, with the colors having a very minimal impact against one another. It was -okay-, but not great. After reviewing it with Chris I reworked it using some of his suggestions and started to really visualize a final version. Once more I sent a version to Chris, but by the time I got to work the next day I had already reworked the screenshot AGAIN.
This morning Chris viewed the most recent screenshot, and gave the go ahead for me to move into the build out phase! View the HELP.PORTERWARE.COM screenshot
One thing that was helpful is that this site will be mostly text, so there was no need to get extremely fancy or complicated with the design. We want people to be able to get to the info they want from this site with the least amount of distraction as possible, so there will be no flash, jquery sorcery, no animated gifs, and no forced login procedure to access info.
One interesting thing I am suprised I got away with was deliberately NOT putting our phone or email address on the most visible parts of the site, and especially not on the homepage. The idea behind this is that I wanted to prevent users who might visit the site to try and help themselves from seeing a giant phone number that says to them "just call and someone else will solve your problems for you". That is exactly what we do NOT want to happen. The goal is to provide enough guidance that a customer can get through just about any issue or update to the user editable areas without our help.
I intend to continue posting to this blog about the progress on the HELP site and our other projects. Now that this blog does not have to function as a help resource for clients, the tone will probably change dramatically. A little less stuffy, business type vibe and a little more self expression. I like it.
After it became apparent that the posts were having a positive impact, I showed a few to my boss Chris, the owner of Porterware, and he seemed to really like the idea. He immediately remarked to the effect of, "We need to have our own help/faq and how-to site for all the Porterware divisions since they all share the same manual and terms." I asked if he minded if I still post some info in this space for some things, which he gave me the impression he was okay with. I explained that if we did a proper site with company branding, that the text content might need to be a little more formal than I present here, and I still think that is true. Also, I didn't want to have to stop creating helpful posts while the details of making a proper help site were being hashed out and put into motion which is sometimes a lengthy process. But...not in this case.
As of Today the new HELP/FAQ/HOW-TO site is being fast tracked into a reality, both by desire and necessity!
I'll be honest...the desire part is completely selfish on my end...I -desire- to stay on task with my development duties and not have to spend lengthy amounts of time on "tech support" type customer calls, which would be better answered with written instructions and illustrations/photos.
The necessity pushing this project forward is the recent and ongoing rebuild of the Website Admin System, which is the web based interface where a site owner can update, edit, and create content that will appear on their site. The Website Admin is the control center for all USER EDITABLE areas of our website packages. There have been lots of changes and improvements over the last iteration of the Website Admin, and the new Admin is already launched, but as of this writing there is no instruction manual. So we need to construct one...fast.
This new manual will not be set up for print, it will be exclusively on the new help/faq/how-to site. Since we already have launched several sites that utilize this new Admin, creating the manual as soon as possible is incredibly important in order to maximize the benefits to our clients.
STEP 1. Brainstorming and Organizing Information
For some reason last weekend, without any real prompting, I created a spreadsheet and began creating a sort of information layout based on what questions are most important, what questions we get all the time, and what information do clients need to know but do not know to ask about. The result was 4 main categories:
- Admin Instructions
- Info that Helps the Purchasing Process
(domain name info, hosting info, seo info, what to know before you buy)
- Billing, Financing, and Accounting Issues
- Miscellaneous FAQs and Advice to Beginners
Next I added as many questions as I could think of to these 4 sections, and arranged them into an order that seemed to make the most logical progression. I showed this spreadsheet to Chris the following Monday, and that is when he basically put the project in my hands. So rad!
STEP 2: Design / Wireframing / Usability Contemplation
Once Chris gave the go ahead for me to head up the project I got started on a screenshot of how I envisioned the homepage to look right away. My goal was to keep the momentum going because it is very easy for "quiet" projects to get pushed aside as we try to keep up with the day to day workload...so this project will not be "quiet". This project will move fast and it will make noise.
The first screenshot was very basic, and I wanted to do something with several different shades of white, with the colors having a very minimal impact against one another. It was -okay-, but not great. After reviewing it with Chris I reworked it using some of his suggestions and started to really visualize a final version. Once more I sent a version to Chris, but by the time I got to work the next day I had already reworked the screenshot AGAIN.
This morning Chris viewed the most recent screenshot, and gave the go ahead for me to move into the build out phase! View the HELP.PORTERWARE.COM screenshot
One thing that was helpful is that this site will be mostly text, so there was no need to get extremely fancy or complicated with the design. We want people to be able to get to the info they want from this site with the least amount of distraction as possible, so there will be no flash, jquery sorcery, no animated gifs, and no forced login procedure to access info.
One interesting thing I am suprised I got away with was deliberately NOT putting our phone or email address on the most visible parts of the site, and especially not on the homepage. The idea behind this is that I wanted to prevent users who might visit the site to try and help themselves from seeing a giant phone number that says to them "just call and someone else will solve your problems for you". That is exactly what we do NOT want to happen. The goal is to provide enough guidance that a customer can get through just about any issue or update to the user editable areas without our help.
I intend to continue posting to this blog about the progress on the HELP site and our other projects. Now that this blog does not have to function as a help resource for clients, the tone will probably change dramatically. A little less stuffy, business type vibe and a little more self expression. I like it.
Monday, April 23, 2012
Backing Up Your Service Pages
The LandscaperWebsites.com/Porterware "website admin system" is our proprietary content management system which allows site owners to easily edit text on the main text areas of the home page, about us page, and service pages of your site.*
Changes made to text areas via the admin are permanent, as there is not a way to use the admin system to go “back” to what content was on the page previous to saving any edits you make. Because of this it is a good idea to make a backup copy of a the text content for a page, and store it on your local machine before editing.
The process for backing up a page is easy.
1. Begin by loggin in to the main admin page using the username and password for your site. Most sites have a link to the admin in the footer of the site. If you site does not, please call us and we'll give you the specific URL for the admin for your site.
2. Once you are logged in, click the navigation tab at the top of the page that says "Manage Pages".
3. The list of service pages for your website will open. Find the page that you want to edit in the list of pages and hit the "edit" link to the right of the page name.
4. The editing page for that particular service will open. Scroll to the bottom of the page and click the tab that says "HTML".
6. Once ALL of the HTML code has been selected, place your cursor over the highlighted section and right click > COPY. The HTML code is now stored in your clipboard.
Changes made to text areas via the admin are permanent, as there is not a way to use the admin system to go “back” to what content was on the page previous to saving any edits you make. Because of this it is a good idea to make a backup copy of a the text content for a page, and store it on your local machine before editing.
( NOTE: The following instructions will use illustrations from our newest iteration
of the website admin, but the instructions are the same for all verions. )
The process for backing up a page is easy.
1. Begin by loggin in to the main admin page using the username and password for your site. Most sites have a link to the admin in the footer of the site. If you site does not, please call us and we'll give you the specific URL for the admin for your site.
2. Once you are logged in, click the navigation tab at the top of the page that says "Manage Pages".
4. The editing page for that particular service will open. Scroll to the bottom of the page and click the tab that says "HTML".
When you click the "HTML" tab, you will notice that you can now see all of the content in the page as well as the HTML tags that create the formatting.
5. Next, use your cursor to select ALL of the HTML code.
6. Once ALL of the HTML code has been selected, place your cursor over the highlighted section and right click > COPY. The HTML code is now stored in your clipboard.
7. Open a blank text file or microsoft word file, then right click and PASTE the code onto the page. Once the code has been pasted, SAVE the file make sure to give it a file name that matches the name of the service page on your website.
You should now have a text file backup copy of the HTML code from the service page you want to edit. Keep this stored on your local computer.
In the event that you ever want to put the page back to the original state it was in before you began editing in in the website admin, you can simply copy all of the HTML code from the text file and paste it back into the admin (making sure you are in HTML view when you do so), then hitting the "SUBMIT CHANGES" button.
It is recommended that you make a backup each previous to any instance of making major changes to a page.
Thursday, February 16, 2012
Configure Outlook 2010 to NOT Leave Email Messages on Server
To prevent your email address from exceeding the monthly quota, you will need to make sure that when you download your email each day, the messages are NOT left on the email server. Below are the instructions on how to check and adjust this setting in Outlook 2010 for POP3 based email.
1. Open Outlook 2010. Click the FILE tab, then click the ACCOUNT SETTINGS box. An additional ACCOUNT SETTINGS box (rectangular) will open under the square one. Click the rectangular Account Settings box.
2. The ACCOUNT SETTINGS box will open. Click the CHANGE tab.
3. The CHANGE ACCOUNT box will open. Click the "More Settings" button lower right.
1. Open Outlook 2010. Click the FILE tab, then click the ACCOUNT SETTINGS box. An additional ACCOUNT SETTINGS box (rectangular) will open under the square one. Click the rectangular Account Settings box.
2. The ACCOUNT SETTINGS box will open. Click the CHANGE tab.
4. INTERNET EMAIL SETTINGS box will open. Click the "Advanced" tab.
5. Advanced options will appear in box. You will see "Leave a copy of messages on server" checkbox about halfway down. Make sure this box IS NOT checked. Hit "Okay".
6. The INTERNET EMAIL SETTINGS box will disappear, but CHANGE ACCOUNT box will still be visible. Hit the "Next" button lower right.
7. The TEST ACCOUNT SETTINGS box will appear, and will run a test of your adjusted settings. When the test is completed click the "Close" button.
8. The Change Account box will display a "Congratulations" message. Click the "Finish" button lower right.
Your email account is now set up so that email messages will not be left on the server once they are downloaded to your local machine.
Please do not to delete messages from your local machine if you think they will be important and will need to refer to them later. Outlook allows for you to create personalized folders where you can store email messages from different clients or associates, so that your email messages are more organized. You can use the Outlook help resources to learn how to set uyp your own folder structure.
If you are using an older version of Outlook, the process should be very similar, but not exactly the same. Here are some links that show how to adjust the settings to NOT leave email on server for older versions of Outlook:
You should be able to find the instructions that correspond to your version of Outlook in one of the links.
Tuesday, January 31, 2012
Before & After Photos - Best Practices
Some of our higher level sites include out Before & After Photo Viewer tool.
If your site includes this feature, you use our website admin to create B&A photo "Sets" by uploading a before and an after photo to the tool, giving a title to each, and a short description.
On sites that include the B&A Viewer, there will either be a link to it from the main navigation, or a link on the portfolio page. To see an example of the B&A in action, visit this Cincinnati OH Landscaper site.
The B&A Viewer is a flash based feature that is part of our pre-configured tool set, and cannot be edited on a site by site basis. It is the size that it is, and works the way it works. This means that there are some BEST PRACTICES you can apply that will help maximize the quality of the B&A viewer on your specific site.
If your site includes this feature, you use our website admin to create B&A photo "Sets" by uploading a before and an after photo to the tool, giving a title to each, and a short description.
On sites that include the B&A Viewer, there will either be a link to it from the main navigation, or a link on the portfolio page. To see an example of the B&A in action, visit this Cincinnati OH Landscaper site.
The B&A Viewer is a flash based feature that is part of our pre-configured tool set, and cannot be edited on a site by site basis. It is the size that it is, and works the way it works. This means that there are some BEST PRACTICES you can apply that will help maximize the quality of the B&A viewer on your specific site.
- The viewer works best when you take the before and after images from EXACTLY the same location.
This may seem like a no-brainer, but we are constantly sent extremely mismatched photo sets that we're expected to "just photoshop" so that they look correct in the viewer. In most cases, no amount of photoshopping will help a set of images that are just too different, so pay particular attention when you are shooting. It may be a good idea to use some sort of small landmark to shoot from, such as standing at a particular crack in the sidewalk, or shooting from the same fire hydrant. Anything you can use to ensure that your B&A are taken from as close to the same spot as you can.
- Give your photos accurate file names.
This is particularly important if you are not uploading the sets yourself, but are sending them to us to upload for you. We have no way of knowing which photos you want to match together unless you clearly label them, even if it seems totally obvious to you which pics should go together.
When pics come out of the camera to a computer, they usually have file names like DSC00024.jpg. That means nothing to someone who is supposed to do something with that photo.
For B&A photos the recommended syntax for file names is:
name, before or after, set number
For example a good filename set might be:
brownhouse_before_1.jpg, and brownhouse_after_1.jpg
Why put a set number?
Because you may have several sets of the same location, such as both the front and the back of a property. So by including the set number, you can stipulate that although the pics are from the same property, they are a unique set.
For example, if you had more photos of the same property in our previous example, you could call them:
brownhouse_before_2.jpg and brownhouse_after_2.jpg.
Renaming the files will also help you keep them organized if you need them for later use on printed materials or any other reason. You will thank yourself the first time you don't have to wade through hundreds of similar DSC000xx's to find what you are looking for.
- The photos must be cropped to the correct size.
The B&A viewer wants your photos to be 490 pixels high by 455 pixels wide (490px x 455px). You can use the graphics editing tool of your choice to reduce the size of and crop the photos. If you do not have a graphics editing tool, you can always use a FREE online editor such as PIXLR.COM . If you absolutely cannot edit your pics on your own, we can do it for you provided you have followed the 2 preceding steps, however it will be up to us how the photo is cropped.
IMPORTANT: Make sure to make a backup copy of an image before you reduce the size/crop it, that way if you mess up, you can always have the original.
- Save your B&A images in a separate, clearly labeled folder.
Do not include your B&A photos in the same folder of images that you plan to upload to your site's photo gallery. This is especially important if you plan to send your B&A images to us to upload. Keeping the B&A images apart from the gallery images contributes to the organizational accuracy of our customer file for your site and also the speed at which we can complete the upload process.
IMPORTANT: You may want some of the AFTER photos in your sets to also be included in your site photo gallery. In order to do this we will need a separate version of the same photo, sized and cropped to different dimensions. I will be posting a "Photo Gallery Images - Best Practices" guide at some point in the future, but for now, know that we cannot simply use the same photo for both and plan accordingly.
- Create a .zip file of the B&A folder and send it to us via sendspace.com
Creating a .zip file is easy. If you do not know how you can learn here. Once you have created the .zip file, go to sendspace.com and send the file to whichever developer has been assigned to your site via their email address. Sendspace is FREE, and much faster than sending a CD, DVD, or USB drive by mail.
If you absolutely cannot make a .zip file, sending a CD, DVD, or USB drive is fine, but make sure to include some info about which site the images are for. Media with no info as to which site it is for is not helpful and will slow down site development dramatically.
Address your envelope to:
Your Developers Name c/o
Porterware
6710 Molly View Point
Cumming GA, 30041
By taking these items into consideration as you gather and prepare the images for your B&A section, you will get the highest quality results with the least amount of errors and delays. I hope this information is helpful, and if you have any questions, call us and we will be glad to give you further explanation.
Subscribe to:
Posts (Atom)