Web Design and SEO Blog

Jan201629

New Advanced Website: Best on Board

by Mira Brody in Announcements, Design, Development

Best on Board helps leaders in healthcare more effectively govern on behalf of the communities they serve through communication, education and certification programs. Their courses focus on strengthening current and prospective trustees of the healthcare system to deepen their understanding of board responsibilities and can be taken in person or online.

Best on Board was acquired by one of our clients, Montana Health Network, and our designers and developers will take this opportunity to reestablish their brand by building them a new website using responsive web design. While their new website will initially be narrowly-focused, providing a menu of their courses, description of Best on Board’s role in their communities and a contact form for support and inquiries, in the future they intend to rebuild an entire application to raise it to modern standards.

We are excited to be working with MHN again as a part of their new venture!
Jan201627

A New Project: REM Solutions

by Mira Brody in Announcements, Design, Development

Our team is working on a new site — REM Solutions. REM Solutions offers a multitude of support to small and medium businesses, specializing in payment processing, operations management and fraud protection. Although many merchants offer the ability to process credit and debit cards as payment for their services, it is often a confusing territory with little to no customer service involved. REM offers friendly services with comprehensive support and demystifying analysis of the most cost-effective options for your business.

We are designing a site that provides a simple breakdown of the services REM provides complete with a contact form for potential customers. We are excited to get started on this new project and present an outstanding resource to the local community.
Jan201625

Acquiring Website Imagery Legally

by Mira Brody in Content, Imagery, Tools & Tips

Using images legally.
If you aren’t sure, don’t make the mistake of waiting until you get a cease and desist letter in the mail. Although imagery is a crucial aspect of your site, if you didn’t create the photo yourself, chances are you’ll have to seek permission from the copyright owner.

Pulling images off of Google or other search engines can be a gamble due to the use of software by copyright companies to track their property — it just isn’t worth the risk. Here are some safe ways to make sure you are image sourcing without risking your credibility or income:
  • Create the image yourself. Either by honing your own photoshop or photography skills or hiring an expert for your job.
  • Contact the artist. Many artists and image resources are fine with you purchasing their work, but will ask for a fee, a copyright agreement or a proper attribution.
  • Utilize public domain. There are a ton of sources that provide images for free because their owners have deliberately released them for public use. (Unsplash, Pixabay, PicJumbo and PublicDomainPictures, to name a few).

Images are a huge part of your organization’s initial presentation to visitors, but infringing a copyright can warrant some serious consequences, making it well worth the time and money to acquire yours legally.
Jan201622

Add Branding to your Map using ‘Snazzy Maps’

by Mira Brody in Tools & Tips

Snazzy Maps.

Location, location, location. We’ve so often been told that when it comes to running a successful business, location is key. So what happens when your business conducts a lot of its work online? Although there are an abundance of mapping applications available to those looking to embed interactive directions to their online interface, Google Maps remains the stedfast choice due to its precision and familiarity.

How to add Google Map directions to your site without it looking like the bland page of a Craigslist post, though? Enter: Snazzy Maps.

Snazzy Maps allows you to:

  • Customize coloring and texture to your personalized Google Maps
  • Create and display custom labels
  • Easily embed them in your site using a Javascript API
  • Use these maps on your site for free, due to a Creative Commons License

Price Rite Snazzy Map.
The conviction your visitors have when navigating your website is not only dependent on them finding what they need, such as directions to your storefront, but is also improved by a flawless design experience. Our developers use Snazzy Maps in order to match the unique branding of our customers’ sites, much like we did for Price Rite Drug, displayed above. We are able to apply the hex codes of the purple and green into Price Rite’s design interface to the responsive map on their Contact Us page to allow for a more cohesive look throughout their site.

Customizing the map on your site is a useful design pattern to better serve those using your website, will add convenience and solidify your branding, leading to increased user interaction and trust in your organization.
Jan201621

We’re making some exciting changes to our News Page.

by Mira Brody in Announcements, Content

In the past, we’ve supplemented our website with technical and business-related articles as well as weekly announcements. To start off the new year, we’ve adapted a few changes to this publication process:

Flexible, consumable content. We have a lot of experience in the technical world and we want to share what we believe will benefit your business in the most consumable way possible. Browse between marketing and SEO tips, industry happenings, company announcements and other articles discussing web design and development.

Locate what you need or browse what you want. We’re rebuilding our news page to include categories and a search filter, ensuring you can find specific articles or simply browse a subject you are most interested in. Also in the works is a “related content” display, which will show suggestions based on the tags your are using.

We hope these changes will be beneficial to you and your success as we continue to build custom solutions and knowledge-share to help you thrive online.
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.