Web Design and SEO Blog
For this website, we built a clean, single-page scrolling site that includes a home page, services with service detail, about us and contact us form. The new site will allow Holt much higher visibility in search engines, and shift his target market to commercial refrigeration jobs by repositioning and optimizing his keywords and overall site content. We invite you to check out the new site here.
During a recent redesign of some of our corporate stationary, our designers created a simple Photoshop template for presenting stationary and we thought we’d make it available as a tool for graphic designers who may find it helpful for their own projects. Our template contains a letterhead, business card, and an envelope with a few labeled smart objects that a designer could update in seconds to use your own branding.
Please use this template and let us know how it works out for you! We’d love to hear your feedback.
1. Recognizable. Because the human brain is hardwired to recognize visuals, the addition of a simple, easily-recognized image can make it faster for your site’s visitors to find a feature they’re looking for. If the icons’ meaning is easily understood, they will add clarity: there are near-universal icon standards for concepts such as shopping cart, search, back, and download. Using an icon that is poorly understood or even ambiguous, however, can add confusion or even frustration if an icon does not mean what someone thought it did.
2. Consistent. Your icons should look as though they were crafted by the same hand — not cobbled together from a half-dozen clipart libraries. Just as using twelve fonts leads to visual chaos, using inconsistent icons looks unprofessional and disorganized. Your icons should be an extension of your branding and website aesthetic.
3. Sharp. Building icons for a modern website means they need to work well on the ultra-high resolution displays of phones and tablets — Apple’s retina devices, for instance. Icons that were only designed to work well on computer screens often end up looking fuzzy on phone screens, so special consideration is needed to use icons that look great wherever they’re being seen.
To deploy consistently great icons, our designers use a combination of professional icon libraries as well as vector authoring tools to create custom icons and extend the visual language being used for our projects. Here are a couple sites we’ve built that utilize an extensive library of both custom and sourced iconography —
Bozeman Yellowstone International Airport
The Bozeman Airport website is host to an extensive menu. To help differentiate each menu item, our designers carefully evaluated options that would not only fit in with the aesthetic of the site, but also guide users to where they want to go in the navigation.
Silver Screen Insider
For most of our projects, JTech creates something called the Icon Suite, which displays the site’s brand in a number of scenarios:
1. A “favicon” shown in browser address bars, history, and reading lists.
3. A Windows 10 favorites tile that shows up in the metro style cards.
4. Icons that show on tabs, bookmarks, and much more.
The Icon Suite is custom designed by our team to add an extra layer of polish on our advanced sites.
Professional iconography is an important factor in adding polish and usability to any website. Professionally executed icons can help a visitor navigate and better interpret its features and should be carefully designed or sourced to best fit the particular needs of your website.
Since the conclusion of the trial period, only 5% of Tweets have been longer than 140, and 2% over 190, however, the extra characters decreased the amount of time user’s spent editing their Tweets to parse them down. This has boosted user engagement on the social media site, leading to an increase in Likes, Retweets and Mentions. It is ultimately this positive engagement — good business for Twitter — that solidified their decision to keep 280 characters around permanently.
So go ahead! Tweet away without worry about running out of room. Put Twitter to good use and engage your customers with more meaningful messages.
Like real time data, these times are estimated by collecting a census from those who have opted in to Google Location History and are logged into their Google account. Over the course of multiple weeks, Google will calculate the average time visitors had to wait before being seated.
So, the next time you want to know how long you’ll be at the host stand before getting your food, Google Places can tell you.
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.