Web Design and SEO Blog


Upcoming: Gem Gallery Overhaul

by Joshua Reynolds in Announcements, Design, Development

We're very excited to be working on a major project with our longtime customers the Gem Gallery. JTech built their original website more than a decade ago and replaced it in 2008 with the site they have today. We're proud of their current site, and it's always a treat to look at something that's already great with an eye for how to take it to the next level.

Jewelry at the Gem Gallery

This time, our web development focus is on upgrading their site for a new beautiful layout and performance on mobile devices — responsive website design. The Gem Gallery's branding has evolved in the years since their website was built, so we'll be bringing the website's aesthetic into alignment as well as creating a great experience on mobile phones and tablets. Everything we like about the current site will be carried to the new site— its live-filtered storefront of gemstones and jewelry, easy checkout, gallery of custom work and detailed information about Yogo Sapphires and the Gem Gallery.

We look forward to sharing the new Gem Gallery website with you in 2015!

Faster, Better Development at JTech

by Joshua Reynolds in Announcements

Bozeman, Montana: We're always looking for ways to improve the advanced web development services we offer to our clients. Often this means research and development into the latest web technologies and methodologies — but it also means looking for performance enhancements in how we work together as a team and schedule work.

Two Week Development Cycles
Starting December 1st, we'll be switching over to two-week development cycles. This is part of an internal reorganization that will allow us to deliver better work more quickly. A practical result for our customers is that new work orders will be scheduled into the next production cycle after they are approved, rather than being inserted into the current development cycle.

We're very excited about the many projects, opportunities and friendships that our clients share with us, and we look forward to taking all our work to the next level. Thanks for your business and happy Thanksgiving!

JTech Website: Attention to Detail

by Joshua Reynolds in Content, Design

Our Montana web development team is focused on honing the experience offered by our custom websites — which means perfecting the interface's usability and expressing our attention to detail through small touches that add delight. We don't just want to help you get things done — we want it to be smooth, painless, and possibly even fun.

The News section of our website.

All the news fit to print.
With that philosophy in mind, we've made some changes to our website. In the previous iteration, we'd hidden all of our announcements and long-form publications — the Technical Blog and Business Dispatch — on our About Us page. We're emphasizing publishing and curating information for companies doing business online, and as a result we determined that the articles we've published needed their own section and a higher profile.

The News section, our most recent addition, is presented as a feed that shows complete articles — no more snippets or truncated content. To read the next article, just keep scrolling — articles will load on demand as long as you want to keep reading. We've also added distinct News channels, for those interested in a particular type of content — be it business-oriented, technical content or announcements from JTech.

Let's have fun.
Adding a new section to our website meant evaluating the balance and iconography of our site's navigation. This is where we realized that usability — easy navigation, fast page-loads, and responsive design — wasn't enough for us. We convened at the drawing board and designed unique animations for each of our icons to add fun and greater detail to the interactions. Sometimes getting the job done well isn't enough — sometimes you need to add a flourish! Our website is where we do business, and it's important that it reflect the values and priorities we hold.


The Internet in 2014: The Necessity of a Responsive Website

by Joshua Reynolds in Design, Industry News, Optimization

Mobile phones and tablets account for most internet traffic.

Responsive design in action.
Responsive design in action.
The number of people using phones and tablets to access the internet continues to grow. At JTech, we use responsive website design to craft and develop websites that look great and perform well on devices of any size. Your old website — the one that may have only been built a few years ago — is no longer adequate to accommodate the way that people are using the internet today.

In January 2014, 58% of American adults had smartphones and 42% owned tablets. (1)

Smartphones and tablets were responsible for 55% of the United States' internet traffic — compared to 45% of internet traffic from PCs. (2)

More than a third of phone internet users use their phones as their primary means for accessing the internet. (3)

This is an incredible shift in how people access information, communicate, and buy goods or services — and if your website doesn't work well or look good for people who are using mobile devices to access the internet, they will often choose to go elsewhere. Not only will a responsive website lead to more time spent on your website, higher sales (if you're offering eCommerce), and a more satisfying experience, it may also improve your search engine rankings.

Google offered the following thought regarding mobile search results:
“According to our studies, 61% of users are unlikely to return to a mobile site that they had trouble accessing from their phone. That includes sites that use fonts which are illegible on mobile, or sites where users have to zoom in or pan around excessively. Mobile is a very important area; the mobile device penetration is over 50% in the USA and most users use their device for browsing websites. Because at Google we are aiming to provide a great user experience on any device, we’re making a big push to ensure the search results we deliver reflect this principle." (4)

Already, Google penalizes search rankings (5) for sites that offer a poor mobile experience or load slowly on phones. As of October 2014, Google was experimenting with offering a "not mobile friendly" (6) icon to name and shame websites that won't offer a good experience to those searching.

These days, it is no longer a question of whether your site has mobile traffic. The question is how much it's costing you not to serve mobile visitors to your organization's website. To learn more, contact JTech about how you can make your website work on mobile devices.

(1) Pew Research Mobile Technology Fact Sheet
(2) comScore data reported by CNN Money
(3) Pew Research, Cell Internet Use 2013
(4) Sent to Barry Schwartz of Search Engine Round Table
(5) Google Webmaster Central Blog: Changings in rankings of smartphone search results
(6) Search Engine Roundtable: Google Displaying Not Mobile Friendly Icons in Search Results

My JTech Early Access

by Joshua Reynolds in Announcements

Request Early Access to My JTech
Request Early Access to My JTech
Bozeman, Montana:
My JTech, our next-generation custom website content management system, is now being put through its paces in early access testing for select customers. My JTech is an integrated platform for managing websites, email, internet marketing, eCommerce, email campaigns, and more.

Our Montana web development team custom-fits My JTech to each customer’s website for an amazing experience: no pre-built templates or clumsy one-size-fits-all interface. The interface is structured around your organization’s data, with responsive design for screaming-fast performance on all modern browsers and devices.

The evolution of content management.
My JTech can do everything you’re already able to do with our Control Center — and that’s just the beginning. Even for existing functionality, we’ve taken some big leaps forward: huge improvements in speed for eCommerce management, on-demand loading of databases, and drag-and-drop file uploads (with huge speed improvements when uploading large images).

Request an invitation.
If your organization wants to be involved in the next phase of testing My JTech, send us a message.

Internet Marketing Intern: Kate Burgan

by Joshua Reynolds in Announcements

Marketing Intern Kate Burgan
Marketing Intern Kate Burgan
This month Kate Burgan joins JTech's Bozeman internet marketing team as a Marketing Intern. Born and raised in Seattle, she came to Bozeman to study marketing and graphic design at Montana State University — where she's also minoring in international business. Kate will be working with Mike, our Search Marketing Manager, and Diego, our veteran Marketing Intern, to develop custom website promotion plans.

Like many pilgrims to Bozeman before her, Kate is an avid student of the outdoors. Whether it's skiing or hiking or fishing or soccer, the call of the Montana wild is strong. We're excited to have Kate's enthusiasm and energy added to our internet marketing team. Welcome, Kate!

A Year of the JTech Technical Blog

by Joshua Reynolds in Announcements, Design, Development, Industry News

We launched the JTech Technical Blog a year ago as a channel to share our technical approach to solving online business problems using advanced web design and web development tools. If you’re interested in a detailed technical look at how our team approaches custom web design, website development and internet marketing, we've compiled a retrospective of what our team wrote:

The State of Resolution-Independence In Web Design: 2014 by Felix Wolfstrom
Human Interface Designer Felix Wolfstrom goes in depth with the design and development strategies being used to deliver beautiful, effective layouts to devices of all screen sizes and resolution densities.
Read the article

Using Async to Avoid Render-Blocking by Patrick Milvich
VP Technology Patrick Milvich describes the benefits of asynchronous JavaScript and CSS for page-loading and custom website performance, as well as its limitations and illustrative examples.
Read the article

Safely Using Async Javascript by Patrick Milvich
This followup article describes the web development solutions we've employed to avoid some of the dangers inherent to asynchronous JavaScript.
Read the article

Dark Patterns in Design by Felix Wolfstrom
Human Interface Designer Felix Wolfstrom discusses dark patterns — unethical choices in website design intended to trick the user. This article gives examples of how dark patterns have been deployed and discusses the fallout of taking advantage of your customers.
Read the article

Keyword-Rich Domains & Microsites by Mike Kostrey
Search Marketing Manager Mike Kostrey wrote about using custom microsites optimized to address very targeted niches, creating relevant answers to search queries based on geographic markers, language, or vertical product offerings.
Read the article

jtCount: An OmniGraffle AppleScript that Counts! by Tyler Miller
Project Manager Tyler Miller published an AppleScript developed by VP Technology Patrick Milvich. This script allows JTech's team to quickly develop web project budgets based on flowcharts developed in OmniGraffle, but has many other potential uses.
Read the article

Using Adobe After Effects to Design and Prototype 3D CSS Animations, Part I & II by Tyler Miller
Project Manager Tyler Miller wrote about prototyping the JTech advanced home page using Adobe's digital motions graphics software. This article goes into minute technical detail about the process of composing in After Effects and exporting the unique composition directly to CSS.
Read the article

Designing Responsively by Felix Wolfstrom
Human Interface Designer Felix Wolfstrom wrote about how his approach to design is shifting to accommodate designing responsive websites instead of fixed-frame websites. This article includes an overview of what responsive website design is and how JTech's overall approach to website projects is changing.
Read the article

If there are any topics that you’d like to hear our Montana web development team explore on the Technical Blog, get in touch with us. We look forward to hearing from you!

Programming Intern: Zachary Lowen

by Joshua Reynolds in Announcements, Development

Please join us in welcoming Zachary Lowen, JTech's winter programming intern. Zach was born in Havre, Montana, and is now majoring in Computer Science and minoring in Computer Engineering and Japanese at Montana State University.

Having lived in Montana municipalities from Billings to Fort Benson, Zach is grounded in Montana's culture and makes a great addition to our Bozeman, Montana web development team. A hiking and hunting enthusiast, he brings a long history of tinkering, taking things apart, putting things back together, and computer programming to JTech's website development team.

Welcome, Zach!

The State of Resolution-Independence In Web Design: 2014

by Felix Wolfstrom in Content, Design, Imagery

What is resolution-independence?
Today I’ll be writing about resolution-independence: designing websites with accessible, legible, crisp, usable layouts on devices of any physical dimension and screens of any resolution density. There are two main components to resolution-independence: the question of whether the layout is appropriate for the frame in which it’s being presented, and the resolution of visual assets — icons, photography, illustrations, and typography.

Knowing our history: from fixed frames to responsive layouts.
Historically, websites have been designed as “fixed frames” — a static layout that was designed for a single screen size. Web designers strove to make this layout look exactly the same on every browser, necessitating a vast number of hacks and polyfills to work around the quirks of each browser’s rendering engine. Designing a single, pixel-perfect layout mimics the world of print, where designers create a layout that’s proportioned perfectly for a specifically-sized sheet of paper. This approach made sense for a handful of years, when the internet was dominantly accessed using desktop computers with monitor resolutions that only ever got bigger — but as mobile phones have become ubiquitous and smaller viewports (as well as higher-density displays — such as Apple’s “Retina display”) entered the picture, fixed-frame design became obsolete: it is no longer possible to design a single fixed-frame website that looks good for most of the people viewing it.

Web designers have been considering how best to approach the problem of variable screen dimensions at least since John Allsopp’s 2000 article “A Dao of Web Design”(1). In those days, adaptive layouts represented the current thinking about designing universally accessible websites; from a technical standpoint, Allsopp focused on specifying margins, page-width, and typography in percentages rather than as absolute values (e.g. 14pt). Other approaches have come and gone since the days of designing adaptive layouts. For a while we experimented with splitting our efforts and creating separate mobile sites, but the limits of this approach became apparent in the excessive amount of development effort necessary to create a separate page and the frustration of users caused by the often-anemic content presented on mobile-only sites.

Responsive website design.
As you probably know, responsive website design is the latest and greatest approach to custom-designing layouts that are effective and resolution-independent for devices of any size. Responsive layouts are typically built on a flexible grid that adapts to the constraints of the device. For instance, a desktop computer might see the website’s layout spread across nine columns, while a mobile phone would collapse the same information into one or two columns in deference to the limited horizontal screen dimensions.

Responsive design’s escape from the confines of a given resolution involve a lot of thoughtful planning and defining of “breakpoints” — specific resolutions at which the number of columns shifts and the content re-flows into a different layout. This is one way in which responsive design focuses on prioritizing content over presentation: although fixed-frame layouts encouraged designers to create pixel-perfect presentations, layouts that shift the presentation of the content require web designers to organize content and define clear hierarchies so that important things come first, related information is always grouped together, and information is presented clearly. This is a big win for usability.

* * *

Visual assets: looking sharp at any size.
Visual assets can be divided into two categories: bitmap and vector. Bitmap (also known as raster) images are defined by grids of individual pixels. Bitmaps are best used to present extremely detailed imagery: photographs, for instance, are always presented as bitmap images. The problem with bitmap images in web design is that high-resolution bitmap images have correspondingly large file sizes and can take an exorbitantly long time to load — especially tedious when mobile users aren’t even able to enjoy the full resolution.

Vector images are shapes defined by mathematical curves that look crisp at any resolution — typography being the most notable example. No matter how many times you zoom in, the edges of a typeface’s letters will always look perfectly sharp.

Vector-first design.
Because vector images are inherently resolution-independent, and because their file-sizes at high resolution are so much smaller, vector-first design is emerging as a usability philosophy: whenever possible, design visual assets as vectors. Often this means a greater reliance on typography — choosing beautiful, functional type to serve as the core of the layout.

Shapes with simple geometry — rectangles, circles, and ovals, to name the obvious, can be defined as pure CSS, which delivers the best performance for vector shapes and gives us code hooks to create beautiful transitions that morph the shape of the object during an interaction.

Shapes with more complex geometry, from icons to illustrations, can be created as SVG (scalable vector graphics) or as icon fonts, each of which has its advantages and limitations. At JTech, we’ve focused on using icon fonts, which perform better in most browsers but are limited to a monochrome color palette. SVG is finally enjoying wide browser support as well, but still lags behind icon fonts in page-load and rendering performance. As SVG performance gets better, we look forward to adopting it for multi-color icons and illustrations on our websites — this will open up a whole world of visual possibilities.

Images with blurs, glows or drop shadows do not perform well as SVG files — in fact, those effects are typically stored as bitmap data within the SVG. These effects are in the same camp as highly-detailed photographs; the best approach is still to deploy them in a bitmap format such as PNG or JPG.

A few final words about bitmap images in responsive and resolution-independent design: Although vector-first design discourages us from using bitmaps, there’s something tangible and beautiful about photography — particularly large-scale photography — that cannot be replaced by carefully-crafted vector shapes. A new HTML standard is being developed for a <picture> tag(2) that will load an appropriately-sized image resource based on the screen pixel density, viewport size, and other factors. In the meanwhile, our Montana web development team is experimenting with techniques for presenting beautiful bitmap images with small enough file sizes to load on any device. The most successful method we’ve explored thus far involves extremely high-resolution images that have undergone heavy compression — offering a level of detail that looks good at high resolution and a small enough file size to tolerate on small screens and slower internet connections.

How JTech approaches resolution-independent design.
We’ve decided that responsive website design is currently the right approach to create websites that are resolution-independent, effective and accessible on all devices. Our Montana website design team developed our own custom responsive framework, which we’ve deployed on our own site and client sites: NRTRC, HRSG User’s Group, Next FX, and J.K. Adams, to name a few. Our framework gives us control over breakpoints, transitions, and very granular access to content grouping and hierarchy. We’re happy with the way this has allowed us to build advanced websites that are usable, beautiful, and device-agnostic.

As web designers and developers, we’re actively pushing the boundaries of how we approach the visual asset creation of our websites — crafting more and more of the assets as vectors (in line with vector-first design), judiciously employing typography, and experimenting with delivery methods for high-resolution bitmap assets. Our transition towards resolution-independence is ongoing as we keep discovering exciting new details — creating pixel-perfect icon fonts in Adobe Illustrator! New JPEG compression algorithms!

There’s a whole realm of technical web design knowledge that continues to reveal itself as we round each bend. We're having fun discovering all the ways in which we can further hone and perfect our process, and we'd love to hear how other people are solving the same problems.

1. A Dao of Web Design: http://alistapart.com/article/dao
2. HTML Standard: https://html.spec.whatwg.org/multipage/embedded-content.html

New Maintenance Plans

by Joshua Reynolds in Announcements, Optimization

JTech Maintenance Plans
JTech Maintenance Plans
JTech is offering new maintenance plans for customers who need ongoing care and updates to their website — whether you need to update your website content, troubleshooting problems your clients experienced while using your site or email, help with social networking, availability to handle emergencies, copywriting, design updates or internet marketing. Purchasing a maintenance plan means you have JTech on retainer for a number of hours that you choose.

How JTech’s maintenance plans work:
  • You purchase a number of hours in advance on a yearly or quarterly basis.
  • You choose a number of hours you think you’ll need.
  • Maintenance time is discounted 20% from our standard hourly rate and is auto billed to your credit card each period.
  • Unused maintenance hours expire at the end of the year or quarter.

Many of you have routine tasks that you hire us to perform, regularly initiate or tweak internet marketing campaigns (SEO and SEM), and make periodic updates to keep your website fresh. Starting a maintenance plan with JTech means you can easily plan your budget in advance, with better rates and an assurance of available time in our production schedule. If you need more time than you’ve allotted, we can still schedule work at the standard rate. We’re excited to offer these news plans and think they’ll be a great fit for many of you. Give us a call to get started!

Featured Website

HRSG User's Group conference registration on a phone.
HRSG User's Group conference registration on a phone.
HRSG User's Group website.
HRSG User's Group website.
HRSG User's Group
JTech’s Montana web development team just completed a rebuild of the HRSG User’s Group website, adding integrated registration for their Annual Conference & Expo — registrations with a dynamic number of attendees, complimentary code redemption for conference exhibitors, live payment processing and email receipts. This addition adds to their website’s purpose as an extension of their mission to bring together knowledge from plant operations and industry manufacturers to improve steam-plant reliability, durability and profitability.

To top off the improvements, their custom-designed website is now built using responsive website design with a layout that adapts to your screen size for an easily-used experience on mobile devices as well as desktop computers. Whether or not you’re a combined-cycle and cogeneration power specialist, we invite you to take a look at their newly rebuilt website: hrsgusers.org