Web Design and SEO Blog

Nov201320

Using Adobe After Effects to Design and Prototype 3D CSS Animations: Part II

by Tyler Miller in Design, Tools & Tips

Using Adobe After Effects to prototype 3D CSS animations and transforms, as well as 2D CSS animations and transforms can save your development team from spending hours of time tweaking timing and worrying about how the animation is supposed to look. Prototyping mockups in After Effects helps your creative team focus on the end result, while giving your development team a guide to the intended result, saving time and money.

Proof of Concept

Our development team created some limited code with a few objects and roughly placed them. Once the animation was complete, we tested out a few browsers. Immediately, we realized that all browsers — even the latest Safari and Chrome — balked in the presence of blurring that many objects. We’d expected this would happen, but had wanted to see what we could get away with. We found rather strict limitations on how many objects could be on screen at any given time — which meant going back into After Effects and modifying positions again. Not to mention we were only showing about 8-12 pieces in the CSS proof, and we knew there would be A LOT more objects in the final in order to make the world feel full and complete. This meant we needed to find another way to show the numerous other objects that we knew would have to be there, without generating their blur levels dynamically. To solve our blur problem, I proposed that we continue using the CSS Blur filter on the 18 objects that were to be traveled to and through. The other objects required to fill out the environment would have to be static images that were pre-blurred and optimized for web output in Photoshop. Even though their blur levels wouldn’t change, they were farther from the camera and the lack of dynamically changing blur wouldn’t be very noticeable. I went back into After Effects and rearranged my objects so that there were fewer than 6 objects in view at any given time, including along all points in the path — not just when you were paused on an object. I also started placing the “dummy” objects that would allow me to fill the world, providing visual engagement. The dummy objects’s only purpose was for visual appeal. These dummy objects were not to be traveled to, only to entertain the viewer as they were traveling, and increase the sense of movement throughout the world.


Finishing the World in After Effects

I ended up placing an additional 74 objects in order to make the world appealing no matter where you were in it. What resulted was the creation of object bands. My foreground contained the 18 active objects, with all of the faked objects behind. The critical viewpoint was was the depth of the world behind the objects you flew past and landed on. The middle ground contained pngs that had been pre-blurred and resized to be a bit smaller, then optimized for the best browser performance. (See Fig. 10, 11)



Fig. 10, 11 - This was the top down view after placing the 18 objects. To avoid seeing duplicates, the field inevitably became more of a band, left to right. The rest of the objects were placed, continuing the theme of bands. They were placed behind the active objects because their sole purpose was just to provide the viewer something more engaging to look at while traveling among the active objects. It also gave a much greater sense of movement and really enhanced the animation altogether.

My background “band” contained even smaller pngs, with stronger blur. The reason we shrunk the faked objects was to artificially increase the depth of field — allowing us to decrease the z-axis values in CSS and accelerate the background’s effective motion compared to our 18 active objects. The further out on the z-axis an object was placed, the harder it was to get it out of view to create the sensation of movement. Think of it in terms of driving down a road, where the telephone poles fly past you at great speed, while the mountains in the background tend to casually mosey along. We essentially made the “mountains” smaller so that they appeared to be the same relative size, but positioned them only a few hundred yards from the “telephone poles” so that they moved bit quicker. The net result was a world that contained more movement and provided an interesting and unique experience.

These were placed carefully so that they didn't cause any distracting placement or clipping issues when you moved through space or paused on an object. We didn’t mind if objects appeared behind the navigation menu or the footer, but we wanted to make sure there weren’t any scenarios that took away from the usability and aesthetic of the home page. (See Fig. 12, 13)



Fig. 12, 13 - The first screenshot illustrates the how the rest of the objects could pose a problem with regards to clipping/non ideal positioning/distracting situations. The second screenshot illustrates how positioning could cause clipping. Objects were rearranged until this didn’t happen anymore.


Building it in the Browser.

In the first iteration of code after our initial experiment, we used the position coordinates from my After Effects composition to create the matrix of objects in code. I had two sets of coordinates: one for the 18 dynamic objects, and one for the rest of the faked objects. I asked our development team if the After Effects coordinates I had were useful. It was great news when they told me we could use the same coordinates in code as I did in After Effects. Only then did I realize I had to extract the coordinates for 80+ objects. I found the process of gathering each property value manually quite cumbersome. I quickly gave in and asked Patrick, our VP of Technology, to develop a script that would capture the data we needed straight from After Effects. Because we planned to continue tweaking our objects’ coordinates, the script needed to export positions so they could be easily implemented into the website code. After Effects scripting turns out to be similar to Javascript — and Patrick whipped up a script that grabbed the X, Y, and Z coordinates for any layers I had highlighted in the layer palette.

This version exports the layer name, position coordinates, and scale:
var comp = app.project.activeItem;
var file = new File(Folder.desktop.absoluteURI + "/" + "positions.csv");
file.open("w");
for (var i = 0; i < comp.selectedLayers.length; i++) {
    var layer = comp.selectedLayers[i];
    var point = layer.transform.position.valueAtTime(layer.inPoint, false);
    var scale = layer.transform.scale.valueAtTime(layer.inPoint, false);
    var id = layer.name;
    file.writeln(id+","+Math.round(point[0])+", "+Math.round(point[1])+","+Math.round(point[2])+","+Math.round(scale[0]));
}
file.close();
alert("Positions.csv has been saved to your desktop”);

This version exports everything except the layer name:
var comp = app.project.activeItem;
var file = new File(Folder.desktop.absoluteURI + "/" + "positions.csv");
file.open("w");
for (var i = 0; i < comp.selectedLayers.length; i++) {
    var layer = comp.selectedLayers[i];
    var point = layer.transform.position.valueAtTime(layer.inPoint, false);
    var scale = layer.transform.scale.valueAtTime(layer.inPoint, false);
    file.writeln(Math.round(point[0])+", "+Math.round(point[1])+","+Math.round(point[2])+","+Math.round(scale[0]));
}
file.close();
alert("Positions.csv has been saved to your desktop");


The script worked like a dream, outputting the data in a CSV that was ready for him to parse and integrate into his code. Now he had all of the objects in the environment just as I had them in After Effects. Initially, we found that the field of view was drastically different. Fortunately, we were able to tweak the CSS Perspective property. In fact, we kept tweaking it until I had the idea of just trying the same value I had used for the “Zoom” and “Focus Distance” properties in After Effects. Turns out, CSS Perspective is equivalent to the Zoom property in After Effects. We were able to replicate the relative sizes and positioning of objects, which saved us a lot of time reproducing my careful placement of the objects based on my own perspective in After Effects.

Before we did any real animating, we had to implement a method that would populate our 18 active objects with our 18 most recent portfolio pieces, and choose 6 of them at random, for the path we had developed. Using PHP and Javascript, our code pulls records from a database and places the images in these objects. Even more cool, you could click on the object you were focused on and it would take you to the same portfolio piece’s case study on our portfolio page. This random populating of objects was session-based, so that the experience is consistent for the duration of your visit. If we hadn’t done this, as you moved around the site, the portfolio pieces on the home page and portfolio page would change perhaps causing disorientation. Our portfolio page and home page were synchronized so that they would contain the same set of 6 portfolio pieces — whichever happened to be chosen for that session.

Moving from the proof of concept to the real build, we used the rekapi library to configure the keyframes and animation.  This library specifically helped us transfer from our original code by using rekapi's experimental support for dynamic CSS animation generation. CSS animations offload more of the animation to the browser allowing for greatly improved performance.
rekapi.com



As you remember, using CSS 3D Transforms, the objects come to you rather than you traveling to them. Each object’s coordinates would change dynamically, so that they moved in unison, while the particular piece you were traveling to would appear centered on the screen and than pause for a set period of time. We also wanted to avoid clipping (traveling “through” the piece you were just focused on) — so we decided to incorporate a nuance of the animation allowing the camera to “back up” and then fly around the object, which looked and felt a lot better. The blur css filter is supported in the latest webkit based browsers, which was really cool because we were calculating the blur value dynamically based on object position — the further away they were, the more blurry they would appear (true depth of field!). Firefox and IE do not support this css feature yet. The lack of dynamic blur with the static blurred images still gave a favorable experience, which meant we could keep the animation in Firefox and IE rather than using a fallback visual construct that we implement for unsupported browsers.


Conclusion

After Effects proved to be an invaluable tool throughout the process, allowing me to block out the scene and quickly reposition things — showing a preview of the final result. We didn’t have to try random positioning values in the code to develop the scene. I couldn’t imagine having to use the guess and check method in order to develop a field of ~80 objects in code. The ability to take numerical data from After Effects and implement it directly into the code saved hours of time. We will certainly be using After Effects for future 3D animations. The entire process was a great learning experience in learning how far our web development team could push CSS 3D Transforms with today’s browser performance, as well as finding short term workarounds to render the animation as desired (creating the dummy objects, and positioning them in a way that didn’t fry the browser performance when it tried to render the blur filter dynamically on screen).

Additionally, allow me to mention the questions we asked ourselves in the beginning. Would camera orientation change along a given path? (no, but maybe in the future - it leaves us room for future iterations) What were the most appealing blur levels? (Just past the point of not being able to read the text on various objects behind the one you were focused on), What was the appropriate perspective, and how many objects will there be? (We went with 800px of CSS perspective, and we ended up with 86 objects). Would the camera’s paths be static and determined before hand, or dynamic and random? (Static, and determined beforehand). Which possible paths are visually interesting? (Ones that incorporate movement that involves passing a fair amount of objects before arriving to your destination. Change on Z was obviously the most intriguing since its a crutch of 3D space and movement). Of the possible paths, which perform best? (Any path that was traveled on had to ensure no more than 5-7 active objects would appear in view in the browser window at any given time, or performance would suffer). How will we iterate our 18 most recent portfolio pieces throughout the field of objects? (We used PHP and Javascript to populate the objects with our portfolio pieces) How many objects could browsers (and devices) handle in a given view? (Once we solved our problem by using dummy objects, the browser window could handle more than we needed - around 12-20).

As browser performance gets better, our Bozeman team can continue pushing theboundaries of website design with our home page concept, experimenting with changing camera angle along a path, randomizing paths, increasing the number of objects, and even randomizing fields of objects based on sets of requirements. It’s even possible that we can allow users to navigate their own path through our portfolio pieces — our step into a 3D world will provide us with much flexibility and room for improvement in the future. The experience of building our website home page animation — its dynamic and interactive nature — provides us with much inspiration for utilizing what we’ve learned for not only animations, but truly inspiring online experiences in the third dimension. One day, we will be able to move beyond “effects” and “animations” and create truly riveting immersion online. At JTech’s Montana office we are excited to continue our pursuit of custom, interactive web projects, and we look forward to the possibilities of CSS and JS-driven virtual online experiences!

A subsequent blog post will explore the coding aspect in greater depth.
Nov201313

Updates for the Gem Gallery

by Joshua Reynolds in Announcements, Design, Development

The Gem Gallery
The Gem Gallery
JTech’s Bozeman, Montana web development team recently completed a number of incremental updates to the Gem Gallery’s custom website — Bozeman’s only independent jeweler retailing online and the premier source for Montana Yogo Sapphires. Most visible of these changes is the new showroom imagery establishing the Gem Gallery’s feel throughout the site. We also improved the site’s eCommerce security, with enhancements to the handling of credit card transactions and updates to encryption methodology.

To streamline inventory management, JTech developed new behind-the-scenes custom features to synchronize the website’s inventory with what the Gem Gallery currently has in stock. We also tightened the jewelry and gemstone inventory integration with improved call-to-actions when visitors perform a site-wide search. Users can now reset the filter and the search to continue shopping among all products. JTech continues to enjoy our partnership with the Gem Gallery and improving their advanced website for both the Gem Gallery employees and their customers.
Nov201313

Using Adobe After Effects to Design and Prototype 3D CSS Animations: Part I

by Tyler Miller in Announcements, Design, Tools & Tips

Summary
Adobe After Effects can be an extremely useful prototyping tool for mocking up 3D CSS transforms and animations, and even 2D CSS transforms and animations. Prototyping CSS transforms and animations in After Effects can produce realistic results, and even animation properties can be translated into CSS values. Programming resources are usually limited, so experimenting with various effects in CSS can prove invaluable, and coming to your development team with a polished prototype transform or animation can help the programmer focus on implementation rather than creation.

An introduction: Project Manager and wearer of hats.

JTech Communications out of Bozeman, Montana hired me earlier this year — and I have to say that I have discovered the perfect fit for my love of web development and passion for designing custom websites. Although I am the Project Manager, I wear many hats. In fact, I have come to learn that being part of a growing web development company involves constant change. I am always looking at ways to improve our workflow or internal operations — while staying up to date with current web standards. Because my job is multifaceted, I will be writing future blog posts on any number of advanced website subjects — technical tidbits, client relations, or design perspectives informed by my own grounding and history as a photographer in Montana and around the world.


Rebuilding our Website.

A few months ago, our custom web design team began making a wish list of features for a refresh to our website. When we decided it was time to build our wish list, the depth of the changes led to rebuilding the website from the ground up to add responsive design, use the latest standards, utilize the newest version of our custom framework, incorporate new content such as this blog, and take our CSS3 animations to the next level.

When we started talking about CSS3 animations, the first order of business was our home page image rotator. The previous rendition of our site already used 3D transforms for an image carousel, but we wanted to come up with something new and innovative. Image rotators have been around for a long time, and there are tons of javascript sliders and rotators that come packaged with a seemingly-endless set of transition effects. The few image rotators that diverge from the usual 2D transitions and hackneyed 3D animations tend to enter the realm of gimmicky transitions, poor performance issues, or both. Our goal was to develop a unique image rotator based on a 3D CSS animation that avoided gimmickry and tackiness while overcoming potential performance issues and browser compatibility. It turned out to be a rewarding adventure in the third dimension — and we learned a lot.


Creating a digital world.

We decided to create a 3D world of portfolio pieces (from now on referred to as objects) in which the user (the camera) would fly to each object. The focus would cycle through our six of our eighteen most recent projects, showcasing each in turn. Since we were working within a 3D world, I wanted to take advantage of the opportunity to utilize depth of field in the design. A few years back I asked myself: why don’t designers utilize depth of field often (if at all)? The thought of using depth of field to define usability and focus in an interface was exciting. For our project, depth of field would be based on an object’s location in 3D space — calculated dynamically with the CSS blur filter.

Creating a 3D world provided many new possibilities, as well as raising many questions that we had to answer to move forward. We began evaluating these questions before we embarked on the project. Would camera orientation change along a given path? What were the most appealing blur levels?, What was the appropriate perspective, and how many objects will there be? Would the camera’s paths be static and determined before hand, or dynamic and random? Which possible paths are visually interesting? Of the possible paths, which perform best? How will we iterate our 18 most recent portfolio pieces throughout the field of objects? How many objects could browsers (and devices) handle in a given view?


Creating the Mockup

To begin answering these questions, we had to create the world — without code. We had to be sure we liked the way our world looked, and did not want to waste our programming team’s time on something we weren’t certain we liked. After Effects is a powerful tool, and even those without any experience in After Effects can gain enough of a foundation to mockup most 3D Transform animations after watching a few tutorials over the course of 1-3 hours. After Effects provides efficient means through which you can place objects in space based on X, Y, and Z coordinates; by using a camera layer in that 3D space, the world becomes easy to navigate. Paths and key frames are inherent in After Effects, which made it easy to create the fly-to animations along a path.

Before we even began a composition in After Effects, we sketched out our world on paper to provide some direction before composing in After Effects. We wanted to draw out where our 6 pieces could be in order to generate an interesting path. We knew we wanted to cycle through 6 of our 18 most recent portfolio pieces, and then repeat, which meant the end had to connect to the beginning. (We also planned on adding more dummy objects in order to fill out the world to create a better effect.) This meant the user would go in a circle, with a goal of obscuring that loop in the path. To increase variation in the path, we decided to make 18 objects, iterating each of the 6 pieces three times. Once we had a mockup of our field, we started drawing lines from piece to piece and numbering them 1-6 to make sure there wasn’t any possibility of seeing the same piece in juxtaposition with its clone. This meant if we were looking at Object 1, the other two Object 1’s had to be far enough away that you wouldn’t see them behind or next to the Object 1 you were currently focused on. (See Fig. 1, 2) Next, we had to make sure that every 6 was able to hook back up with a 1 so that we could loop through the three paths. We decided that any 6 had avoid being in a position where the 1 was really far away. We got to a point that we felt we had a good plan. After our sketching exercise, it was time to take the paper mockup and re-create something similar in After Effects.



Fig. 1 - The example illustrated above is to demonstrate what we were trying to avoid. On paper, we would kind of guess a field of view, something that I could modify if I had to in case we ran into situations where the field of view was so wide that it was impossible to avoid this situation. We rearranged the numbers until you could never see the same number twice in any given field of view when you were focused on the object.


Creating the World in After Effects

I began with a composition that approximated a large browser window — just so I had a realistic idea of what the final result would look like. I added in some of our website’s static interface elements on their own layers, and was left with the empty space in which to create the world. One important note: I left the static interface elements as 2D layers, while manipulating all the portfolio objects in 3D. Leaving the static interface in 2D preserved its position regardless of where the camera traveled through the world. (See Fig. 3)


Fig. 3 - The navigation elements, our logo, and our footer were going to be on top of the objects at all times. I left these as 2D layers and then was able to create the 3D world that would appear behind these important UI elements.

My first goal was to place 18 objects that varied on the X, Y, and Z axes, placed similarly to our paper mockup. One thing our map did not illustrate was any change on the Y axis. I played around with moving objects up and down on the Y axis, as well as moving them on the X and Z. Eventually I had 18 objects that were positioned in a way that seemed appropriate. Following that, it was time to create the camera that would allow me to fly around in the space. Until I had a camera I wouldn’t know if my positions were ideal. (The first time around I did end up placing objects too close to one another).

My second goal was to determine the 3D camera settings in order to flesh out relative size between the objects in the world. This would also affect the object positions - the distances between objects needed to generate interesting paths. I needed to determine an ideal speed, and if it took too long or too short to get to the next object, the animation felt wrong. It would also determine the distance my null object would be from the objects (more on this in the next section). The reason to define the camera settings after placing objects is because the various camera properties that After Effects provides, such as zoom, will modify the relative distance and size between objects — as well as their relative position from the camera’s point of view (AKA perspective — which is what the browser window will show). Changing this property on the camera isn’t quite as useful or intuitive without objects to look at. Theoretically I could have created identical results even if my camera settings were different, just by using larger or smaller objects. Because my objects were 900x700 pixels my camera settings would be specified to make a world of objects that big look good. In After Effects, the camera’s zoom and focus distance is typically set to be the same value. Allow me to clarify the difference between these properties and why I set them to be the same. Zoom is distance between the lens and the image plane. The image plane is where an object would appear at full size. (AE has cleverly calculated how a 50mm lens would behave in terms of pixels, but more on that another day). The Focus Distance property is the distance from the lens to the plane where objects appear in perfect focus (which can be different than the zoom distance!) For most purposes, you want those to be the same — in my case, I definitely want the zoom plane to match the focal plane. (See Fig. 4, 5)



Fig. 4, 5 - As you can see, the relative size of the focused object is the same, but the objects around it appear as relatively different distances and sizes. The only properties that are different are the Zoom/Focus Distance properties. The camera is placed 400px closer to maintain the relative size of the object that is being focused on - which is simply because we changed the zoom from 800 to 400 = 400. When you Zoom out, objects appear further away, farther apart from each other, and of course, smaller. In the second image you can see that the zoom has been increased, which we decided was the more interesting of the two. We used a Zoom/Focus Distance of 800px.


Creating the Animation in After Effects

Now, with the camera settings mostly setup (I used a depth of field that blurred objects enough that they didn’t distract from the object that was being focused on) I wanted to make camera positioning easy, so I created a null object. There are lots of good tutorials on the uses of null objects, so I will only go into it briefly. A null object is an invisible point in space, often used for positioning layers in a parent>child layer relationship. I aligned the null object on the same plane as the focus distance/zoom of the camera. In other words, the invisible plane that my camera was zoomed into and focused on also was the same plane that my null object was on. I also made the null object a parent to the camera, so that any movement of the null object would also move the camera accordingly. This set up made things a lot easier, because then I just had to position the null object using the same exact coordinates as an object I wanted to focus on, instead of doing a bunch of math to calculate where the camera had to be placed so that the focus distance and zoom landed on the object’s position. (See Fig. 6, 7)



Fig. 6,7 - The Leadership Montana object’s coordinates were used to place the null object on the same plane as the object - which also is the same plane as the camera’s zoom and focus distance - resulting in perfect positioning of the camera. I could then animate the null object and the camera would just follow. Important note: In my application, the object appeared too high, because of my 2d interface. The objects appear centered on the composition, not my interface. In order to correct this, I calculated how many pixels down the object would have to move in order for it to appear as it would in the browser, below the heading “Advanced Websites”. That value turned out to be 50px, which is why there is a 50px discrepancy in my Y position between the null object and the portfolio object.

I just had to copy and paste coordinates from the object I wanted to focus on into the null object’s coordinates and my camera would immediately be placed right in front of the object I wanted to focus on, at the exact distance it needed to be from the object. Lastly, the other important reason to use the null object was because our final product was going to be built with CSS, which had to use the positions of the pieces — there is no concept of a camera in CSS 3D Transforms. In CSS 3D Transforms, objects and space are flying around you, rather than you flying through space. It’s all object coordinate-based. By positioning the null object exactly with the objects, I knew I could provide some kind of information to our programmer. I would space my keyframes out two seconds because the timing could be changed in CSS. I did not worry about the “pausing” part. Each keyframe was created for my null object (which moves the camera), and afterwards I added animations between keyframes. (See Fig. 8)


Fig. 8 - It was easy to create all 18 keyframes fairly quickly, because I just had to move my current time indicator 2 seconds, copy the position of the destination portfolio piece from the last, and then paste them into my null object’s position coordinates.

The path was crude, because it was just a straight line by default. In order to make it look more interesting, I modified the path using the pen tool and the top and right views of my world, modifying the red path line manually. (See Fig. 9)


Fig. 9 - The red path appears based on your position on the timeline - and it only shows so many keyframes. The number of frames you can see at one time is editable in the preferences dialogue. In order to modify the red path, its helpful to use the top view, or the right view, to maintain explicit access to either the Y axis, or the X and Z axis. With the pen tool selected, you can treat the read path just as you would a bezier curve. That way, the camera can travel on a path that may flow around objects, instead of straight line.

I knew that our web development team would do a slightly different animation so I didn’t spend too much time making it perfect. I did add some easing, so you slowed down as you approached the object to be focused on, and then slowly sped up to full speed when you left a piece. Our team found my proof of concept in After Effects appealing, so we decided to take the time to do a proof of concept in CSS and Javascript to evaluate browser performance.

To be continued in Part II.
Nov20135

Montana Ranch Launches New Website

by Joshua Reynolds in Announcements, Design, Development

G Bar M Badge
G Bar M Badge
The new G Bar M website
The new G Bar M website
JTech, a Bozeman web design company, designed and developed a custom website for Montana’s G Bar M Ranch. G Bar M is a working ranch — a gem hidden in Montana’s Bridger Mountains – and is an agritourism destination, involving their guests in care of the horses, checking the fences, and moving cattle from pasture to pasture. They offer hyper-local food to their guests, with beef, pork, eggs, and vegetables all grown on the ranch — food that’s traveled feet or yards rather than miles.

JTech’s Montana web development service created G Bar M’s new website and offers a glimpse into life on the ranch. It features rich textures, immersive photography, and a beautiful video that brings G Bar M to life. The new website assists prospective guests in making reservations at G Bar M and looks great whether your screen is large or small. Pay their advanced website a visit:

www.gbarm.com
Oct201329

Production Begins on Montana Health Network's Website

by Joshua Reynolds in Announcements, Design, Development

Montana Health Network
Montana Health Network
Montana Health Network (MHN) of Miles City, Montana has chosen Bozeman, Montana's JTech Communications as their partner in developing a modern website. We’re collaborating with MHN to plan, design and develop a new advanced custom website that will help their consortium of healthcare providers work together. Montana Health Network supports and influences the evolution of health care organizations to improve the well-being of individuals and communities across Montana.

The new advanced website we’re developing will provide employment applications through their staffing agency, host their newsletters, provide a members-restricted section to manage Montana Health Network’s offering of programs, and much more. This custom Montana web development project will bring a friendly modern face to their organization — we look forward to sharing it with you!
Oct201324

New Website Development for Northwest Regional Telehealth Resource Center

by JTech Communications in Announcements, Design, Development

NRTRC Logo
NRTRC Logo
JTech Communications won a request for proposal (RFP) submitted by the Northwest Regional Telehealth Resource Center (NRTRC), with a web development plan for a fully modern website designed to their specification. NRTRC is is a coalition of telehealth organizations in the northwestern United States – including Montana, Alaska, Washington, Oregon, Idaho, Wyoming and Utah. They provide resources to assist in providing remote healthcare to businesses and organizations in all of these states from their office in Billings, Montana. NRTRC offers educational opportunities, webinars, conferences, coaching and more to assist organizations running call centers, offering online medical information, remote monitoring of vital signs, and other telehealth services.

JTech’s Montana web development team is planning a new website for NRTRC that is robust and modern, including responsive website design and a clean information architecture that makes finding important telehealth information easy. We're excited to be developing an advanced custom website with NRTRC that perfectly suits their needs — and to help facilitate the flow of vital telehealth information to telehealth service providers.
Oct201316

Smart Scheduling for American Paintball Park

by Joshua Reynolds in Announcements, Design, Development

Signing up for a day of paintballing.
Signing up for a day of paintballing.
American Paintball Park is a recreational paintball park in Livermore, California. In addition to paintball, American Paintball Park offers laser tag. Teamwork, leadership, fun and safety are on the menu every day.

Our Bozeman, Montana advanced website development team upgraded American Paintball Park's website with an online scheduling system that helps clients reserve space at their event facility. We designed and built them a custom website calendaring system that manages availability and reservations for paintball parties of differing lengths and sizes without double-booking or manual data entry for who booked what and when.

The new website system’s design takes potential paintballers through an easy web interaction — first, pick how long a party you want and how many friends you'll be bringing. Second, pick an available slot for parties of that length. Then, let American Paintball know who you are and how they can get ahold of you to keep your reservation. That's it! Web development that makes it as easy to schedule an event as splattering your friend with a few rounds of brightly-colored pigment.
Oct201315

Using Forms to Help Customer Interaction

by Joshua Reynolds in Design

Our contact form before any action is taken.
Our contact form before any action is taken.
The second stage of JTech's contact form.
The second stage of JTech's contact form.
A third and final stage of our contact form.
A third and final stage of our contact form.
One of the most flexible and frequently-overlooked parts of your website are the forms that power customer interaction. Forms are incredibly flexible and can do almost anything— from simple contact forms with names, emails and phone numbers to complex, multi-stage scenarios where credit cards are processed or job applications with resumés are accepted. A logic-driven form can power support trees that intelligently route customers to the correct department and send internal emails to the relevant customer service personnel.

On the newly updated JTech website, we've built a single form that handles all of our frequent contact scenarios. For people who are saying hello or giving simple feedback, the form has one page and the message can be quickly sent — no hassle.

For customers wanting to file a service request, or for potential customers asking us about a new project, our form dynamically increases in complexity, by requesting information about their company and their project in additional stages. If they're looking for a new project, the form sends their inquiry to a different department than forms requesting maintenance or updates to an existing project.

These examples are just the beginning. Using forms, your website can become as interactive as you need to serve all of your target audiences.

Featured Client

YMCA
YMCA
Gallatin Valley YMCA Website
Gallatin Valley YMCA Website
Enhancements to YMCA
We have a long-standing relationship with the Gallatin Valley YMCA. They're doing great work in our community, and we're proud to sponsor them. Most recently, we've overhauled the registration system we built for their programs, events and athletics to streamline kids being added to the appropriate sports teams.

We've continued to improve their site since it first launched in 2011, and have always been pleased with the clean, cheerful, robust website. The Gallatin Valley YMCA is a pillar of our community — if you're interested in volunteering, sponsoring or are interested in enrolling your kids in their program, visit their website!

www.gallatinvalleyymca.org
Oct20137

2013 Autumn Marketing Intern: Josh Hamilton

by Joshua Reynolds in Announcements

Josh Hamilton
Josh Hamilton
JTech is pleased to welcome our 2013 Autumn Marketing Intern, Montana native Josh Hamilton. Josh is a Senior at MSU Bozeman completing his major in Business Management and minor in Economics and Management of Information Systems. He'll be working with JTech through the fall semester.

Josh Hamilton collaborates with Mike Kostrey, our Search Marketing manager, focusing his energy on outreach and optimization. When he's not devising strategies to help JTech's clients succeed online, Josh travels the nation playing ultimate frisbee with the MSU and Bozeman club teams. Welcome, Josh!
Sep201330

JTech's Joshua Reynolds Accepted into Leadership Montana

by JTech Communications in Announcements, Industry News

Yellowstone. Photo credit: <a href="http://www.flickr.com/people/kenlund/">Ken Lund</a>.
Yellowstone. Photo credit: Ken Lund.
Earlier this year, JTech's president and owner Joshua Reynolds was accepted into Leadership Montana's 9-month program of personal and trustee leadership development. He and 48 classmates will take a comprehensive leadership curriculum and willtravel around the state learning more about what makes Montana and its communities tick.

The course recently began in Big Sky, Montana, where they learned from various state and local leaders — including Pam Bucy, Commissioner of Montana’s Department of Labor and Industry and Dan Wenk, Superintendent of Yellowstone National Park.

Future excursions will take Joshua and the rest of the Leadership class across Montana — to Great Falls, Bozeman, Helena, Miles City, Kalispell, and Billings. Learn more about Leadership Montana and all it has to offer on their website: leadershipmontana.org.