Web Design and SEO Blog
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!
The new phone system is over a SIP (session initiated protocol) network and offers HD sound quality, improving the input and output of our phone calls. Other features include:
- Conference calls —We can better conference clients in with multiple team members when necessary and our slick conference room phone should sound much less like we’re in a tunnel.
- Voicemail — Although we prefer to speak with you the moment you need us, once in a while one of us will be unavailable. In addition to another team member taking your name in number, you now have the option of leaving a voicemail for the person you are trying to reach, if that is your preference.
- Hold music — Everyone loves that cheesy elevator music when you are placed on hold. Although we avoid it whenever possible, you’ll now have the pleasure of listening to some phone jams while we are working to transfer your call. The sound is so clear, it’ll feel like you’re in a real-life elevator.
Next time you need to get ahold of us and it sounds like we’re in the room next to you — you’ll have our new phone system to thank! If you need anything, we’re available at 406-586-7100 or toll free at 888-586-3000.
Laundry Loops: Printable price quote
Laundry Loops provides a clever laundry management solution for industrial laundry facilities. If a customer on their site is not ready to place an order, their website can generate a PDF of an order quote directly from the checkout stage of their shopping cart. This is helpful since many of Laundry Loops’ customers might need to bring the quote for their desired products to their accounting department prior to purchase.
Silver Screen Insider: Downloadable Scoreboard
Silver Screen Insider is an online source for movie theater owners and movie lovers, providing a database of movie information, marketing materials, and much more. One of the many resources they provide on their site is a downloadable Scoreboard of new release statistics, including box office forecasts and weekly overview of gross results. The Scoreboard is consistently updated throughout the day with the most accurate and recent data used by those in the movie theater industry. To manually update such a document would mean hours of employee effort, and the document would still be out of date, whereas server-side generation allows the document to be created in PDF form instantly, each time a customer downloads it.
My JTech: Work order generation
Our own employees use server-side PDF generation when processing work orders for our clients. Our production manager enters the necessary information for the work order into our system, and the “Work Order PDF” function produces the clean, formatted document we send to the client and use for our own reference. If there is a mistake on the work order or last minute changes, it is easy to go back into My JTech, edit the data and generate a new PDF straightaway.
Server-side PDF generation can simplify everyday business tasks, producing a professional document that can be used by your team or customers. If you are interested in adding this functionality to your website or need help automating any other daily tasks that may save you time and money, contact us — we would love to help make your workday more efficient.
Why open two merchant accounts?
There are many rules and regulations when it comes to processing payments and while there are cases where you will need multiple merchant accounts in order to be underwritten, there are several business reasons to separate your accounts as well. Here are a few other situations when this may be desired:
- Accounts for specific services — Some businesses prefer to separate segments of their business into separate accounts, whether to keep income separate or to keep track of specific products. At JTech, for example, we have a separate merchant account specifically for our clients' domain renewal transactions.
- Avoiding chargebacks — The description listed on a merchant account is typically the same as what will show on a customer’s bank or cardholder statement. If a customer doesn’t recognize the name that appears with the transaction, they may initiate a chargeback (costing you money and time). Some merchants can open another account to help avoid this, making sure to name it something familiar that the cardholder will recognize, which can reduce the risk of disputed charges, keeping their customers at ease when they see their statement.
- Different business models – Businesses accepting payment from more than one location, such as in-store (where the card is usually present) and online (where the physical card is not present.) Depending on the type of business and the products being sold, two merchant accounts might be required by your processor and/or acquiring bank.
Merchant agreements are a long and complex subject, and it is important for you to understand the risks associated with your products and talk openly with your payment processing partner to ensure you have the right accounts set up. We invite you to read our in-depth article about credit card processing, and would be happy to put you in touch with our merchant services provider and business partner, Matt Risley at REM Solutions. All website projects with JTech include an analysis of your merchant account to find out the very best setup for your needs. Feel free to give us or Matt a call if you have any questions.