Web Design and SEO Blog
Nov201510
Maintaining Relevant, Relatable Content
by Mira Brody in Announcements, Content
Photo credit: Florian Klauer, Unsplash
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 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.
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.
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
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
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.
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.
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();
});
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>
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);
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.
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.
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
Oct201520
Upcoming; Price Rite Drug Website Overhaul
by Mira Brody in Announcements, Design, Development
Price Rite's current site will get a responsive overhaul.
We built Price Rite’s current site back in 2008 and at the time had implemented a double home page system that divided their two main services into separate sites. For this new overhaul, we will combine the two service-focused websites into a single cohesive site and will implement responsive web design so that it is accessible from all internet devices. Aside from reorganization to clearly represent the scope of their business, our team will design an updated user experience — a fresher aesthetic and content creation to improve search rankings and more comprehensively describe their catalog of products and services.
We are excited to be working with Price Rite again and look forward to diving into their responsive website overhaul soon!
Oct201513
Adapting Mobile Web Usability for Ad Content Blockers
by Mira Brody in Design, External Publications, Industry News
Content blocking is going to substantially change the way in which we view content online. Although a lot of people have heard of and use AdBlock already, the newest iOS and OS X updates promise a staggering variety of more selective content blocking applications that will not only block ads, but prevent tracking activity and lessen the burden of heavy bandwidth and battery usage that many advertisements place on mobile devices.
Problems are created by most of these forthcoming content blockers. Not only do they block advertising that provides revenue for many sites, but they also block scripts that are necessary for a site’s essential functionality. To counter this, web developers are forced to adapt their coding techniques to maintain functionality in the face of content blockers being employed by visitors.
To address this major change in the world of website design, we have published an article with Speckyboy Design Magazine, a designer’s resource for tutorials, and insightful articles on the latest web technologies. The piece is titled “Adapting Mobile Web Usability for Ad Content Blockers” and we invite you to read it here.
Oct20156
JTech Custom Search Marketing Plans
by Mira Brody in SEM, SEOA website, no matter how advanced, attractive or user-friendly, can’t work to its full potential without visitors, which is why putting some effort into search marketing is essential to grow your thriving website. Every business is different — different target customers, products, services, goals and ideals — so your approach to website marketing should never be cookie-cutter.
At JTech, we design detailed search marketing plans for you to acquire customers. Whether you have an aging site that would benefit from additional traffic to challenge a competitor, a new product line, or you’ve just launched a brand new interface — your site should be attracting targeted customers and making you money. Our skilled marketing team at JTech creates marketing plans to best fit your organization’s needs and goals, breaking down a clear strategy:
- We outline current SEO rankings, competitor rankings and ways to improve those numbers.
- We’ll explore social media solutions, pay per click and other search advertising options.
- We create brand personas in order to build a search acquisition plan that will reach the determined target audience.
- With Analytics and performance monitoring, we can track which keywords and ad campaigns are succeeding and which ones need to be tweaked to help you meet your goals.
Interested in building a customized internet marketing solution? We are happy to discuss an approach that will meet your budget requirements to find the right balance for the success of your business.
Sep201529
JTech Offers Social Media Plans
by Mira Brody in Announcements, Content, Social Media
73% of the US population has a social media account (1) and over half of those users check their Facebook, Twitter or Instagram at least once a day (2). This is an enormous audience for your organization’s marketing efforts.
We understand many businesses do not have the time or effort to throughly utilize this huge resource. Our internet marketing specialists offer social media packages, customized to each business’s needs. In addition to setting up and launching any desired social media accounts you feel would benefit your organization, we will consistently provide fresh content for you, engaging your audience and driving them to your website.
Your social media sites will constantly be working for you as we follow a custom marketing plan, built for your company’s goals. By expanding your marketing efforts to social media, you can gain the attention of new customers everyday, collect positive reviews and provide customer service, all through Facebook, Twitter, Google+ or your other social media accounts. If you are interested in greatly increasing your business’s audience and improving your marketing efforts, contact us to put together a social media package today.
Sep201528
JTech Partners with Merchant Services Provider
by Mira Brody in Announcements, Development, Tools & Tips
Photo Credit: Stevepb, Pixabay
Business owners today are often heavily solicited by merchant account providers, the majority of whom use aggressive sales tactics, know very little about the complex industry they're in and after the sale, are nowhere to be found. With the overwhelming amount of options available, the ever-changing marketplace and the generally confusing terminology, it is an asset to be able to consult with a seasoned expert in the merchant services industry. With the assistance of our partner, we can give you an honest analysis of your current account structure to make sure you're saving money and have the most ideal online solution. This thorough planning process ensures you always get competitive credit card processing rates, have the most streamlined system and are provided the tools to mitigate risk, making for effortless business transactions, operations and overall happier customers.
We’re very excited to be able to offer this no cost service for your website. To take advantage of this opportunity and make sure you're getting the most out of your merchant account, or if you have questions, contact us today.
Sep201522
There’s No Place Like The Home Button
by Mira Brody in Design, External Publications, UXJTech has published another successful article with the online web designer and developers information resource, Web Designer Depot. The piece is titled: The UX Case Against the Home Button.
Below is a synopsis of the article. You can enjoy it in its entirety here.
As users become more fluent in navigating the intricacies of the web, having a prominent home button is becoming an unnecessary navigation crutch — a visual obstacle that web developers increasingly eschew. By culling the home button from this list, the decision-making process is simplified and we are able to provide an improved user experience. Reserving it a space in your site’s primary navigation when the same functionality exists elsewhere is a waste of valuable real estate.
Reducing decision-making and cognitive load for your users will help encourage more conversions — purchases, videos watched, articles read or whatever tasks your site helps visitors complete. Even giant organizations such as Amazon, Apple, Twitter and Wikipedia have done away with their home button because home is not where the primary source of interaction is taking place, but merely a location for featured offers, promotions or a table of contents. This is a philosophy we’ve integrated into our custom website development as well.