Web Design and SEO Blog
We wish all of you a happy and healthy Thanksgiving Holiday and hope you enjoy it surrounded by your family, friends and pets.
Our team designed and built a beautiful, mobile-responsive website for Cipriani Construction. It includes a home page with sweeping imagery of their work, a services section outlining their offerings, a portfolio of work, about us section and an interactive form to contact them. Not only did our team complete this project within a six week turnaround, but it was also affordably-priced within the client’s budget range. We invite you to see the completed site here and contact us if you are interested in a similar project!
A clean navigation allows users to easily move around your site without getting lost or confused. For Health Works, we eliminated repetitive menu items and organized the rest of their content based on data about which parts of the site were receiving the most traffic. The new navigation focuses on serving prospective and current students while improving overall visitor engagement, page visits and conversions.
Page Title Optimization
As we worked through Health Works Institute's site, we also reviewed the page titles. Page titles not only inform visitors where they are in the site, but are vital to SEO (search engine optimization). For example, “Health Works’ Massage Therapy Program” is much more informative and will yield more successful Google referrals than “Massage Therapy.”
Fixing Broken Links
One drawback to an aging site that has been worked on by a handful of different staff members is the risk of broken or outdated links. We tested the entire site for broken links, updating those that needed redirection and deleting those that were no longer needed. These broken links — which lead to 404 errors — can count against your site in Google's rankings as well as frustrate your visitors.
As the school semesters pass, content needs to be changed on the Health Works website. To best manage these monthly changes, we built them a maintenance plan tailored to their specific needs. They have an allotted amount of time per month for any necessary changes or edits for stress-free content management.
Whether you want to start from scratch with a brand-new custom website, or need help with WordPress or other templating systems, we do not shy away from meeting the needs of our clients. Our team was able to help Health Works attract more customers and make their site more navigable, and build a custom maintenance plan that will benefit them for years. Learn more about our WordPress services here.
Follow JTech on social media to enrich your online businessJTech has been vocal on our Web Design & SEO Blog for a few years now, publishing tools, tips, industry news and company announcements – we hope you find these posts helpful and beneficial. We also post summaries of these articles on our active social media sites: Facebook, LinkedIn and Google+.
Some benefits to adding us on social media:
- Get notifications whenever we post a new article.
- Summaries of the most recent and relevant web development and digital marketing industry news so you don’t have to sift through tech websites.
- Photos of our office cat, Musette.
- Be the first to view our new website projects as they go live.
- Marketing and other business tips for every industry to help your growth and success.
- Office news such as new offerings, employees and holiday closures.
- It helps us show up prominently in search engines – we appreciate your help!
- Much, much more!
Follow us on any or all of these platforms to stay on top of our business tips:
Photoshop is the primary software our web designers use for interface design and our production schedules can be tight, requiring us to turn art mockups around quickly. Our team spent some time refining efficient web design workflows in Photoshop and would like to share some of our useful tricks with likeminded designers. These workflows integrate well with our Atomic Design process, increasing the productivity of our design team and increasing confidence in the consistency of our work by the time it reaches developers.
Shortcomings of Photoshop
Photoshop was originally designed for manipulating photographs and raster images. Therefore it doesn't offer a full set of tools for managing layout consistency without some creativity — especially when compared to software such as Adobe's InDesign, or even Bohemian Coding's Sketch. A notable example is Photoshop's color swatches, which don't work like swatches do in InDesign — you can't update a color swatch and have that same color update everywhere it was used in a Photoshop document.
A Consistent Color Palette
Ordinarily, in order to change every instance of a single color in a document, you would need to select every layer with that color and make changes to them one-by-one. When managing a large layout project, this process becomes tedious, creating an opportunity for details to slip through the cracks — resulting in inconsistencies to be uncovered by our developers when it comes time for them to execute our vision.
Smart Objects to the rescue! To define a color for reuse in our document, we start by creating a new document and drawing a rectangle the size of our canvas using the rectangle tool in Photoshop. We then apply a color to it and save that document. To use it as a Smart Object we open whatever document we're working on, choose "Place Linked" from the file menu and add it to our document, where it appears in the Layer panel as a Linked Smart Object. Whenever there's an element that uses that color, we place the Linked Smart Object one layer above it and create a clipping mask. Anytime you update the color in the original document — which you can get to quickly by double-clicking it in the Layers panel — the Linked Smart Object will automatically update everywhere. In addition to ensuring consistency throughout our project, this process allows us to rapidly experiment with different color palettes.
Reusable Content Blocks
Most websites reuse chunks of content across different pages of the site — whether it's a header, footer, or just a group of objects like a sidebar, set of recommended articles, or news feed that appears on many pages of the site. These repeated elements are the foundation of a consistent product. Each of these objects can be saved as its own document and linked to in the same manner we used to manage color consistency.
Icons and Images
Embedded Smart Objects: Some elements are mostly reused within a single page or document — in which case creating an external file to link to feels like an unnecessary complication. Any layer or layer group can be converted to a Smart object by right-clicking it in the Layers panel and choosing "Convert to Smart Object." This allows you to duplicate the object as many times as you want throughout your document, including resizing or skewing individual instances of the object, without losing your ability to edit and update the original from a single place — just double-click any instance of the object in the Layers panel to access the original layer or layer group for editing. This works well with our Icon Suite creation process and allows us to manage multiple views of a single object (we preview each icon at different sizes) within a document — you can read more about the Icon Suite here.
When pasting an object imported from Adobe Illustrator, Photoshop offers the ability to place the object as a Smart Object — preserving all its vector information. If you wish to make future changes to the object, double-clicking it in the Layers panel will take you back to Illustrator to do any editing. We've found this to be extraordinarily useful for managing icons to be built for various responsive and desktop breakpoints — keeping them as vectors is necessary so they can be built as fonts or SVG files when the site enters development.
Because we're in the business of making websites, we're often called upon to mock up our layouts on a phone, tablet, or larger screen. In order to make this more tangible, we sometimes present a tableau with the website in use — a computer on someone's desk, a phone in someone's hand, and so on. To present this concept effectively, we may skew the layout to match a camera angle and simulate reflections or depth of field. By embedding our original layout as a Smart Object, we can rotate, skew and apply these other effects to the Smart Object while still saving the ability to update our mockup later when the design inevitably changes.
Smart Objects have utility in almost every website we build, from simpler presence websites to larger web app projects, and fit in well with the concept of Atomic Design. Colors and iconography are two of the most basic elements — the atoms — of Atomic Design and defining them early on as Smart Objects helps to set a strong foundation for the rest of the project. Creating a central repository that we can update allows the molecules and organisms to derive directly from the atoms, rather than a designer merely attempting to apply the atoms consistently.
It takes a bit of setup to create the Smart Objects and clip them to every object throughout a document, so it can feel slow in the beginning. Once they are applied, however, our process is much more efficient. This work is especially useful for projects where you're going to be building a large set of documents using the same design system — if you're only using a handful, the setup time for color consistency may be greater than the amount that's saved. Embedding or linking icons and reusable content chunks as Smart Objects, however, is probably always worth it for the drastic reduction in potential for inconsistency.
When you're updating colors and replacing icons manually, there's always the possibility that you miss an instance that needs to be updated, which might cause some confusion or result in obsolete styles being used in the final website. Utilizing Smart Objects in Photoshop builds confidence in the consistency of the work our designers deliver — and allows them to collaborate better with each other. For the team as a whole, these Photoshop tools are just another way to improve the efficiency of our workflow.
One of the most important ways you can attract new clients is by having your site highly ranked in search engines, such as Google. One important way to improve your ranking is through link building — the effort of getting other business, directories, and organizations to link to your website, whether it be a link to your home page, a blog post, contact form or other. This boosts your search engine ranking, helping to drive additional traffic to your site from external sources. In this article, we will discuss link building techniques as well as “black hat” tactics that you will not want to participate in, as not all link building is helpful.
How to link build.
First, establish a goal. If you want more people to read your blog, you’ll want to find a way to market your blog posts to a wider readership. To do this, you could:
- Contact high-traffic publishers to be a guest writer to attract visibility for your work.
- Participating in the comments forum and look for opportunities to share your business’s resources in the form of links.
Another example of a link building goal would be to market yourself to local businesses. You can do this by:
- Ensuring your website is in all local directories.
- Networking with the local chamber of commerce or industry associations to gain membership links.
Link building techniques to be wary of.
Not all link building is kosher, and practicing poor techniques can land you in trouble with search engines, having the adverse effect you intended. Here are a few examples of what we call “black hat” tactics:
- Link exchange scams — these scams occur when you are solicited to link to a site in return for a link back to your site from a very highly ranked PR site.
- Injecting hidden links into a website that is not yours.
- Sponsored backlinks — offering incentives to a company so that they will link to your site.
Whether you are doing your own SEO work, or have hired a professional to do it for you, it is important to keep your site in good light with Google and other search engines.
Link building is a great way to boost your search ranking and increase visibility to your target markets. In order to effectively deploy a successful link building campaign, be sure that you are promoting your website by creating your own unique, personal content that engages your audience. If you are in need of link building help or are unsure if your current campaign is paying off — we’d be happy to help.
Twitter hopes this will encourage more people to Tweet more often, stating: “When people don’t have to cram their thoughts into 140 characters and actually have some to spare, we see more people tweeting,” Twitter said in a blog post. Additional characters will also allow flexibility for different languages — for example, there are far fewer characters in Chinese than English, causing many messages to be cut off in translation. Whether longer Tweets will allow for greater expression or additional controversy is yet to be seen as this feature is tested by its users.
Pageviews — Pageviews are tracked every time a page is loaded. This particular metric is a great way to gauge popularity of topics, as you can see how many times people are opening specific blog posts.
Time on Page — Just as it sounds, time on page tracks the amount of time a visitor spends on a particular page. This metric can determine useful pageviews (when people are actually reading the blog) from the less useful ones (when a visitor stumbles there by accident, and immediately leaves).
Bounce Rate — Bounce rate is the percentage of visitors who leave a website after only having visited one page. This could be good or bad, depending: they could have found what they wanted right away, or landed on your site by accident and left immediately. Either way, bounce rates on particular blogs are important to track, since you’ll want to see if your blog is attracting visitors from external sources as well as how engaged they are with your content.
Conversion — A conversion is the user taking the action you wish them to take. In the case of a blog article, perhaps you set a conversion goal for the user to contact you. Where are visitors going after reading an article? If the article is selling your visitors on contacting you for services, then you’ll want to carefully track how many of those readers are immediately going to your contact us form.
Analytics is a powerful tool for content marketing. While tracking your site in the program as a whole is important, there are certain metrics particularly useful for your business’s blog. They can determine its worth, topics that are paying off, and which are converting visitors to customers.
Google makes changes to AdWords to counter Safari’s Tracking Prevention feature.Over the summer, Apple’s Safari browser launched a new tracking prevention feature that protects customers from being targeted by intrusive third-party cookies. In summary, the browser purges user data after 24 hours so that the sites they’ve visited cannot use it for price gouging or advertising purposes. This feature inhibits Google AdWords from accurately tracking ad clicks and conversion attribution from Safari users, motivating Google to make changes to their popular advertising program.
Google is moving quickly to make changes to AdWords so that they can reap the benefits of Safari user data while still staying compliant with Apple’s Intelligent Tracking Prevention guidelines. In September they enacted a new cookie, called the _gac cookie, which stores click data from linked AdWords accounts in Analytics when auto-tagging is enabled. With the recent change, _gac will be set onto the advertiser’s domain, so that it is no longer considered a third-party cookie and therefore in compliance with Intelligent Tracking.
What you need to know as an AdWords user:
- Analytics and AdWords accounts that are linked and have auto-tagging enabled will see no change in reported conversions from Safari.
- The new _gac cookie on an advertiser’s domain is now considered a first-party cookie which becomes acceptable to Apple’s ITP.
- For those that don’t link their accounts or disable the new cookie, Google will still be able to record conversion activity that occurs within the initial 24-hour period. But after that, it will use statistical modeling based on browser history to record conversions from Safari in Adwords.
- This modeled conversion data will be delayed a few days are but included in AdWords conversion columns.
There has been a lot of push and shove between advertisers and publishers lately. Safari’s attempt of protecting its users has irked Google and the rest of the ad industry as they fight against attempts to block cookies and other methods of tracking conversions. Meanwhile, as an advertiser, you should focus your efforts on creating only non-intrusive advertisement, not only so your business does not get flagged for poor marketing tactics, but to keep the user experience with your brand a positive one and maintain quality methods for evaluating advertising results.
Test your links — Are there any broken links on your site? It’s a good idea to test your site and its links from time-to-time to look for broken links or unwanted 404 pages before your customers find them.
Check your contact form — Your site’s contact form is a great way to convert visitors into clients. Make sure it is working correctly and submissions are arriving at the right email address. You don’t want to miss inquiries because of a minor tech issue.
Send correspondence — Sending out a card, advertisement or coupon this time of year is a great way to get people to your website! A combination of the right design, marketing and copy can effectively create a mailer that is sure to attract new and old customers to your store!
Update your site content — Updated content yields better search results and keeps visitors engaged. Post a blog or update your keywords or site imagery for a quick facelift.
Utilize social media — Use your business’s social media to get people excited for the upcoming season. Announce a sale or other incentive and drive the traffic to your website.
If you are expecting a busy holiday season, now is the time to start preparing. Utilizing your site can be a cost-effective way to boost your traffic, sell more product and market your services. If you need help deploying any of the ideas listed above, we’d be happy to be of service!