tifstradingpost.com 12-2015

I was acquainted with Tiffany Ryan from the days when our family lived in the Applegate Valley. I had also made a website for Barb Wallgren of Cowboy flowers (she retired from that now), which was located on the property where Tiffany had her business, Ryan’s Outpost/Outpost Farm & Garden. I hadn’t heard from her in ages, so it was a doubly welcome surprise when she called to ask if I had time in my schedule to build her ecommerce website. She had already set up tifstradingpost.com with WordPress and had hoped to build it herself with the ecommerce theme she had chosen, but found she simply did not have the time to do that and manage her business, too. I was happy to be able to offer her my service in building out the website for her.

tifstradingpost.com – Getting Started

Since the website was new, no redirects were required, so I went to work setting up the details of the WooCommerce shopping cart and installed my essential plugin suite, which includes security and SEO plugins. I suggested that, since Tif has a physical location for her new business Tif’s Trading Post, that she invest in the Local SEO extension to the free Yoast SEO plugin. When I explained that this increases her ranking in local search results, she agreed this was a good call. You can see the automatically generated output of the plugin in the sidebar of the about page screenshot below. The plugin also provides “schema” output that’s only visible to the search engines and helps them understand many of the details of a business website. Some of the information, such as location, opening hours, and phone number, will be displayed in the info box some businesses get on the right hand side of search results as well.

My new favorite security plugin in BulletProof Security Pro, and I install it on every new/redesigned website I work on. It’s complex, but effective, and replaces the multiple plugin setup I used to use.

Tiffany sent me pictures of the Trading Post, which I used to create a slider on the home page. Her thought was that the consignment shop would get most of its business locally, and that the website would extend the availability of her items beyond her local area. Brilliant! The pictures assure visitors—whether local or out of town—that there is a real business behind the website, and gives locals a look at it so they will recognize the location when driving by.

tifstradingpost.com Tif's Trading Post - Home

New-Commerce Theme Features and Customizations

I found the theme developer to be very helpful with a couple of issues I experienced while working with tifstradingpost.com. The theme itself is very clean, and comes with a default white and grey color scheme with red accents. I loved the ability to post a little sitewide notice at the bottom of each page, alerting shoppers that they should contact Tiffany for shipping quote if they were out of area buyers who would not be able to pick up their purchases. It’s really handy that people can mouse over a product image on the home page to see it expand, offering them the choice of clicking to visit the details page or to add it to their cart immediately.

Still, the site needed some personalization to really make it Tiffany’s. She said “If you can make it pretty, that would be great!” The pictures of the great second hand and consignment items had already made it look much nicer, and she had selected the fonts herself, but the color scheme still left much to be desired. The theme offered other color schemes, but none of them looked very “Tiffany.” So I embarked on the color customizations on my own, using the fact that she is a rather “woodsy” kind of lady and her business is located in a woodsy area to guide my decisions. I combed through all the text and link styles, changing the colors to ones that would complement the background and accent colors I had already chosen. She really liked the way it changed the look and feel of the site, but it still needed something. Back to the css styling drawing board, I rounded the corners of the product excerpt boxes and sidebar information widgets, adding drop shadows for greater depth and dimension. This wound up adding a little extra to the original estimate I have given her, but she was so happy with the way it came out that she didn’t mind at all. The bonus was that the theme developer himself gave us a lovely compliment on our customizations!

tifstradingpost.com Tif's Trading Post - About page

tifstradingpost.com About page, showing the output of the Yoast Local SEO plugin in the sidebar

tifstradingpost.com Tif's Trading Post - Shop

tifstradingpost.com Shop page. This theme provides useful Compare and WishList features for the convenience of shoppers.

tifstradingpost.com Tif's Trading Post - Product page

Individual product page in the ecommerce section of the site. There is room below for a detailed description, which Tiffany uses to post large images of the item at various angles so its appearance and condition are no mystery to potential buyers.

 

silviatrujillo.com 12-2015

When Silvia Trujillo hired me to do her original website, silviatrujillo.com, I was delighted. It was a joy working with the images of her artwork. The main site was created in html, with a companion WordPress blog. She used the blog frequently to share newly completed works and to announce her classes and workshops. In 2015 she decided that she wanted to combine them together, converting the html site to WordPress while preserving her blog. This is how her existing website looked before we got started:

silviatrujillo.com Home page – Before

silviatrujillo.com - Artist Silvia Trujillo Home Page screenshot

Home page of the original silviatrujillo.com, created with html

silviatrujillo.com Home page – After conversion to WordPress

This conversion involved several 301 redirects to preserve the search engine ranking she had accumulated since the first version of the site was launched and to avoid visitors winding up on a 404 Not Found page when clicking older links to her site. Silvia opted for a white background this time, and chose a lively web font to customize her headings. Her home page includes image blurbs that link to the various sections of her site, a call to action with a link to her contact page, and a footer menu.silviatrujillo.com : Silvia's Studio Home page

Gallery Pages

The gallery pages in the previous iteration of Silvia’s website were similar, with image thumbs on a black background opening a larger version in a lightbox when clicked. However, it is now possible for her to manage the images in her galleries herself. Each gallery of her artwork now includes a contact form at the bottom, encouraging visitors to send an inquiry the moment they find a painting they love. Silvia has one painting she considers essential to her brand, so we used that image as the background for each instance of the contact form throughout the new silviatrujillo.com. We used excerpts of her paintings as backgrounds for all her page headings to add character and a glimpse of the detail of her excellent brushwork.

 

silviatrujillo.com : Silvia Trujillo Gallery with lightbox enlargement Silvias Studio Blog

When combining an html site and blog, many steps that would otherwise be crucial are eliminated. This makes the improvement of the site’s user experience and search engine performance more efficient because the WordPress framework already exists to build upon. There’s no getting around the 301 redirects, but it still takes a little less time than taking a stand-alone html site mobile. This leaves more time for redesigning the site and any content updates, search engine optimization, and beefing up of security features that you may need or desire.

Silvia’s original blog was created with the Atahualpa theme for WordPress, a popular theme with lots of options, but is not responsive for a mobile-friendly blog. When incorporating the html site into her blog, we switched to the Divi theme. This allowed us to use a masonry style (like Pinterest) for post excerpts and provided a beautiful mobile-friendly display. The overall appearance of her blog page is so much more attractive now! Here are screenshots of Silvia’s blog before and after the conversion:

Silvia’s Studio Blog – Before

  • Social sharing and follow features
  • Complete posts
  • Black background
  • Not responsive for mobile friendly display

http://www.silviatrujillo.com/blog/ - before swtching theme to Divi from Atahualpa

Silvia’s Studio Blog – After

  • More images
  • Less clutter
  • Improved social sharing and follow features
  • Pinterest-style post excerpts with featured images
  • Bright and colorful new presentation on a white background

silviatrujillo.com : Silvia's Studio Blog

Silvia got lots of good feedback about the renovation of silviatrujillo.com on her Facebook page, and was very happy with the results herself! Another satisfying project completed.

pegismith.com 12-2015

I had always been a huge fan of Pegi Smith’s paintings and had been slowly getting to know her over the past five years or so, so when she asked if I could take over the maintenance of pegismith.com from her previous webmistress, who was retiring, I was delighted to accept the opportunity. After we had worked together for a couple of years, I let her know that maintaining and adding content to her website was taking more time than it should due to the difficulty of the code, and that it would perform better overall if it were mobile friendly. She took quite some time to think that over, so when she called and said she was ready to convert her website, it came as a bit of a surprise. Immediately my mind began creating a fabulous site to frame the gorgeous dreamscapes created by this talented woman!

The existing version of pegismith.com was quite extensive, but it had become dated in more than one way. I was so excited to convert it to WordPress so it wouldn’t cost so much to maintain, and to provide a beautiful setting for her artwork. It took a while to get to that point, however, as a major battle with Yahoo over her domain and email had to be won first. That was a hard way to begin, but once we got past that major bump in the road, I went to work with great joy. I was determined to customize just about every detail possible throughout the site so it would be an appropriate reflection of her personal beauty and talent, attention to detail in her work, and deeply compassionate personality.

pegismith.com Full-Featured Home Page
pegismith.com home

pegiamith.com Home - menu open

The customized color scheme for Pegi’s site extends to the dropdown menu, shown above. We also added a nice web font to personalize the headings, and Pegi drew up the concept for her new logo, which I fleshed out and added to the site for her. Pegi is also a very accomplished violinist, accounting for the clef that represents her second initial. You can see how extensive her portfolio galleries are! There’s even more than you see here…and that means a LOT of art images to prepare! Her previous site was quite extensive, so in addition to many, many art images, there were also many, many 301 redirects to wrangle. But I just could not bear the thought of Pegi’s site losing traffic from people following old links only to find a 404 Not Found page, and so the search engines wouldn’t demote the page rank of her site, which had been online collecting “link juice” for many years.

 

Additional Pages

pegismith.com about page

Art Gallery Pages

pegismith.com gallery page

pegismith.com Blog

Blogging is a real asset to your website and extends your efforts at search engine optimization in important ways. Many artists are not fond of the idea, but if you really want to extend the reach of your announcements and get your artwork in front of people who haven’t seen it before, it’s an effective part of the plan that you should consider. I don’t feel that artists need to adhere to the frequent schedules that marketing experts advise for other businesses however. I feel your most important tool of your trade ins your creative mind, and anything that shuts it down is a liability, not an asset. But if you win an award, have a student that goes on to do really well with their art, get selected for an exclusive art exhibition, or have another achievement that’s meaningful to you…write about it! It doesn’t have to be a long, drawn out essay, it can be just an announcement with a picture (always with the picture!!). Just write when you have something to write about, don’t wait too too long between posts, try to write with a friendly, inviting “voice,” and you will be fine.

pegismith.com blog

Soon Pegi will be writing her own posts on the blog at pegismith.com, but since she has a tendency to come creatively alive late at night, we wanted to have her blog page ready for action so she can begin at any time.

Contact Page

pegismith.com contact page

lindaabblettwatercolors.com 12-2015

Linda and I met when she became a member of the Art Presence Art Center, where I serve on the Board. We had gotten together around that time for a consultation on her existing website, lindaabblettwatercolors.com, which had been created by a close friend using GoDaddy’s Website Builder. The site was pretty (due to her lovely watercolors), however her images did not have any metadata not visible copyrights, and the site was not responsive, and therefore not mobile-friendly. It did not have an effective way to share to social media, and the shop section had basic PayPal buttons. Serviceable, but not ideal.

A year or so later, she and her husband came to see me again. Don told me that he wanted Linda to have a means of marketing her paintings and upcoming art classes that would serve her long after he was gone. It was so sweet to see how concerned he was about his lady’s future! We decided on a custom website with an ecommerce shop built with WooCommerce for her original paintings and prints, complemented by a Mailchimp newsletter account and Pinterest site. She liked the sites I’ve made using the Divi theme, and when I assured her that her website would be as individual as the others she had seen, she decided that was what she wanted. We upgraded her hosting at GoDaddy to their new Managed WordPress hosting, which was offered at a very reasonable introductory rate.

As with the redesign of any existing website, 301 redirects were necessary to preserve the SEO value that lindaabblettwatercolors.com had accrued during its lifetime. When there are many pages on a website, this can take time, but it’s very important! Never skimp on the redirects, or you will find your SEO/page ranking goes down and people following older links to your site will find a 404 Not Found page instead of your beautifully redesigned website.

As the final touch on her new website, Linda created a beautiful logo from her initials, which I tidied up and placed in the top navigation bar. It really makes the site hers, with her own personal touch. As with other Divi sites I have made, this logo hangs below the menu bar on page load, with a drop shadow to add depth to the page’s appearance, and “retracts” into the menu bar as a visitor scrolls down the page.

lindaabblettwatercolors.com Home Page

lindaabblettwatercolors.com Home page, complete

lindaabblettwatercolors.com Home page. Note the elegant web font we used for the headings, complete with drop shadows and custom link text colors for legibility against image backgrounds. This warm and friendly Italian woman seemed to me best “described” in color with a rich red. I chose the shade to coordinate nicely with the greatest number of her paintings, and balanced it with a clean white background to keep the overall look from being excessively rich. For artist websites I like to feature the artist’s work wherever possible, so I began the page with a fullscreen welcome that has a crop of one of her paitning in the background, followed by a brief introduction and portrait of the artist, blurbs illustrated with her paintings and linked to the various sections of her site, and wrapped the page up with a customized contact form using yet another painting for the background.

Portfolio Gallery Landing Page

lindaabblettwatercolors.com Paintings landing page

This is the landing page for Linda’s portfolio gallery. Such a page is not always necessary, yet it can be a great marketing tool when optimized for the search engines properly. Providing such a page for friends, family and followers to share makes it easy for new prospects to get a quick glance at an artist’s style, range of work and favored subjects so they can then navigate quickly to what interests them most. A call to action at the bottom encourages visitors to delve into the online galleries of her artwork. A contact form at the bottom of each gallery page makes it easy for them to send an inquiry when they find a painting in the artist’s catalog that speaks to them. Visit lindaabblettwatercolors.com to see how it all works together live!

E-Commerce Online Shop

lindaabblettwatercolors.com Shop

The shop at lindaabblettwatercolors.com is fairly simple. Since her galleries are organized by subject, we decided that arranging her work alphabetically in the shop would be a good treatment that would not favor any one painting of subject over another. I often recommend the Nested Categories extension to WooCommerce for organizing a shop’s categories, but it really wasn’t needed in this case. The shop is paginated so shoppers don’t have to do a lot of scrolling to find what they’re looking for, and each image is linked to the individual painting’s page, as seen below.

lindaabblettwatercolors.com individual shop item page

Writing Services

Linda had hoped to do the writing for lindaabblettwatercolors.com herself, but found she was so busy as the holidays approached that she never could quite settle her mind down enough to concentrate. As writing is one of my specialties, I told her not to worry and did the writing for her. Naturally this does add time and therefore expense to a project, but the results can be very worthwhile. I found that my search engine optimization on this site was the best I had done to date, and my writing had a lot to do with the results. If you are an artist who does not feel writing is one of the items in your basket of talents, or if you are otherwise in need of professional writing for your website and/or other marketing and promotion materials, please consider letting me do the writing for you.

Writing captions for paintings in an image gallery is one thing, and writing the text for their product pages is quite another. I winged it on most of Linda’s, and in the end she had very little she wanted to add, change or correct from my original copy. You may find some of the intro text at the top is duplicated in the product description further down the page. This ensures the search engines have the 300 words per page—with key words and phrases repeated a couple of times—that they need to rank the page well and to include it in search results appropriately…without making such a large block of text that no human visitor wants to read it at all! If you find that the text I write seems redundant, that’s why—the search engines want to see the main keyword for the page repeated in the page’s url, the page title, at least one primary heading, and a few times in the text. I do my best not to let it seem contrived, but if I am not provided with much text it can be a challenge. If your paintings or other items of interest have a story of any kind, or details that might be of interest to a buyer that there’s no way I could know, please make sure I have something I can work from so it is included. This makes each item even more unique, stimulates interest in the reader, and helps to satisfy the needs of the search engines without seeming so repetitive. I realize it’s a lot of work! But the more you can provide me with, the less it will cost, and the results will be much more effective.

butterflysweb.com 5-2015

butterflysweb.com Home page

Butterfly’s Web Home page. Visit it live at www.butterflysweb.com

The lovely and talented Héloïse Gerteiny of North Carolina was referred to me in 2008 by my mother, who met her when visiting my sister in Charlotte. Our first collaboration was a website to promote her brick and mortar boutique, Butterfly’s Jewelry and Treasures. Héloïse is fearless and intensely creative, and gave me lots of artistic freedom to experiment on the details of what became the most beautiful site I had done to date. Though she is all the way across the country from me, we had fun working together by remote and found each others ideas very inspiring. As she also worked for Bank of America, in time that endeavor faded and the site eventually went offline, but we remained in contact as friends, touching base from time to time.

 

In early May of 2015, that changed when she contacted me with her thoughts for a new website, butterflysweb.com. I’m always learning something new about this multi-talented woman, and this time it was that she actually makes yarn as well as creating things with it. Combinations of machine-spun and standard dyes, machine spun with natural dyes, and handspun with either type of dye all keep her busy filling orders for knitters and crochet enthusiasts. She markets the first type, created mostly to match sports team colors, through a shop called Charlotte Yarn. The customers who love those offerings are very different form those who appreciate her hand- or machine-spun yarns colored with natural dyes, many of which she makes herself from plants that yield dye that grow on her farm. Her beautiful colorways are inspiring..the beautiful colors achieved with natural dyes are truly amazing! So this website would be devoted to promoting her naturally-created yarns.

We had used a modified version of her original butterfly logo on Butterfly’s Jewelry and Treasures, and we modified it again for Butterfly’s Web. Once we had established the site’s structure, I created the menu and added her logo to the top navigation menu bar. It was quite small, and Héloïse wondered if it could be displayed with a greater height than the menu bar. A little discussion with the Divi developers at Elegant Themes gave me the information I needed to customize the logo’s size and behavior, which added a subtle movement and dimension to the site and made her very happy.

butterflysweb.com Retracting logo

This image shows the retracting logo, further customized with a drop shadow. I now use this style for most of the sites I create with the Divi theme.

 

 

 

 

 

 

 

 

 

 

 

The home page features a slider with more of her beautiful photography and welcomes visitors to the site with a peek at her yarn which leverages the visual interest of a parallax background, along with introductions to the other pages on the site and a contact form. Parallax is a bit challenging to explain without a visual reference, so I ask you to visit Butterfly’s Web to see it in action.

The About section for this site comes in three parts. The first page introduces the artist’s philosophy and how she extends it to her business, along with a little about herself. What makes this page really special is the slider, which includes beautiful photographs and minimalist informational text that illustrate her process of dying yarn with natural dyes. Next is a page devoted to a discussion of natural dyes and their care and handling, with more gorgeous shots illustrating her work and a contact form with a colorful yarn image in the background. Rounding up the About section is a page title Our Commitment. This page, created with a massive parallax effect to accentuate the image of the dog with the Great Spinning Wheel on a background of delicious spring green foliage, introduces her husband “the Zoomaster” and the animal charities they support, which visitors will also support when they purchase her yarn.

Intuitively I felt that Héloïse’s experience in the corporate world, which she was trying to escape with this venture, would serve her well when it came to blogging. Where many artists are reticent to begin, she leaped right in a proved me right! With each post her main blog page becomes more beautiful, with her lovely photography and thoughtful writing making it very worthwhile to follow. Artists, take notice! I cannot overstate how much this helps your site gather “gold stars” with the search engines and keeps visitors coming back for more, as well as giving them timely content they can easily share with their own networks.

Generally all the other links in a navigation menu are information gathering, and the Contact page comes last. Butterfly’s Web is no exception, but there is one external link worth noting, the Boutique link. Héloïse made the choice to sell her work at Etsy.com, and the Boutique link leads visitors there. While I’m always happy to create an ecommerce shop that’s incorporated into one’s website, selling at Etsy can be a smart choice for people whose work will not be buried in the depths of the more popular categories there.

Where the contact page on most sites is visually uninteresting and purely functional, Héloïse’s contact page is especially appealing. I encourage future clients to consider providing me with an image or two so I can dress theirs up as you see below. This will help “nudge” visitors to go ahead and make a connection with you, one of the primary objectives of having a website!
After thoroughly enjoying myself throughout the process and making this valued repeat client happy once again, I completed the site in mid-May, barely over two weeks after getting underway!

butterflysweb.com About page

This screenshot of the butterflysweb.com About page shows the slider we assembled to illustrate Héloïse’s process of hand-dying yarns with natural and wildcrafted dyes.

butterflysweb.com About Natural Dyes page

butterflysweb.com About Natural Dyes page, with illustrations and discussion of the care and handling of yarns colored with natural dyes.

butterflysweb.com Our Commitment page

butterflysweb.com Our Commitment page tells readers about the charities they will support by purchasing beautiful, natural, artisan yarns from Butterfly’s Web.

butterflysweb.com blog

I had a feeling that Héloïse would take to blogging with ease and her own characteristic grace, and her beautiful blog page tells me I was right! Visit to see it live and you will see that it keeps getting better with each new post.

butterflysweb.com Contact page

butterflysweb.com Contact page makes what’s otherwise a boring but necessary feature compelling and beautiful!