Web Design and SEO Blog

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.
Nov201517

JTech’s Image and File Uploader

by Mira Brody in Design, Development, Imagery

Next FX's multiple image uploader.
Next FX's multiple image uploader.
In the past, uploading images and files to websites has been a clunky and inconvenient experience for the end user. The typical upload control consisted of a single upload button and a short text field. The primary issue with these primitive controllers is the lack of user options and feedback provided during the process of uploading, leaving the user powerless and often confused and frustrated.

Thanks to updated browser support, a variety of relatively new technologies allow us to improve this experience by developing robust file and image upload controls for the custom sites we build for clients and in our advanced content management system, My JTech. We support image, file and multi-image uploads with the following functionalities: drag-and-drop, editing and crop tools, progress bars, error states and original file naming.

We’ve put a lot of effort into our custom website image and file upload controls in order to make them a much more enjoyable experience to use. To learn more about the web development techniques we’ve employed, check out our exploration of these features in this month’s technical blog.
Nov201510

Maintaining Relevant, Relatable Content

by Mira Brody in Announcements, Content

Photo credit: Florian Klauer, Unsplash
Photo credit: Florian Klauer, Unsplash
If your business has a story, chances are, you’ll want to tell it. Humans are natural storytellers; we seek tradition and relationships in our everyday interactions. We relate our own experiences to the text we are reading in order to establish our footing in a situation.

In order to solidify the relationship your business has with site visitors, you must maintain relevant, relatable content on your website. Copy not only helps boost search engine optimization so that potential customers can find your business via organic search; copy also provides vital information about what you offer and enhances the lasting, personal experience you want customers to feel when interacting with your organization.

Custom copywriting is among the array of web development services that JTech provides to help grow your business and advanced websites. Whether you need a content refresh for your website’s evergreen content or someone to manage a blog, newsletter, product offering or social media account, we can find the best plan to fit your needs and goals as a thriving business. Contact us to find out how a fresh approach to your website’s copy can enhance your business today.
Nov20153

Healthcare-Malpractice.com Goes Live

by Mira Brody in Announcements, Design, Development

Healthcare-Malpractice.com isa resource for victims of malpractice.
Healthcare-Malpractice.com isa resource for victims of malpractice.
We’ve been developing a website for Healthcare-Malpractice.com and are happy to have recently launched phase two!

Healthcare-Malpractice.com helps victims of the healthcare system discover whether or not they are owed compensation for their alleged medical malpractice incident. Through this site, victims submit information detailing their unfavorable experience and the case is referred to healthcare professionals who will help determine if malpractice occurred. The site will then facilitate an attorney to take on the victim's case.

All of this is made possible through the implementation of dynamic forms and a complex email notification system, keeping users engaged and encouraged through the process. On the administrative side, our client can easily manage the site’s backend through our content management system, My JTech, ensuring that all victims receive information unique to their particular case. Additionally, to help victims cope, Healthcare-Malpractice.com allows users to read, share and comment on article posts, offering a place for discourse, support and education.

This site represents a complex and large system, executed through a variety of different phases. As this phase gains momentum, our team will be working on additional features that will allow both healthcare professionals and attorneys to sign up and ease the assistance they provide victim members of Healthcare-Malpractice.com. The process will become more and more efficient, completely changing the way victims of medical malpractice regain justice for their suffering.
Oct201527

Estes Park’s Special Offerings

by Mira Brody in Announcements, Design

Estes Park Medical Center gets some site additions.
Estes Park Medical Center gets some site additions.
Estes Park Medical Center, a longtime customer of JTech, is offering special classes and educational programs as a part of their Wellness Initiative for those looking to make improvements in their lives. In order to showcase these great offerings, we’ve added a new dynamic section to their site that can be easily managed and changed as new classes are offered. The new page will reside under the current Patients & Visitors menu and will include optional flyers and downloadable class materials. Estes Park has the option of featuring individual special offerings on other sections of their website where appropriate to garner more attention from site visitors.

This will be a great addition to an already robust advanced site and will bring greater prominence to the array of beneficial programs the Estes Park Wellness Initiative continually offers their community.
Oct201523

JTech's Image and File Uploader Provides Essential User Feedback

by Mira Brody and Patrick Milvich in Design, Development, Imagery, UX

The classic file uploader featured a file name field and button.
The classic file uploader featured a file name field and button.
Historically, uploading images and files to websites has been a clunky and inconvenient experience for the end user. The typical upload control consisted of a single upload button and a short text field where the path and name of the image or file chosen for upload would appear. This control provided no preview, no loading progress feedback, no communication to the user whatsoever other than an error if the user broke rules that were not previously defined to the user. Updated browsers support a variety of relatively new technologies that allow us to improve this experience dramatically. By developing robust file upload and image upload controls, we have been able to improve the experience of these functions in our content management system “My JTech.” Additionally, we developed these controls so that we can customize them to easily be deployed on the sites we built for our clients as well.

In this article, we discuss the major features, thinking and methodology of these technologies in the hopes that it will help other developers provide excellent user feedback when implementing file and image upload controls.

Drag-and-Drop
Drag-and-drop in computing has been around since the 90s and can be a convenient way for your users to be able to upload files or images. We use two HTML5 technologies for drag-and-drop in our advanced uploaders. Drag-and-drop on a page allows you to set an element to be draggable, then register for events when you drop that element elsewhere in the DOM. However, in order to drag-and-drop files from the OS file browser, some support for the File API (1) is needed; luckily, the part of the File API required for drag-and-drop is widely supported on desktop browsers.

“multi-upload
One of our more advanced, multi-image upload controls is on the Next FX website. If you drag-and-drop multiple images, the photos will automatically compress on the client side and provide queue feedback. Source: Next FX

We detect drag-and-drop on two levels. The first is to drag a file into the browser window, which allows us to highlight and style any available drop targets. The second level of detection is when you drag your file over a specific drop target, changing the target’s appearance to indicate that your files have reached their destination.

“Montana
We built Montana Health Network a file uploader for their staffing agency page. Instead of prospective employees being forced to email their resumes separately, we streamline the user experience by implementing an advanced file upload option for resumes as part of the job application integrated on their website. Source: Montana Health Network

The drag-and-drop events act more like the mouseover/mouseout events instead of the :hover pseudo-class (a theoretical mouseenter/mouseleave). We’ve created a custom event we call ‘jt-drag-enter-leave’ that implements two different enter/leave detection methods. One for IE (due to dragleave events not properly firing all the time) that manually detects if the position of your cursor is over the element you are in, and the other using a simple push/pop technique of dragenter/dragleave events (once it reaches 0 we’ve left the area).
Push/Pop Technique:
var el = document.getElementById('dropEl');
var count = 0;
function enterFunc() { ... }
function leaveFunc() { ... }
el.addEventListener('dragenter', function() {
   if(count == 0) enterFunc();
   count++;
});
el.addEventListener('dragleave', function() {
   count--;
   if(count == 0) leaveFunc();
});

Performing this additional work allows us to avoid adding or removing classes/styles to elements while the user drags over children of the drop target element — otherwise visual flickering can occur. This visual effect is especially apparent if the child elements have borders — in some browsers, a tiny gap occurs between the dragleave event triggering and the next dragenter event as the cursor passes over an element's border.

We also support a simple click or touch if a user prefers that method. We do this by placing a file input that is oversized and anchored at the top right of a container with overflow hidden. The input has an opacity of 0 so that the input control is hidden. We anchor it in the upper right to avoid users clicking on the text component of the control that some browsers implement.
CSS:
div.uploadContainer {
   position: relative;
   width: 150px;
   height: 30px;
   overflow: hidden;
   ...
}
div.uploadContainer > input {
   position: absolute;
   right: 0;
   top: 0;
   cursor: pointer;
   font-size: 200px;
   border: none;
   margin: 0;
   opacity: 0;
}

HTML:
<div class="uploadContainer">
   <input type="file" name="aFile">
</div>
The options and visual communication made possible by drag-and-drop make all the difference to a user by providing feedback and a much refined appearance.

Using Canvass in the Browser
Common formatting problems that occur during an image upload can be solved by uploading images through Canvass, which allows for an uploaded image to be validated in the browser before it is saved on the server, saving time, effort and bandwidth.

As an image or a file is uploaded, we provide visual feedback to the user and store it in a temporary location on the server. This feedback prevents uploading a file multiple times on form submissions, saving bandwidth and eliminates confusion and frustration on the user's end. When the form is fully submitted and validated, we then move the temporary file on the server to the final location.

Images uploaded by a user are often from a variety of devices and therefore are sized inadequately. While there’s not much to be done about images that are too small, we can format the larger images pulled directly off of digital cameras. If a user’s browser supports FileReader and Canvas technologies, we resize and very slightly compress the image in order to create a more suitable “original” to be uploaded. The resized image is still high quality, but often reduces 10MB+ images closer to 1-2MB, saving on bandwidth and server processing.
Resize Image from file input type:
var input = document.getElementById('fileInput');
var file = input.files[0];
var reader = new FileReader();
reader.onload = function(e) {
   var img = new Image();
   img.onload = function() {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      var width = 500, height = 500;

      ctx.drawImage(img, 0, 0, width, height);
      var data = canvas.toDataURL('image/jpeg', .95);
      ... // do what you will with data
   }
   img.src = reader.result;
}
reader.readAsDataURL(file);
An added benefit of these technologies is that we immediately generate a secondary thumbnail image, but instead of actually uploading it, simply display it to the user. This way, the user receives feedback about what image is being uploaded even while it is still in the process of uploading.

On the Shipton's Big R community page, a white fill is placed around sponsor logos.
On the Shipton's Big R community page, a white fill is placed around sponsor logos.
Editing and Crop Tools
Our advanced image control features are implemented in My JTech where users can not only upload an image, but make minors edits to it as well. We've included the ability to flip an image, replace, delete and crop.

After you've uploaded an image, we allow you to adjust the crop for all the different ‘cuts’ we produce. The cuts represent the different ways an image may be used on a website. Based on the design of the website, we define dimensions for each cut image, an image ratio if applicable, and an optional fill space around the image if an image ratio needs to be preserved; this last feature is particularly useful for logos, which are often badly cropped unless a white fill is added around the image.

The user is presented an interface that respects the crop ratio, if there is one, and allows them to resize and drag a box representing their current cut with the cropped portions shaded out. We’re able to do this by having one background image with four other elements that make up the top, left, right, and bottom shaded elements. When you drag or resize, we readjust all the shaded elements to give the impression that you’re moving one box.
A variety of editing tools are available in My JTech, like this crop tool used to size the photo on Gem Gallery's homepage. Source: The Gem Gallery

We store the new dimensions after you resize a cut, but do not replace the cropped file until you click save; we keep the original uploaded file on the server to avoid image degradation on the newly generated cuts.

These edit controls completely optimize the quality of uploaded images as well as user control over their displays, ensuring the most advanced tools for managing the content on their site.

Progress Bars and Error States
One issue with archaic image and file uploading tools are their inability to provide the user with adequate feedback. With these older uploaders, after a file is selected, there is no notion of progression until the upload is completed, leaving the user with an amount of confusion as they wait. To alleviate this negative experience, we've implemented progress bars into our upload controls as well as specific error states when an upload is unsuccessful.

Once a file has been selected, while an image or file is being uploaded we display its progress in an animated bar, allowing the user to associate their action to an impending result. If the browser supports AJAX 2, we use AJAX to send the file and are able to display a bar that fills up 0-100% as progression occurs. Otherwise, we use an iframe fallback where we create a temporary iframe and redirect the form to submit into the iframe. During the iframe upload we display a pinstriped “barber pole” progress bar instead of one that fills up. These progress bars will also display for up to three files at a time during multi-uploads, with all subsequent documents queued and waiting for their turn.

We've prepared for a variety of different error states to help in the instances that a file or image is not supported or has uploaded unsuccessfully. Before uploading, to avoid the bandwidth cost, we check the file extensions to ensure it’s part of an approved file type (we support .jpg, .png, .gif, and .bmp files) and present an error message if it is not. When uploading an image to a browser that supports pre-formatting, we are also able to validate the image before we send it to the server. As a final state, we verify valid images on the server as well.

These robust feedback cues greatly improve the user's overall experience on your website and can be the difference between a frustrated customer leaving due to lack of response, or staying to complete their transaction.

File Naming
With file uploaders, file naming is often a challenge because the information is being provided by the user, who often upload multiple files of the same name, use undesirable characters such as spaces or punctuation in their file names. We support original file naming, offering more customization to the user yet eliminating the confusion of a user choosing an unsupported file name. We automatically rename files when they are uploaded to names that are far more web-friendly, cleaning it up behind the scenes. We replace spaces with dashes, then remove any characters that are not letters, numbers, dashes, underscores or periods. This also inherently strips slashes that might otherwise cause requests to go outside the file structure we’ve defined to store the files.

The following regular expression is what we use to scrub the name:
/^[a-zA-Z0-9\-_\.]/
In php:
preg_replace('/^[a-zA-Z0-9\\-_\\.]/', '', str_replace(' ', '-', $filename));
In order to maintain that improved user experience, we went to a great effort to preserve original file names as much as possible so that the items are still recognized by the user. We've found that renaming is an easier way for users to maintain control over their uploads while still making it more readable for the web.

Conclusion
Although image and file uploaders are extremely useful for doing anything from uploading resumes, refreshing homepage photos and more, the experience has, in the past, been less than favorable. Primitive, visually bare and with a substantial lack of user feedback, these upload controls were not friendly to the average user and often caused not only confusion, but unnecessary errors and a poorly formatted end result as well.

With the availability of advanced technologies, we’ve been able to greatly improve the experience of this website standard by providing robust user feedback, techniques we've applied to the framework of our websites. These tools are a benefit to our custom content management system and also add substantially to the fit and finish of the user-facing aspects of the advanced websites we build -- a benefit to both the site administrators and customers alike.

In the future, we intend to implement multi-file uploads, as well as feedback for when too many files are selected at one time, additional file type support and even more specific error states. As new technologies become available and supported, we will be able to provide an ever-more polished experience. If there are solutions that you’ve found useful as well, contact us; we’d love to hear your ideas.

Sources