Web Design and SEO Blog
JTech’s Montana web development team is planning a new website for NRTRC that is robust and modern, including responsive website design and a clean information architecture that makes finding important telehealth information easy. We're excited to be developing an advanced custom website with NRTRC that perfectly suits their needs — and to help facilitate the flow of vital telehealth information to telehealth service providers.
Our Bozeman, Montana advanced website development team upgraded American Paintball Park's website with an online scheduling system that helps clients reserve space at their event facility. We designed and built them a custom website calendaring system that manages availability and reservations for paintball parties of differing lengths and sizes without double-booking or manual data entry for who booked what and when.
The new website system’s design takes potential paintballers through an easy web interaction — first, pick how long a party you want and how many friends you'll be bringing. Second, pick an available slot for parties of that length. Then, let American Paintball know who you are and how they can get ahold of you to keep your reservation. That's it! Web development that makes it as easy to schedule an event as splattering your friend with a few rounds of brightly-colored pigment.
On the newly updated JTech website, we've built a single form that handles all of our frequent contact scenarios. For people who are saying hello or giving simple feedback, the form has one page and the message can be quickly sent — no hassle.
For customers wanting to file a service request, or for potential customers asking us about a new project, our form dynamically increases in complexity, by requesting information about their company and their project in additional stages. If they're looking for a new project, the form sends their inquiry to a different department than forms requesting maintenance or updates to an existing project.
These examples are just the beginning. Using forms, your website can become as interactive as you need to serve all of your target audiences.
We have a long-standing relationship with the Gallatin Valley YMCA. They're doing great work in our community, and we're proud to sponsor them. Most recently, we've overhauled the registration system we built for their programs, events and athletics to streamline kids being added to the appropriate sports teams.
We've continued to improve their site since it first launched in 2011, and have always been pleased with the clean, cheerful, robust website. The Gallatin Valley YMCA is a pillar of our community — if you're interested in volunteering, sponsoring or are interested in enrolling your kids in their program, visit their website!
Josh Hamilton collaborates with Mike Kostrey, our Search Marketing manager, focusing his energy on outreach and optimization. When he's not devising strategies to help JTech's clients succeed online, Josh travels the nation playing ultimate frisbee with the MSU and Bozeman club teams. Welcome, Josh!
The course recently began in Big Sky, Montana, where they learned from various state and local leaders — including Pam Bucy, Commissioner of Montana’s Department of Labor and Industry and Dan Wenk, Superintendent of Yellowstone National Park.
Future excursions will take Joshua and the rest of the Leadership class across Montana — to Great Falls, Bozeman, Helena, Miles City, Kalispell, and Billings. Learn more about Leadership Montana and all it has to offer on their website: leadershipmontana.org.
Have a look at the gallery we built of Swanson Construction's Custom Homes and Architectural Projects.
An introduction: shiny things, negative space and usability.
As JTech’s designer, I’m the visual voice behind the curtain of almost all our recent websites. My formal training is in visual graphic design, but my youth was squandered tinkering in ResEdit, hand-coding HTML, and deconstructing user interfaces. I’ll be making regular contributions about the graphical aspects of modern web development for the JTech Technical Blog.
Fast-forward to the present.
Two years and many workflow iterations later, we're reorganizing almost everything to accommodate an internet that's changing dramatically as we watch. The size and shape of devices used to reach the internet has become wildly variable; in fact, the only thing we can (generally) count on is that our work will be presented in a frame that resembles a rectangle.
Here's a guiding statistic: 45% of all 18-29 year olds who use the internet on their phones do most of their online browsing on their mobile device. That's enough to make you stop and think — will the website you designed for a conventional monitor turn people away when they try to use it on their phone?
Responsive web design.
There are a few solutions to the problem of providing an optimized experience on multiple screen sizes, but we’ve chosen responsive web design, an approach that delivers a single build that responds dynamically to the size of the screen being used. Responsive sites rearrange their layout and resize their text and images to provide a readable, beautiful experience at any resolution and on any device. The latest draft of our own website is the first site we've created that adopts responsive design principles, albeit with more “break points” than we’ll usually produce on client work.
As a designer, I'm scrambling to adapt to the challenges posed by responsive web design. Most of my challenges involve thinking in different viewports — rearranging, scaling, and showing or hiding elements of the website. Photoshop‘s role in the design process has been reduced— it defines the visual polish of the site, but plays a subordinate role to wireframes and behavior prototypes, where most of the work is done.
The puzzle of rearranging a website is sometimes called content choreography. This process gives the content a larger role in defining the design, because one of the earliest steps in developing a site's layout is determining the hierarchical importance of content — and which pieces of content need to remain associated with each other when the site is rearranged.
Scaling is a large part of content choreography. Should I scale the whole box, or just the content within it? Considering scaling has initiated changes in the way I create assets for the web. Because typography is universally-supported and fully-scalable, we've begun to build custom symbol-fonts for our new web projects (we started by using Fontello as a springboard). I collaborated with Patrick, our VP Technology, to build a symbol-font for the JTech site that we employ for our arrow buttons and close Xs. It not only scales well — it’s also lightweight and is easily animated using CSS. We've experimented with SVG and CSS shapes, but we’re limited by browser support and performance from using them extensively. On the latest iteration of the site we use CSS gradients in some places while employing raster images elsewhere to keep things snappy.
When our sites are viewed at extremes on either end of the spectrum — within very large and very small viewports — we need to do more than rearrange and resize the elements of each page's design. Perhaps the most common example of hiding complexity is primary navigation, which is often tucked away behind a menu button when the site is being viewed on a mobile phone or in a small window on your computer. Look at our website to see this in action — and see if you can spot some of the other content we hide for the mobile breakpoint of our site.
Redefining the workflow.
Our workflow continues to evolve as we change our web development goals. Layout is defined by wireframes — three different sets, at breakpoints for desktops, tablets, and mobile phones. Our wireframes are heavily annotated, with descriptions of how the site's design will morph as it deviates from our pre-defined resolutions. An example of this behavior: as the window gets bigger, column width may increase, the space between columns will grow, and the imagery will always scale so that it exactly fits properly. I want our websites to flex and grow naturally and look nice — even for scenarios that I haven't considered explicitly.
We use OmniGraffle (by the OmniGroup) to create our wireframes. It makes diagramming and layout simple — and most importantly, makes it easy to change things on the fly. For static layout, I find that OmniGraffle represents everything that Photoshop lacks. We augment these wireframes with behavior prototypes for interaction and animations, experimenting with tools like Adobe Edge and After Effects. This aspect of our workflow is very new and my own confidence in animation design is gradually growing as we integrate interaction into our designs.
Our workflow extends beyond our office — and beyond the goal of building a website that looks great regardless of the device. We also need our clients to understand what it means for their website to be responsive. When our clients are on board and understand that their website’s layout isn’t static, they will be better partners in defining the content and its hierarchy with us — in turn making their website an effective piece of communication. As I become more experienced designing responsive websites, I will in turn improve at articulating the responsive experience to our clients and how they should think about their website.
OK, so we're still figuring it all out.
The wild pace of change is what makes being a human interface designer exciting. Unsolved puzzles, new frontiers, and new details abound. I know I’ve just scratched the surface, and I’m eager to see what’s around the next bend.
I'm enthusiastic about all the changes coming down the pipe, and I'd love to hear from people who’ve experienced making the shift to responsive web design. If you can help us avoid your mistakes, even better! Drop us a line — we’d love to hear about your responsive design experience.
The latest update to the JTech website is our first major case study for responsive design. For a detailed view of the new site, read more in the September JTech Dispatch. We've developed a new framework that provides extremely granular control over each element of the website and allows us to respond to the unique scenario in which the page is being viewed. This same granular control gives us hooks to create fluid, immersive animations and increased interaction throughout our new websites.
Talk to us today about building a website that accommodates users on any device.
We’ve just put the finishing touches on a new iteration of the JTech Communications website. This complete overhaul adds several new features and uses responsive design: depending on the screen size of the device being used to view it, the layout will shift and flow so that it’s legible, beautiful and well-optimized — no panning or zooming required. If you’re using a computer to read this, try navigating to our website and resizing your browser window to see the responsive layout in action.
Say less, show more.
Our new homepage offers a unique fly-through view of our portfolio — a distinctive flourish that we haven’t seen anywhere else on the web. Our team created clean, warm illustrations that begin to define a language characterizing our services and approach. We’ve added small touches throughout the site to increase its degree of interactivity: when transitioning between pages, cards slide in one at a time; when closing the detailed view of an article or biography, a subtle spinning animation gives feedback that your cursor is in the right place. Interaction also means creating a dialogue with our customers and peers — an effort we started through the JTech Dispatch and Weekly Announcements.
Creating a conversation about modern web design.
The site adds a technical blog, where we’ll share challenges, solutions, and perspectives about modern web development. We expect to post every month or so, sharing all our team members’ perspectives about what makes the work interesting, the challenges we face, and the ever changing industry in which we work.
We’ve also integrated social media hooks into the periodic aspects of our website. In recent months, we’ve opened Facebook, LinkedIn and Google+ pages where we share our latest announcements and connect with customers and peers. We’re charting a new path into the social side of the web, and we hope to cross paths with you there.
To the future!
Our new website is an exciting leap into the future of web design. From the responsive web design to the fluid animations and immersive, visual approach, we see this as a beneficial path for anyone doing business on the web. If you have questions about responsive web design or modern web development for your website, contact us today – we’d love to hear from you.
Watch for the September issue of our JTech Dispatch for more details about the changes and additions. Check out the site at jtechcommunications.com!