Web Design and SEO Blog

Jul201421

Josh Presenting NRTRC Webinar

by JTech Communications in Announcements, Industry News

NRTRC Webinar
NRTRC Webinar
JTech president Joshua Reynolds will be presenting a webinar on Effective Websites hosted by the Northwest Regional Telehealth Resource Center (NRTRC). JTech is a Montana web development partner of NRTRC.

The webinar will be hosted live at 2:00 pm, Mountain Time on July 31, 2014. If you're interested in attending, visit stvincenthealthcare.adobeconnect.com/website to join the session.

Josh's webinar will discuss how to approach building your organization's website: understanding the purpose behind your website, planning content and hierarchy, budgeting, web design and development, internet marketing and more. Although the webinar's focus will be on healthcare organizations, custom website development is a subject applicable to other industries as well.

Josh is looking forward to a lively discussion of how to effectively advance organizations' strategic goals when doing business online.
Jul201417

In Development: Shipton's Big R

by Joshua Reynolds in Announcements, Design, Development

Shipton's Big R
Shipton's Big R
Billings, Montana: JTech is collaborating with Shipton's Big R on a new advanced website. Shipton's Big R operates three full-service ranch and farm supply stores in Billings, Montana and Sheridan, Wyoming, offering everything needed for ranching, hunting, fishing, camping, automotive repair, and more.

Shipton's forthcoming custom website will employ responsive website design for advanced performance on mobile phones and any device. The site will be packed with information about upcoming events, contests, and featured in-store promotions. JTech's Montana web development team is also building a gateway to employment opportunities with a multi-step job application form integrated into the new Shipton’s website.

We're excited to be working with Shipton’s Big R, a hub of Montana and Wyoming's communities. We enjoy the energy and thoughtfulness that their team brings to our planning and web development process and look forward to sharing a new website with you that is branded with quality.
Jul201417

Using Async to Avoid Render-Blocking

by Patrick Milvich in Development

Async

I came on board at JTech in 2005 and now serve as Vice President of Technology. Although this involves fulfilling a variety of programming and system administration roles, much of my time is spent fine-tuning our custom systems such as JTech's proprietary framework, which powers our advanced websites and gives us the granular control we need for responsive website design, animations and a high level of interaction.

We improve JTech's framework iteratively, with research and development on multiple fronts. In this blog post I'll be talking about how we use asynchronous loading (async) to improve the speed and consistency of website rendering using HTML, JavaScript and CSS.

Render Blocking: Why Async?

When browsers render a website, they must load certain external files sequentially in the order they appear in the code — JavaScript and CSS, for instance — before parsing the rest of the page's HTML and displaying the website to the viewer. We refer to this wait to view the page while waiting for scripts to load as render-blocking, which can add a significant delay for modern websites employing generous amounts of CSS or JavaScript.

Asynchronous JavaScript

HTML5 introduced the async attribute for <script> tags to combat render-blocking. Async specifies that scripts can load asynchronously without causing render-blocking as the browser reads the HTML document — and execute as soon as they’ve finished loading. JTech uses async for all of our external scripts to improve delivery time of the website's layout. Although embedding all JavaScript inline would avoid render blocking, it would create a larger initial load. Pages are perceived as loading faster if the layout appears while the JavaScript is still loading behind the scenes — in our testing, async has been successful because the layout appears quickly and the JavaScript functionality is ready by the time users begin interacting with the site.

Example:
<script src=“js/main.js” async></script>

Although all modern browsers support async, we still attempt to provide a useful solution for users stuck on obsolete browsers. One option for older browsers is inline JavaScript in the <head> tag to inject another <script> tag that uses async. This forces asynchronous loading even for browsers without explicit support. This is the method we are currently using in the latest version of our framework.

Example:
<script>
var newScript = document.createElement(‘script’);
var firstScript = document.getElementsByTagName(‘script’)[0];
newScript.async = 1;
newScript.src = ‘js/main.js’;
firstScript.parentNode.insertBefore(newScript, firstScript);
</script>

Another option is to embed <script> tags just before the ending </body> tag, which provides one of the main benefits of async — browsers are able to render all HTML prior to the script before render-blocking is triggered. This technique can be used in conjunction with async for the JavaScript file, but it's not an appropriate solution for files that define the page's layout; e.g. CSS. Because this method allows the script to be seen last, the browsers may fetch other external files before the script, which may cause a queue to load the script. This works well for obtaining additional resources for display purposes, such as images or fonts, but has the potential to delay functionality offered by JavaScript for a faster display. We have used this method before, but I’ve decided that the potential to delay functionality outweighs delaying an image or font.

Example:
<html>
<body>

<script src=“js/main.js” async></script>
</body>
</html>

Asynchronous CSS

Because our sites’ layouts are dependent on CSS, we need to load it before the content — otherwise the page will "flicker" as it loads and the layout changes. We speed things up quite a bit by embedding our main CSS inline rather than linking to an external style sheet. Although inline CSS can be wasteful if your website has many pages, JTech's websites are 100% AJAX — meaning we're not reloading the HTML and inline CSS as you navigate through the site. Even so, CSS can get quite large, particularly when using inline images to avoid further network requests. Therefore we employ a split solution: most of our CSS is loaded inline with the HTML, while we asynchronously load inline CSS images. The result of loading the main CSS with the HTML and splitting off inline images is that the page's layout loads instantly, followed by the JavaScript and images as they become available.

The <link> tag does not have async support like the <script> tag does, so we use inline JavaScript to inject a link tag with a reference to the CSS file containing our inline images. We use a setTimeout to ensure the link tag is not added until after the first parsing has been accomplished. Otherwise the browser will not async load the css. With some older browsers, most notably IE9, the CSS rule evaluation order cannot be guaranteed and overwriting styles is a risk. For this reason, we keep our external CSS definitions very narrow — using only background-image rather than the more general background selector to avoid potential conflicts and overwriting definitions in background-color or other attributes. IE10 and IE11 and other modern browsers evaluate CSS rules more predictably, which will allow us to make bolder declarations using asynchronously loaded styles in the future.

Example:
<style type=“text/css”>/* inline css */</style>
<script>
setTimeout(function() {
var newLink = document.createElement(‘link’);
var firstStyle = document.getElementsByTagName(‘style’)[0];
l.type = ‘text/css’;
l.rel = ‘stylesheet’;
l.href = ‘css/images.css’;
firstStyle.parentNode.insertBefore(newLink, firstStyle);
}, 0);
</script>

The Future: Asynchronous Fonts

Fonts are a bit more tricky. Unlike CSS and JavaScript, external fonts are not loaded until the browser encounters that font being used on the page. We can't force font pre-loading without using a JavaScript solution or heavy feature-detection, neither of which are solutions that I'm happy with. In the near future this problem will solve itself as browsers that do not support the woff font format will fade away. In the shorter term, I expect to begin using a hybrid approach with inline woff fonts and external otf/ttf files as a fallback.

Going Forward Asynchronously

Async is now widely supported, and as older browsers go out of circulation we'll be able to provide ever-cleaner and increasingly-efficient page loads while limiting the amount of trickery involved in getting the browser to play nice. As support becomes better, we'll be able to not only deliver pages more quickly, but also more seamlessly — without any render flickering or as many noticeable gaps in the layout or behavior as the page is loaded by the browser. In the present, there are a wide variety of approaches to asynchronous loading. If you have a clever approach or new ideas, we'd love to hear them.

Reference Pages:

Spec: http://www.w3.org/TR/html5/scripting-1.html#attr-script-async
Usage: http://www.w3schools.com/tags/att_script_async.asp
Compatibility: http://caniuse.com/#feat=script-async
Jul20142

JTech Closed July 4

by Joshua Reynolds in Announcements

In observance of Independence Day, JTech will be closed so we can spend time with our families, cats, friends and fireworks.

We'll see you on Monday as we get back to work making and marketing advanced custom websites.
Jun201425

Design Intern: Samantha Stokes

by Joshua Reynolds in Announcements, Design

Samantha Stokes, Design Intern
Samantha Stokes, Design Intern
It's a great pleasure to introduce Samantha Stokes, our Summer 2014 design intern. Samantha is studying Graphic Design & Arts at Montana State University in Bozeman as an exchange student from Wellington, New Zealand. We're inspired by Samantha's sense of adventure: Whether it's transatlantic travel, braving Montana's snowy slopes or drafting hand-drawn typography, she clearly has a bold vision.

Samantha offers her visual ingenuity and disciplined approach to design principles to our Montana website design team. She'll be collaborating with Felix Wolfstrom, our human interface designer, and Tyler Miller, our web development project manager. We're glad to have you at JTech, Samantha.
Jun201424

Next-Generation Content Management

by Joshua Reynolds in Announcements

Use My JTech to manage your inventory on the go.
Use My JTech to manage your inventory on the go.
Uploading and editing images is simple in My JTech.
Uploading and editing images is simple in My JTech.
My JTech Beta
Our next-generation content management system, My JTech, is entering beta testing — meaning that we’ll be using it to manage content internally and giving select customers hands-on access over the next few weeks. My JTech is an integrated platform for managing websites, email, eCommerce, email campaigns, and more. We’ve given you peeks at how My JTech will change content management over the past year or so — from managing and uploading files to enhancements we’ve made to it as a replacement for the Control Center.

We custom-fit My JTech to your website for an amazing experience: no pre-built templates, no clumsy one-size-fits all interface. My JTech is built for advanced performance: screaming fast, compatible with all modern browsers, and designed responsively for a native experience on phones, tablets and desktop computers. This is what web content management should be: an interface for managing all your online business needs.

If you’re interested in joining our group of My JTech beta testers, contact us. We’ll be working closely with our beta testers to fine-tune the experience to the way they manage their websites to make the experience as awesome as possible. We’ll continue to add and refine features throughout My JTech’s beta release period.

Summer 2014 Design Intern

Samantha Stokes, Design Intern
Samantha Stokes, Design Intern
Samantha Stokes
JTech’s team is joined for the summer by Samantha Stokes, an exchange student at Montana State University from Wellington, New Zealand. Samantha is studying design in Bozeman, and will bring her passion for creativity in layout and typography to JTech’s team.

Samantha will be teaming up with our project manager and human interface designer to tackle the various challenges of responsive website design — likely adding some degree of illustrative flourish as well as a rational, measured approach to layout and interaction problem-solving. Welcome, Samantha!
Jun201417

New Website: Next FX Pyrotechnics

by Joshua Reynolds in

A Next FX Image Gallery
A Next FX Image Gallery
JTech’s Montana website design team just completed a stunning new responsive website for Next FX, one of the world’s premier suppliers of theatrical pyrotechnics based in the shadows of the Absaroka Beartooth Mountains of Montana. Next FX pyrotechnics are used worldwide to add unique drama in concerts, theme parks, sporting events, films, and more.

We custom developed Next FX’s original website half a decade ago to market their products to the world and provide a secure platform for their wholesale partners to place orders online. Their new advanced site achieves those goals and goes far beyond.

Because JTech’s website development team utilizes responsive web design, the Next FX site layout changes for a perfect fit whether you’re using a mobile phone, tablet, or computer. Their immersive homepage recreates Next FX’s high impact visuals, and collections of photos showcase specific applications of Next FX pyrotechnics. If you’ve been to a show or concert where Next FX products were used, we invite you to use their website and share your photos: they may be published on the website itself!

Take a look around their new website for a taste of the excitement that Next FX brings to events: www.next-fx.com
Jun201412

Yellowstone Country Motors

by Joshua Reynolds in Announcements, Design, Development

Yellowstone Country Motors Landing Page
Yellowstone Country Motors Landing Page
Bozeman, Montana: JTech is deploying a custom system of landing page microsites for Yellowstone Country Motors, a factory-direct dealer of Chrysler, Dodge, Jeep and RAM vehicles. Yellowstone Country Motors is a great dealership in Montana’s Bozeman market area, with excellent prices and AAA approval for its high quality service.

JTech's landing page system allows Yellowstone Country Motors to create a custom advanced website to address each niche of customers served by their dealership. These custom microsites are highly relevant to customers and to search engines. In contrast to the content on their primary website, each microsite is highly focused to help customers accomplish a specific goal — for instance, Bozemanites looking for a Jeep to ride on weekend adventures into the Montana wilderness.

JTech's internet marketing team built a system of keyword-rich domains and microsites after helping Yellowstone Country Motors assess their target markets, relevant keywords and find answers to the difficult question of how to be found on the internet. We’re pleased to be a digital strategy partner for one of Montana’s great dealerships.
Jun20143

BDHG Patient Portal

by Joshua Reynolds in Announcements, Design, Development

BDHG Patient Portal Landing Page
BDHG Patient Portal Landing Page
The Bozeman Deaconess Health Group (BDHG) just added a patient portal for their patients to request appointments, access medical records, pay bills online and communicate with their medical office team. JTech integrated access to the patient portal into the custom BDHG website with a landing page and resource center to answer questions about the new patient portal.

JTech Communications is a proud partner of Bozeman Deaconess Health Group and Bozeman Deaconess Hospital. JTech's Montana web development team overhauled the Bozeman Deaconess Health Group advanced website five years ago and have worked with their team to expand the site's purpose and reach in the years since it was launched. Bozeman Deaconess' comprehensive approach to patient care is part of what makes Bozeman a great place to live.
May201427

JTech President at Montana Mediation Association

by JTech Communications in Announcements, Industry News

Missoula, Montana: On May 30, JTech president Joshua Reynolds will be joining a symposium of web development experts hosted by the Montana Mediation Association as part of their 15th Annual Conference. The web design and development experts will be presenting to mediators and attorneys from around the state of Montana to describe the importance of web design and provide an understanding of how modern website development services can save organizations time and help them do business online.

Josh is excited to meet with the web designers and developers of the Missoula area and to share JTech's custom website development expertise with the members of the Montana Mediation Association. To learn more about the Montana Mediation Association, visit their website: mtmediation.org