Web Design and SEO Blog
Mar201519Industry News, Optimization, SEM, SEO, Google
If you’re one of the 46% of internet users(1) who primarily use their mobile devices to search the web, you know the drill: you hit a link and it brings you to a website not optimized for your device. You can’t zoom correctly, the words are too small, the pages load at a snail’s pace or the webpage fails to open at all.
Since the average person will only wait 4-5 seconds for a page to properly load before giving up(2), chances are, the business who owns that site has now lost a customer.
Google intends to discourage this experience by changing their algorithm, which will weed out the non-mobile-friendly sites ensuring that the ones that are not easily accessible by mobile users will hold a lower search ranking.
“This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results,” stated a Google webmaster in their February announcement.
“Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.”
Not often do we hear an announcement from Google with the words “significant impact.” And with the amount of business-to-business interactions that take place on mobile devices, it is vital for a website to be accessible from an array of different devices.
Google has been sending out notifications to those who are not optimized, warning them of the deadline to improve their standing along with tips about how to get on the mobile wagon. They have long annotated search results with a “mobile friendly” tag, but only after this major change will those annotations affect the search result order.
Let’s face it, the further away from page one your website is on a Google search, the less available you are to your customers, which is a disservice to them as well as you, the business owner. Although it will take time to see how much of a change this really is for ecommerce in the long run, we’re talking about a lot of traffic. For instance: if a boot company has an outdated website, it is estimated that they will lose about 46% of customers who search for “boots” from their phones or tablets(3).
To prepare those who may “fall through the cracks,” Google has provided a mobile-friendly test tool(4) (https://www.google.com/webmasters/tools/mobile-friendly/) as well as specific tips about what makes or breaks a mobile website (https://support.google.com/webmasters/answer/6001177?hl=en).
So what makes a site passable? Here are some of the main characteristics found on an optimized website:
- Formatting: Mobile-optimized sites will automatically reformat themselves. This means the page graphics and fonts will resize to eliminate the need to zoom or scroll horizontally.
- Button spacing: Due to the popularity of touch screens, buttons and forms should be easily navigable by thumb and finger. They should not be crunched together, but spaced accordingly.
- Eliminate Flash: Some programs, Adobe Flash for example, are not supported by most mobile systems. Flash-required items may prevent an entire webpage from loading or make a major part of your site inaccessible.
- Loading times: Because a mobile device relies on internet connections of varying quality, smaller images will load much faster over slower connections, keeping your visitors engaged longer(5).
If your website was built more than a few years ago, chances are it’s not responsive to mobile devices. If your site isn’t built responsively or you’re unsure, contact your website developer or give us a call – we’d be glad to help. With Google’s algorithm changes predicted to take place on April 21, 2015, now’s the time to make your website a great experience on all devices, whether it be pad, pod, phone or computer.
(1) Lee, Jessica. (2015, May 1). 46% of Searchers Now Use Mobile Exclusively to Research
(2) Oberoi, Ankit. (2014, March 21). 5 Reasons Visitors Leave Your Website
(3) Kocher, Jill. (2015, March 15). Google to Make ‘Mobile Friendly’ a Ranking Signal
(4) Makino, T., Jung, C., Phan, D. (2015, February 26). Finding more mobile-friendly search results
(5) Signalfire. (2012, June 25). Mobile Friendly vs. Mobile Optimized vs. Responsive Design: What You Need to Know About the Mobile Version of Your Website
I will be teaming up with our web marketing and design teams and communicating with clients to produce custom creative content for their websites as well as working on blogs and announcements for JTech’s own website.
When I’m not in the office, I’ll probably be making my way up one of Montana’s many mountain peaks.
Bozeman, Montana: JTech Communications is in the process of moving all our client domain names to renew automatically. Previously, this has been a manual process that required verification each time a domain name needed to be renewed — a sometimes time-consuming process that occasionally threatened to make websites inaccessible if the domain name renewal was not authorized in a timely fashion. Using our new automated service, domains will be renewed automatically near the end of their registration period. For all domains you have registered through JTech, you will be notified 60 days before the renewal and given opportunity to decline the renewal within 15 days of expiration. If you do nothing, the renewal will be charged to your credit card and service will continue seamlessly.
JTech offers holistic web development, design, managed hosting and digital strategy services — everything you need to do business online. This new automatic domain renewal system is a further commitment to protecting your valuable domain name properties and providing the highest level of service for all of our clients’ website needs. Please contact us if you have any questions or would like assistance with this new system.
JTech Communications built a cross-platform events video streaming platform for the Fairfield Montana Schools. Our Montana web development team created an advanced web page that delivers a compatible video stream to iOS, Android and desktop operating systems.
Fairfield Schools' new custom video streaming website features a live stream when available, but also hosts archived streams for those of you who prefer to watch at your leisure: football and basketball games, special events, and more.
See what’s going on now: eaglestreaming.com
Bozeman, Montana: Our web development team is growing, and this time we're looking to expand our design capabilities and capacity by hiring a dedicated user experience designer. This new member of our team will work closely with the rest of our team members to create great user experiences.
Our ideal candidate is a skilled, vocal advocate for user experience and is able to work from a high-level on strategy and architecture as well as perfecting the minutiae and nuance of UX. Also important is proficiency at creating personas, use-cases, wireframes, and detailed documentation that provides coders all the information they need to implement.
We'd prefer a candidate with a bachelor's degree in a related field, experience designing across multiple device types, and excellent communication skills. If this position sounds interesting to you, read the full job description for more information.
Feb201517Announcements, Design, Development
We're working on a series of upgrades for the Gallatin Valley YMCA's website — the first of which is an updated color palette to more closely integrate with the YMCA's national brand and a new homepage design with improved, simplified information organization.
Other improvements are on the horizon for the Gallatin Valley YMCA site: JTech's Bozeman web development team will custom-build an interactive calendar to display events, programs, athletics, registration deadlines, and YMCA holidays. We're also adding promotional code functionality that will allow special discounts when registering for athletics or other YMCA programs.
The Gallatin Valley YMCA is a cornerstone of Bozeman's strong community, and JTech is proud to be a frequent sponsor of their curriculum nurturing youth development, healthy living and social responsibility.
Feb201510Announcements, Design, Development
Estes Park, Colorado: JTech's Bozeman, Montana website development team is collaborating with the Estes Park Medical Center Foundation to create a custom website that more comprehensively serves the goals of their organization. The Foundation's mission is to increase community awareness of the Estes Park Medical Center and to develop, manage and distribute funds to assist the Medical Center in fulfilling its mission.
The Estes Park Medical Center Foundation's expanded presence will be fully integrated with the existing Estes Park Medical Center website, and will feature an online volunteer application, opportunities to give positive feedback to medical professionals who gave high quality care, and more detailed information about the Foundation, its history, its mission and its board.
Miles City, Montana: In addition to incorporating responsive website design and a dedicated time management web app into their website, the Montana Health Network will be expanding their services to establish a strong healthcare education presence in Eastern Montana.
The Montana Health Network recently received sub-contract funding from the Montana Office of Rural Health to open the North Eastern Montana Area Health Education Center, from which they will offer on-site clinical education, mid-level health provider conferences, healthcare career education, funding for students, and more.
JTech will be building a new, dedicated section of the Montana Health Network's website to assist in their mission of recruiting, training and retaining a health professions work force committed to rural and underserved populations. We're proud to be partnering with the Montana Health Network as they show leadership addressing eastern Montana's current healthcare labor shortage.
Jan201527Announcements, Design, Development
JTech is continuing our partnership with the Bank of Bozeman to plan and develop a complete refresh of their current website. Their original custom website was developed by JTech several years ago, and we’re excited to be working with their team on a refresh to offer a new design, functionality and user experience.
A major highlight of the 2015 refresh is full responsive web design for their entire site with a brand new visual aesthetic to match their updated branding. Their website’s new responsive website design will enable easy mobile use of the website for banking, service information and interaction with our local community Bozeman bank.
Look for the release of the new Bank of Bozeman website later in 2015.
Jan201522Design, Imagery, Industry News
The disciplined pursuit of less.In 2011, I was tasked with designing a new logo for JTech — rebranding our Montana web development agency to mark a clean departure from the aging mark that had represented JTech since the 90s.
JTech's old logo.
Step 1. Taking inventory of the brand.
We took stock of what we liked about the old logo: it had a bold, stamp-like quality which gave it a strength and certainty that needed to be carried through in the rebranding. These same traits meant that it kept its visual integrity even when reduced to small sizes or given a textural treatment (as in JTech's Control Center).
On the other hand were the traits that we wanted to leave behind — for instance, the presentation of the logo as burned-in on digital parchment, matching our website's battered grimoire aesthetic. One deliberate departure we were making was away from skeuomorphism and analog metaphors in favor of a digitally native design system.
Parchment treatment of old logo, circa 2010.
Furthermore, we were ready to be rid of the ubiquitous globe used in place of a hyphen. By this time, the globe as a shorthand for "internet company" was beyond threadbare. Further simplification was in order: removing "Communications" from the logo mark afforded a greater simplicity and allowed the logo to perform better in adverse circumstances (such as the small sizes or textured treatments mentioned above).
Step 2. New directions.
How to represent JTech's evolution? By 2011, all of the symbolic representations of website, internet, and communication had been overused to a degree that made any such iconography generic. Satellite dishes, radio towers, clouds, radio waves, and globes were no longer meaningful images for distinguishing a company's purpose — which led us away from direct metaphor and towards an abstract word or lettermark using JTECH or more simply, "JT."
The lettering is presented simply on a square, allowing clean interpretations of the branding in one-color (e.g. laserprinted) scenarios or reversed on white for use as a photographic overlay in addition to the full color variation of the logo.
Step 3. Refining the character.
The original logo I designed for JTech in 2011.
We found an abstract permutation of "JT" that suited us — it had as much of a bold, stamp-like quality as the previous logo, but with a drastically simplified profile, one that reproduced well even at extremely small sizes. In the main color variant of the logo, we added visual touches that evoked our capacity as mobile web developers — strong gradients, embossing, and a background glow. These effects were de rigueur at the time, and although we were abandoning a strongly skeuomorphic design, the interfaces that we were designing at the time still had an overtly tactile quality.
When we redesigned our website, the two dimensionality with subtle depth of our logo became the cornerstone of an extended visual metaphor. Content and interactions on our website were presented via cards — two-dimensional objects — arranged in three-dimensional space. Navigating between pages would rearrange the cards, causing them to stack or fly or hover over other cards. When our new website launched, the rebranding was complete.
A recent history of design, in anecdotes.
In 2011, as we were reworking our logo, Apple was releasing the iPhone 4 to the world, with its "retina display" — the first time that a mass-market consumer device sported a display with pixels so dense as to be imperceptible to the viewer at ordinary viewing distance.
It's difficult to overstate how much of a galvanizing event this was for user interface design, but I'll make an attempt. As Apple and other manufacturers incorporated higher-density display technology into their phones, computers and tablets, design shifted towards emphasis on the beautiful, clean lines that could be expressed on truly high-resolution displays— particularly on typographic excellence.
Apple's iOS 7 user interface abandoned skeuomorphism.
The glut of display densities on the market encouraged designers to use vector imagery to create crispness and consistency across platforms; vector images on the web offer poor support or no support for blurs, glows, and drop-shadows. Skeuomorphic, textural, highly tactile design gradually fell out of favor; culminating in Apple's release of iOS 7 for their mobile devices in 2013.
At the same time, responsive web design (a term coined in 2011 by Ethan Marcotte) began to gain traction as the web design strategy of the future. Responsive website designs, shapeshifting in response to the display being used, could not employ the same pixel-perfect layout methods that had been standard for fixed-frame layouts. Instead, textual content and hierarchy was being prioritized — another reason to focus design efforts on clean lines and typography.
2014: Design is subtraction.
The revised version of our logo, circa 2014.
After years of research, JTech began to adopt responsive website design in 2013, fully embracing it by 2014. Like many other web design agencies, we're increasingly creating vector-first, resolution-independent iconography and visual assets. Richness in our interfaces is added via interaction — our interfaces animate in reaction to user input.
Refining our branding was a matter of bringing it in line with our current design philosophy — reducing it to the essence of what made it great. We still loved the form and shape of the logo, but found that it read more clearly without the embossing of the "JT" lettering — an increase of its affordance(1) as our brand mark. Decreasing the depth of the gradient in the logo added subtlety and emphasized on the logo's form over its ornamentation.
The user interface of My JTech, our content management system, eschews skeuomorphism and continues themes first described by the logo.
Our company's color palette has shifted with the refined logo; while the 2011 logo had a hint of turquoise in the gradient, the 2014 iteration is close to monochrome. The gradient depth and blues used in the logo lay a foundation for the color palette and styles used throughout the JTech website and My JTech, our website content management system. This stylistic overhaul favors clarity, minimalism and utility over glitz: color is consistently deployed to differentiate layers of data — actionable content, neutral content, active content, and negative content are all conveyed differently. Simple vector iconography further clarifies purpose. A subtractive process has been applied throughout our website interfaces, removing unnecessary stylistic conceit so that focus remains on the content that we and our clients have created.
As JTech and the meaning of advanced websites continues to evolve, our logo will surely follow, with future refinements that mirror the work we're doing. A company's logo and branding, like their website, is a living reflection of that organization's purpose. It's exciting to be working in an industry and company where change and new horizons are the status quo.
(1) Affordance is the degree to which an object suggests its purpose. A good chair is the right height and shape to sit on. A button looks like you ought to push it. A good logo clearly communicates the brand that it's representing and any visual metaphors that it is tasked with conveying.