Web Design and SEO Blog


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

New Maintenance Plans

by Joshua Reynolds in Announcements, Optimization

Bozeman, Montana: JTech’s web development team is now offering new maintenance plans! Many of you do (and everyone should do) periodic work for your website and internet marketing throughout the year — refreshing content, PR, social media, security updates, design updates and internet marketing. Our maintenance plans allow you to keep us on retainer for a number of hours every year or quarter.

Maintenance plan details:
  • You purchase a number of hours in advance on a yearly or quarterly basis.
  • Maintenance time is discounted 20% from our standard hourly rate and automatically billed to your credit card.
  • Unused maintenance hours expire at the end of the year or quarter.

Whether you’re doing site maintenance, PR, social media, internet marketing campaigns (SEO and SEM), or simply working with us to keep your website up to date, our maintenance plans will help you budget and guarantee our availability. We’re excited to offer these new maintenance plans — we think they’ll be perfect for many of you!

HRSG User's Group Overhaul

by Joshua Reynolds in Announcements, Design, Development

HRSG User's Group: Mobile Conference Registration
HRSG User's Group: Mobile Conference Registration
Bozeman, Montana: JTech's web designers and web development team worked with the HRSG User's Group to refresh the aesthetics and custom build new functionality for their website. The HRSG User's Group is a resource for combined-cycle and cogeneration power specialists, from plant operators to industry manufacturers, with membership in the User's Group originating from attendance at their Annual Conference & Expo.

This overhaul to the website adds a pair of important features; first, it builds secure online registration for their Annual Conference directly into their website. This new registration system integrates multiple pricing periods, dynamic attendee additions, complimentary code redemption for exhibitors at the conference, live payment processing, and email receipts. Secondly, their entire website is now built using responsive website design — meaning that the layout adapts and scales to create a great, usable experience on devices of any size, from mobile phones to desktop computers.

We always enjoy working with the detail-oriented, meticulous people at the HRSG User's Group, who we've been working with for nearly ten years. We're very pleased to unveil this latest version of the HRSG User's Group website! hrsgusers.org

Custom Website: J.K. Adams

by Joshua Reynolds in Announcements, Design, Development

The new J.K. Adams website.
The new J.K. Adams website.
JTech Communications is proud to launch a new custom website for J.K. Adams, a Vermont-based manufacturer of quality kitchenware. J.K. Adams is a second-generation family business committed to creating quality products from sustainable, local materials whenever possible — with an emphasis on beautiful North American hardwoods.

We created the new J.K. Adams website in partnership with Skillet Design & Marketing, who developed the website’s aesthetic and brand messaging. Our Montana web development team built a responsive custom website with a great online storefront that can be used on computers and mobile devices of any size. Directly from the new J.K. Adams website you can browse, filter, and personalize their products with custom-engraved messages or logos. The new J.K. website serves wholesalers as well as consumers, with a secure section of the site with quick ordering, service information, internal announcements and details of upcoming trade shows.

J.K. Adams’ custom website is a great destination that showcases their beautiful, durable, American-made goods — from their signature cutting boards to bowls, kitchen islands and storage racks. We invite you to visit their newly developed advanced website: jkadams.com

Improved Website and Email Hosting

by Joshua Reynolds in Announcements

We've made some behind-the-scenes enhancements to our managed website and email-hosting services, dramatically increasing the bandwidth available for all of our clients. If you're an existing JTech client or a visitor to any of the websites we host, you may notice that things seem a bit faster than they did before.

We expect this to improve all our web services — and especially delivery of the custom-designed websites that our Montana web development team has engineered for lightning-fast performance!

Effective Internet Marketing

by Joshua Reynolds in Tools & Tips, SEM, SEO

Using Inbound Marketing to Your Benefit
Internet marketing is quickly replacing many traditional marketing methods. While traditional advertising tries to reach the user while they're doing other things — reading the newspaper, driving to work, or checking their mail — internet marketing allows you to attract people to your website who are already interested in what you're offering.

What is Inbound Marketing?
Inbound marketing is an internet marketing strategy that focuses on earning people's business by creating relevant, useful content that is helpful and easily findable. The core of inbound marketing is clearly stating what you have to offer and what differentiates your company from competitors. The informative content you’ve developed for your website is positioned where your target audiences can find it to help you earn their business.

Benefit 1: Be a Solution
When you provide answers to people's questions and provide the solution for their problems, you establish trust and develop a reputation as an authority in your field. Positioning yourself as a source for answers is a good way for your company to be found via search engines and is a great way to begin a relationship that may lead to them becoming your customer.

Benefit 2: Long-Term Growth
Traditional advertising campaigns can result in a one-time bump in sales as people's awareness of your company and products is momentarily increased. Developing useful content that answers questions will garner long-term growth, generating links to your website from other websites and attracting ongoing traffic driven by people looking for answers to their needs on search engines.

Benefit 3: Statistical Analysis
Using analytics tools embedded into your website, you can track the journey of individual people — how they found your website, what content they're looking at, and how much time they spend on your website. Analytics tools are also built into search marketing tools to measure the effectiveness of your inbound marketing campaign so you can manage your efforts and take actions to immediately improve results.

Benefit 4: Cost-Effective
Internet marketing (and inbound marketing in particular) is cheaper and often more effective than traditional marketing channels.

According to 2013 State of Inbound Marketing, a study conducted by HubSpot in 2013:
Twice as many marketers say inbound marketing delivers below average cost per leads versus outbound strategies. Our survey found that 34% of all the leads generated in 2013 come from inbound marketing sources. In fact, inbound delivers 54% more leads into the marketing funnel than traditional outbound leads.

There are obvious benefits of attracting visitors who are looking for what you're offering, rather than interrupting them as they go about their business. Inbound marketing targets the people who want what you're offering.

Benefit 5: Increase Search Engine Rankings
Inbound marketing — developing rich, comprehensive content that is useful for visitors to your website and searchers alike is replacing keyword-based methods of search engine optimization (SEO). Because Google and other search engines place a high value on original content, websites who are perceived as providing useful resources are rewarded with better search result rankings.

Draft a Digital Strategy
If you're interested in pursuing inbound marketing to reach your target audiences, or developing a comprehensive digital strategy for your company, give JTech a call! We'd be happy to help move your business forward with inbound marketing.

Featured Website

J.K. Adams hardwood cutting boards.
J.K. Adams hardwood cutting boards.
J.K. Adams slate servers.
J.K. Adams slate servers.
J.K. Adams
JTech collaborated with Skillet Design & Marketing to create a new custom designed website for J.K. Adams, a Vermont-based crafter of quality kitchenware. J.K. Adams’ products are crafted from local hard woods, manufactured in the United States, and come with a lifetime guarantee.

Their new website provides a portal for shoppers and wholesalers to purchase products from J.K. Adams’ collections — cutting boards, hardwood bowls, wine racks, and more. Our Montana web development team built a custom eCommerce solution for J.K. Adams, including the ability to personalize select products with a monogram, lettering or custom logo. Their new site serves wholesalers with a secure section that provides access to information about upcoming trade shows, internal announcements, quick ordering and service information.

We’re proud to have partnered with J.K. Adams and Skillet Design & Marketing for a website that showcases their beautiful, quintessentially American kitchen goods. Their responsively-designed site is a great place to look for a new cutting board whether you’re on your phone or sitting at your desk. Visit their new advanced website and wander through their beautiful collections: www.jkadams.com

Managed Web Hosting: Club Vitals

by Joshua Reynolds in Announcements

Club Vitals
Club Vitals
Bozeman, Montana: JTech has begun providing hosting and web development services to Club Vitals. Club Vitals is a web-based service for health and fitness organizations to manage the maintenance of their equipment. Club Vitals tracks warranties, maintenance records, and facilitates seamless communication between fitness club members, staff, managers, owners and technicians.

JTech's Bozeman website development team provided code auditing for Club Vitals' front and back-end infrastructure, streamlining the website for improved page delivery and performance. Our web developers are making ongoing upgrades to the Club Vitals web app, and we are excited to be planning further enhancements for the future.