Web Design and SEO Blog

Jan201618

New Responsive Overhaul: Price Rite Drug

by Mira Brody in Announcements, Design, Development

Price Rite's Medical Equipment Page
Price Rite's Medical Equipment Page
JTech is proud to launch a new website for a local Bozeman pharmacy and medical equipment supplier, Price Rite Drug and Medical Equipment. Price Rite has been in business since 1972 in Montana and not only fulfills pharmaceutical needs, but also specializes in finding the medical equipment that will better your daily mobility. Randy and his knowledgable staff along with XSENSOR pressure mapping technology will help you find a custom and comfortable equipment fit and are available for equipment servicing and repairs as well.

Price Rite’s new site is optimized for mobile devices with updated branding and an interactive medical equipment page that allows customers to browse equipment by category and read about their catalog of products. There is also the option to request a consultation, order a prescription refill and keep up on Price Rite’s helpful health blog.

It was a pleasure working with Price Rite once again since their initial website build and we invite you to view their new site here.
Jan20165

Ooh…Shiny!

by Mira Brody in Announcements, Design, Development

Custom jewelry by Ooh...Shiny!
Custom jewelry by Ooh...Shiny!
Handcrafted Custom Jewelry with a Sense of Whimsy!
JTech is breaking ground on a new website, this time to display Josh’s sister’s jewelry shop, Ooh…Shiny! Based out of Ontario, Canada, Catherine produces handcrafted earrings, necklaces, bracelets and matching sets from a variety of materials. The website we build will feature a jewelry catalog with the option to purchase through her Etsy shop. While Ooh…Shiny’s inventory is variant, Cathrine also offers the option for customers to design custom pieces according to their specifications, a feature that will be included on the new site.

We look forward to working on an online home for Ooh…Shiny, a place to display her vibrant and beautiful works of art.
Dec201529

2015 Year in Review

by Mira Brody in Design, Development

2015 was a tremendously successful and busy year full of change and refinement for JTech. Having fully embraced our new work process at the end of 2014, we spent most of this year taking on new projects and precipitating this new process. We hired new team members, enhanced our website analytics capabilities, expanded our knowledge-sharing campaign outside of our own in-house publications and continued our relationship with MSU.

All of these attributions have supplemented our enduring objective: to make the website creation process a holistic experience and produce the most advanced product for our clients.

Join us on a journey to revisit a few noteworthy milestones from 2015:
year in review.
Photo credit: Unsplash, John Ottosson

5. Teaming up with MSU.
JTech has, with great success, continued our relationship with Jake Jabs College of Business at MSU. Each semester we host a new intern who helps our marketing team. In the summer we had Jason Trueblood, a student of Business-Marketing, and our fall intern, Sam McCue, has been invited to stay on for an additional semester. Sam has been a great addition to our office, gaining first-hand marketing experience, developing customized website promotion plans and search engine optimization strategies for clients.

4. Expanding our services.
You may have noticed more frequent literature postings on our own site, which comes with the addition of our in-house copywriter. I joined the team last March and have since been exposed to the very technical world of advanced website building. It has been a ton of fun as well as a huge learning experience to work with the entire team here in our Bozeman office. Not only do I produce weekly announcements and monthly technical and business blogs, but I also work with the team to refine and write outstanding content for our clients.

3. External publications.
It is always fun working with external publishers. We started the year by publishing some of our web design work on other technical industry sites, such as Web Designer Depot and Speckyboy. Every editor I have worked with has taught me something more about writing and it is always exciting to see reader’s reactions to your work. The four articles we’ve published this year are: Adapting Mobile Web Usability for Ad Content Blockers, The UX Case Against the Home Button, Driving UX with AJAX, and Using OmniGraffle for Web Design.

2. Server upgrades.
We recently installed new servers in our hosting facility; upgrades that will help us continue to better serve our clients and enhance the web performance of their sites. We are excited for what these upgrades will allow us to provide you in the future.

1. Some notable projects.
We had the pleasure of working with amazing businesses this year, from responsive overhauls to brand-new sites.

With the increase of mobile users, we worked with several clients to take their current online business and optimize it for all devices, whether desktop, tablet or phone. A few of our customers who got overhauls this year are: Montana Health Network, Clark Film Buying, Bank of Bozeman, Price Rite Drug and The Gem Gallery. We also launched many new sites, including Shipton's Big R, McKennett Law FirmHealthcare-Malpractice.com and Ryen Glenn Estates.

As 2016 unfolds, we look forward to more ways our team can collaborate and produce top-shelf projects at an ever-increasing velocity.
Dec201522

Merry Christmas and Happy New Year!

by Mira Brody in Announcements

Merry Christmas 2015.
Photo credit: Kate Zaidova, Unsplash

During this busy holiday season, we would like to issue a quick reminder of our office closures. The JTech office will be closed Friday, December 25th for Christmas Day and Friday, January 1st for New Years day so that our employees can enjoy the holidays with their family and pets.

We would like to take this opportunity to thank all of our clients for your continued loyalty. We hope that you have a wonderful Christmas and a prosperous and healthy New Year!
Dec201518

Custom Scroll Bars

by Mira Brody in Development, UX

When building custom websites, we’re always looking to develop new elements that will enhance the polish and experience of our finished product. One such enhancement is a custom scrollbar to replace the system default. System default scrollbars vary in appearance across different browsers and operating systems, sticking out like a visual sore thumb in the otherwise-cohesive interface of the websites we build.

Implementing custom scrollbars in our projects allows the opportunity to create a consistent interface across all platforms and lets us fix some minor user experience issues that come with using a computer’s default scrollbar. However: in order to confidently implement this solution, we must address the costs of changing the defaults.

The Costs.
A primary concern when implementing a custom scrollbar is the performance cost, demanding more of the browser and (on older or lower-powered systems) slowing down the website’s reactiveness to user input. Although this is of minimal issue on desktop browsers, it is noticeable on mobile devices with fewer computational resources to spare. For this reason, we disable custom scrollbars on mobile browsers.

Custom scrolling can be more than a new coat of paint — we’re able to modify the result of a user’s scrolling action as well. We call this scroll takeover, and it’s significantly more performance intensive than simple changing the appearance of a scrollbar. To see scroll takeovers in action, look at Apple's Mac Pro website or a website we built, Healthcare-Malpractice.com. Although some scroll takeover effects are unique and memorable, we still disable them on mobile. For any site that takes over scrolling behavior, you can expect some users to wonder why the interface isn’t responding to their input in the way they expect, taking away from the user’s experience. Scroll takeover can make scrolling faster or slower, or can trigger a longer action such as bringing up the next card in an interface. These effects can be used to emphasize or enhance a presentation, but we recommend using them sparingly — any situation where the interface doesn’t respond in the expected fashion can create broken expectations and frustration.

Another cost of creating custom scrollbars is that, depending on the solution you use, various input methods that users rely on may not work. System default scrollbars accept various kinds of user input: mouse scrollwheels, clicking and dragging on the scrollbar, up and down keyboard arrows, page up/page down keys, and swipe up/swipe down interactions on mobile. Our current implementation of custom scrollbars will not accept input from any keyboard keys until a user clicks inside the site, an improvement we are looking to make in the future.

As the computing power of phones and tablets improves, mobile browsers will have the resources to handle custom scrollbars. This will allow us to potentially use the same customized interface across devices.

Improved Aesthetics.
Custom scrollbars are one refinement that can elevate the fit and finish of a website above the sea of template-driven competitors. Although visitors may not always notice custom scrollbars, they are nonetheless an ingredient that can improve cohesion of the user experience. Just as you may not notice the typeface in which an article is written, you are likely not to take note of most details in an interface — instead, it’s important that everything works as expected and fits as part of a seamless whole.

Another improvement is their greater flexibility in positioning. If the page contains important fixed objects — such as a header or footer, the scrollbar can be positioned above or below those objects to indicate that they will be not be scrolled with the rest of the page.

 
JTech custom scrollbar.
For example: throughout our site, we’ve placed a fixed footer with a custom scrollbar resting right above it. The footer’s position allows access to vital footer information even on an infinitely scrolling page, like on our News page — while the custom scrollbar allows us a visual cue to show which elements of the page are scrollable. We’ve also customized the scrollbar with a custom color scheme and positioned it as an overlay so that page animations happen on the canvas behind the scrollbar, increasing immersion and cohesion.

Healthcare-Malpractice.com custom scrollbar.
A similar example appears on Healthcare-Malpractice.com, where you can see the custom-themed scrollbar resting just below the fixed header — indicating that even as you scroll down the page, information in the header will remain available.

Better Functionality.
Custom scrollbars can go beyond improving the look of a site to add to its functionality as well. With a custom scrollbar, we can consistently position our interface, eliminating jitter as a page readjusts or deals with overlapping scrollable areas without making the site appear clunky. All of these functionality issues, can be the difference between an unpleasant experience or cohesive, positive journey through a website.

Transitioning between the pages on a website should be a smooth experience, one unhindered by unnecessary repositioning of the layout. On websites using a default scrollbar, switching between pages can create a sudden horizontal shift as the page re-centers based on whether a scrollbar is or isn't present. Because we build on a 100% AJAX framework and often implement unique page transition animations, this unwanted content shift is even more pronounced.

Since they are part of the website rather than part of the browser chrome, we arable to use custom scrollbars to eliminate this jitter effect and allow a consistent transition while browsing.

Another functionality benefit of custom scrollbars is revealed when the page contains multiple, layered windows that are scrollable.

Healthcare-Malpractice.com double scroll.
On Healthcare-Malpractice.com, when you open a case study in a modal window, the single scrollbar on the right side of the browser controls the actions of the modal window instead of an entirely new scrollbar appearing to control scrolling of the modal window.

Mckennett double scroll.
On another website, for McKennett Law, there is no custom scrollbar. As a result, when a modal window is opened, two default scrollbars appear, one for the modal window and one for the page visible behind it. Although navigable in the average web browser, it is a superior experience to provide a single custom scrollbar that controls whichever page or element is in the foreground.

Our Technique.
In order to maintain that ideal user experience on a webpage, we utilize an element that has overflow scroll to allow our custom scrollbars to behave like native scrollbars. We then wrap that element in a container with overflow hidden and offset the inner element by the size of the scrollbars in order to hide them. On browsers that support it (webkit based) we use the pseudo css property of :scrollbar (:-webkit-scrollbar) to set the size of the scrollbar to 0 width and 0 height. This allows us not to 'hide' the scrollbars and produce a more seamless experience. Inside the wrapper, and positioned over the scrolling element, we create elements for the vertical and horizontal scrollbars that can be stylized.

CSS:
div.outer-scroll {
    position: relative;
    overflow: hidden;
}
div.inner-scroll {
    position: absolute;
    left: 0;
    right: -17px;
    top: 0;
    bottom: -17px;
    overflow: scroll;
}
div.inner-scroll::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}
div.inner-scroll::scrollbar {
    width: 0px;
    height: 0px;
}

HTML:
<div class="outer-scroll">
   <div class="inner-scroll">
        // Content goes here
   </div>
   <div class="bar-v">
       <div class="handle"></div>
   </div>
   <div class="bar-h">
       <div class="handle"></div>
   </div>
</div>

In order to cover the scrollbars, we use some javascript to detect the correct scrollbar size, and set a class on the html tag with the correct size.

JS:
(function() {
    var sw, el = document.createElement('div');
    el.className = 'inner-scroll';
    el.style.cssText = 'width: 100px; height: 100px; top: -150px; left: -150px; right: auto; bottom: auto;';
    document.body.appendChild(el);
    sw = el.offsetWidth - el.clientWidth;
    document.body.removeChild(el);
    document.documentElement.className = 'scroll-'+sw;
})();

CSS:
html.scroll-0 div.inner-scroll {
    right: 0;
    bottom: 0;
}
html.scroll-15 div.inner-scroll {
    right: -15px;
    bottom: -15px;
}
html.scroll-17 div.inner-scroll {
    right: -17px;
    bottom: -17px;
}

From here we attach event listeners for the scroll event to update the display of the handle and mouse clicks for the handle for dragging support. By implementing these techniques, we are able to maintain the behaviors that visitors are familiar with while refining the overall feel of a custom website.

Conclusion.
We build websites that are already visually and functionally distinct, so we want every aspect of the website to add to the sense of a unique, united interface. Although the potential drawbacks of performance must be paid proper attention, customizing a site’s scrollbar so that it fits in with the rest of the site’s custom interface provides an important part of an overall polished website experience. By building custom scrollbars, we not only refine the look, but also provide more flexibility in the design of our sites.
Dec201515

My Shipping Post: A New Advanced Website

by Mira Brody in Announcements, Design, Development

We are pleased to be a contributor to a brand new local business, My Shipping Post. My Shipping Post provides services to private shipping houses, small to medium businesses and individuals looking for streamlined affordable shipping solutions through the United States Postal Service.

For My Shipping Post, our Montana web developers are creating cloud software where mailhouses will have the ability to upload their company’s branding in order create their own online storefront for their customers to visit. They will be able to easily print, scan, and track parcels from creation to delivery.

The website we are building for My Shipping Post is an advanced piece of software that will allow private shipping house to expand their services as well as enhancing the way ecommerce businesses deal with manifesting parcels. We are excited to be working on this new project and encourage you to look forward to the launch of this new business service!
Dec20151

Sleek New Site for The Gem Gallery

by Mira Brody in Announcements, Design, Development

The new Gem Gallery site.
The new Gem Gallery site.
The Gem Gallery is Bozeman’s custom jewelry store, specializing in rare Montana Yogo Sapphires, and we just finished creating a beautiful online store to display and sell their products and services. We built their original site, updating it once in 2008, and are pleased to once more take their online business to the next level. The Gem Gallery is always a great team to work with and we know you will enjoy their new site as much as we do.

For the new Gem Gallery site, we began with a minimalist design, choosing to focus attention to the piece of jewelry on display. Earrings, necklaces and rings alike shine vibrantly on a white background, features enhanced by accents of gray and gold. Customers can shop for jewelry, view high definition photos of products and browse inventory using a series of advanced filters. There are sections highlighting their services and custom jewelers, as well as in-depth exploration of Yogo sapphires and Montana sapphires complete with imagery and its relation to the history of The Gem Gallery. The overhaul included responsive design to provide a great experience on mobile phones and tablets.

We are proud of the work we’ve done with The Gem Gallery and invite you to explore their new site.
Nov201530

What’s in an Interface?

by Mira Brody in Content, Design, UX

Like many industries, ours is filled with trade-specific jargon that is often confusing to the outside eye. This confusion can sometimes bring about communication issues with you, our clients. To alleviate this, our team has collaborated to create a list of interface jargon useful to both the insider and outsider in a typical website conversation, meant to guide you through the world of technology. By bridging this gap, we can hopefully lessen the level of confusion and instead instill a sense of curiosity and understanding of the work that goes behind these processes. Most importantly though, it helps both our developers and you work in unison to articulate what is needed to execute a successful project.

We enjoy not only helping to elevate your organization to success, but also educating our customers about the intricacies of our industry. The following list is a compilation from our team of some typical interface jargon you may hear us use from time to time.

Page (webpage)
A page is a web document that is usually written in HTML, or a similar code, and is displayed on a web browser. After the page loads, a single page consists of everything you can scroll through. Navigation to other pages is possible through links on the present page or by your browser’s navigation back or forward buttons. From our very own homepage, to an article on Wikipedia, anything displayed in a web browser can be considered a page.

Element
An element is a generic term for any distinct visual object on a webpage. It usually refers to smaller objects; for example, a slip would not be an element, but the “submit” button or block of text on the slip would be individual elements.

Primary Navigation
You will find the primary navigation at the top of nearly every website. This will include the key navigation elements, such as About Us, Products or Contact Us. Primary navigation allows visitors easy access to exactly what they are looking for without having to search. What to place in primary navigation is often up for debate. While others insist on keeping a “home” navigation point in the primary navigations, others have done away with it through the years.

Secondary Navigation
Secondary navigation is for content that is of secondary interest to the user. It can contain any content that does not serve the primary goal of the website but that users might still want to access easily. For some websites, it may be a preliminary list of their product categories, driving directions or a feedback form.

MHN Navigation.
On the Montana Health Network website, we implemented secondary navigation under their Area Health Education Center (AHEC) in order to ease navigation through this robust section of their site.

Gem Gallery Navigation.
Another way to successfully implement a secondary navigation is on Gem Gallery’s new website. While the primary navigation (in bold black text) highlights shopping options, the secondary navigation (in a more subtle gray) displays their many services that visitors may still find a priority to search for. Also included in secondary navigation is a link to their shopping cart and a store search field.

Footer
A footer is the bottom section of a website that can contain important information, such as a site map, primary or secondary navigation or other navigation points of importance. It also typically contains attributions as well as relevant copyright information.

The important thing to remember about the footer is that its existence is usually expected by users. When they are lost, or deep in the pages of a long webpage, the footer is often a place of recollection, where visitors expect to find certain information about a website. We usually include a site map in our footers, or a link back to the home page to eliminate any frustration.

Bank of Bozeman footer.
Our footer for Bank of Bozeman contains primary navigation icons as well as a complete site map and contact information.

A footer can be incredibly useful in the case of infinitely scrolling pages of content by fixing it to the bottom of the page. A fixed footer, especially one with a home button or site map, can help orient a visitor back to where they want to go without having to tediously scroll through the content they’ve read.

JTech footer.
On our news page, we’ve implemented infinite scrolling with a fixed footer to ensure you are never lost in our vast sea of content.

Slip (overlay)
What we call a slip is more commonly referred to as an overlay by other developers. This technique is not a separate page that is opened, but rather an element that overlays on the existing page. This element can be semi-transparent, creating a nice effect that lets the user know that they can get back to the page underneath once more by closing the slip that is on top. We treat our slips as separate pages, each with a unique URL that can be navigated through as well as bookmarked, making it easy to share photos, product or article detail and submission forms. They are particularly good for delivering content that is an “aside” to the focus of the user.

In some cases, the user is able to drag and place it anywhere on the page. We tend to make our slips modal on all websites. Modal slips, by definition, render the rest of the layout unusable; they take priority on the screen and force you to take action before you can use anything else. Our slips, for instance, are modal, and must be dismissed before accessing navigation.

Price Rite refill slip.
For the new upcoming Price Rite Drug site, we implement multiple slips so that customers can fill out a survey, a consultation appointment or prescription refill form without leaving the page they were on.

Gem Gallery video slip.
The Gem Gallery features a company video slip that can be played from their About Us page without interrupting your navigation through the site.

Drawer
Drawers, while they appear like a page, are a page-like construct that slides over the actual webpage, attached to the browser on one complete side. They are useful when you have enough information that it covers much of the content underneath; too much content to fit in a slip. Drawers slide out in the screen at the user's request (sometimes pushing or covering the underlying content), then slide back out of the way when no longer needed.

My Jtech drawer.
In our content management system, My JTech, drawers are a great way to manage records of articles. You can add a new article and view, edit or delete an existing one all in the news drawer.

Tab
A tab is a design pattern where content is separated into different panes, and each pane is viewable one at a time. The user requests content to be displayed by clicking or hovering over the content’s corresponding tab control.

Bank of Bozeman tabs.
Because they are ideal for effectively dividing content into categories, we organized Bank of Bozeman’s account types into easily browsable tabs. All are organized on the same page, but grouped into sections, and can sometimes have their own unique URL.

Palette
A palette floats on top of content and offers ready access to more robust tools, commands or useful information. They can also contain instructions or tips when an element is hovered over. A palette is also like a slip, except that it is anchored to another element at one point, in this case, anchored to the menu item you hover over. While our slips are usually modal, palettes on our sites typically are not.

Bank of Bozeman palette.
Again, due to Bank of Bozeman’s robust categorical information about their different business and personal banking accounts, a palette was ideal to utilize in their primary navigation. By hovering over one of the menu items, you can view all of the secondary navigation options on that page beforehand on the palette.

Inline
ElementAn inline element pushes content out of the way. In Google’s image search, when you select an image to view the other images are shoved aside in order to make room for the selected image’s details. Inline elements are particularly preferred on mobile devices.
Gem Gallery filter
An example of an inline element is our advanced filtration system for The Gem Gallery. This dialogue, instead of covering existing page content, pushes the items down as it slides and the product results update based on the filters you choose.

Pop-up
A pop-up is a small display area that suddenly appears in the foreground of the visual interface. Pop-ups are usually initiated by hovering your cursor over an element and are useful for displaying additional information that is helpful to visitors without them having to leave the page they are on. The main differentiator between a pop-up and a palette is that the former is usually a quick glance at minimal information and are anchored above their related content, while a palette displays more robust content and is more likely anchored below.

YMCA's calendar.
Our interactive calendar for the Gallatin Valley YMCA uses pop-up windows to allow users to obtain more information about events with the option of leaving the page.

Estes Park's breadcrumb trail.
Estes Park's breadcrumb trail.
Breadcrumbs (Rabbit Trail)
A breadcrumbs trail (also known as a rabbit trail) can be used to show your location in a multi-step form or deeply layered navigation. The trail is made up of links, usually at the top of the webpage, that describe your position in the site’s hierarchy in an unobtrusive fashion. This can help alleviate confusion for sites with numerous navigation options or different departments.

NRTRC's breadcrumb trail.
NRTRC's breadcrumb trail.
We applied breadcrumb trails to both Estes Park Medical Center and the Northwest Regional Telehealth Resource Center websites. Estes Park, because they are a hospital, have a number of departments to navigate, organized in a secondary navigation; their breadcrumbs help show users their position through these departments. NRTRC hosts annual conferences and their site supports the robust information they provide for conference attendees, making breadcrumbs an effective application here as well.

Gem Gallery's breadcrumb trail.
Gem Gallery shows breadcrumbs as you move through their shopping cart check-out forms, allowing you to view where you are even if you backtrack and change information as needed.

Bridging the Gap
Communication is vital to form a strong working relationship with our clients, especially during planning. In order for us both to see the same vision for your finished product, some basic technological design terms can really help to bridge the gap between you and our team members. When we’re both speaking the same language, we can better define what you want out of your organization’s online presence and translate that into a highly-functional, advanced website.

We look forward to writing future articles highlighting the different terms we use in the web development, design, planning and marketing processes in order to continue our campaign of industry education with you.

Nov201524

Happy Thanksgiving!

by Mira Brody in Announcements

Thanksgiving table setting.
Photo credit: Chelsea Francis, Unsplash

Our office will be closed Thursday, November 26th and Friday the 27th for the Thanksgiving Holiday. This holiday season we would like to take a moment to give thanks not only for good fortune and health, but also to all of our clients who make coming to work everyday a fun and fulfilling experience.

We are so thankful for all we have and wish you a happy Thanksgiving from the JTech family to yours. We will see you all back at work on Monday the 30th.
Nov201519

JTech Server Updates

by Mira Brody in Announcements

On Friday, November 20th, at 8:00PM MST we are conducting server maintenance that will greatly improve the service we provide our clients. This is a major server upgrade for our company and we will work to resume all services as soon as possible.

We thank you for your understanding and are very excited to bring this new equipment online to better serve our customers.