Web Design and SEO Blog

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.

Early in 2011, JTech hired me on as a human interface designer. Great job title — and a promising description of the kind of work I hoped to be doing. The workflow in those early days working with JTech will sound familiar to seasoned designers; I arranged every pixel into Photoshop comps to share with our clients. With the client's approval, our development team chopped and optimized my comps into HTML, CSS and javascript.

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.

Responsive problem-solving.

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.

JTech's latest foray into cutting edge web design is responsive website design. Responsive design is a new paradigm where a single, flexible website is built to accommodate all devices — from tiny phones, to tablets, to huge desktop monitors. Rather than creating separate websites that are optimized for screens of a certain size, responsive design accommodates all sizes by creating a design that dynamically flows and resizes its contents for a legible and beautiful experience at any resolution.

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.

A brave new world.


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.

We’re excited to announce a major revision of JTech’s website! Major additions include a technical blog, illustrations, and a fun new home page. We rebuilt the entire site using responsive design, a technique that allows our site to be optimized for desktop, mobile, and everything in between.

Watch for the September issue of our JTech Dispatch for more details about the changes and additions. Check out the site at jtechcommunications.com!

Well, it’s been 16 years, but we’re proud to finally launch our humble new technical blog. With this informal addition to our website we hope to engage with other website development professionals about all aspects of our craft – from project planning to ongoing strategic services and everything in between. Each month we intend to write a candid post about the challenges, techniques and triumphs of our work with the hope that we will assist, inspire and stimulate discussion with our peers.

In our first article, Felix Wolfstrom, JTech’s designer, will offer his perspective on our recent foray into responsive design. We’ve always focused on building standards-compliant sites. Ever since modern mobile browsing was launched with mobile Safari, all of our sites have been mobile-compatible. But as mobile browsing has become more and more the norm rather than the exception, we’ve chosen responsive design as our method for addressing our customers’ growing mobile needs.

This website rebuild is our first fully-responsive project – if you’re not on a mobile device now, give it a try by making your window small to see how the site actively adapts to the screen’s dimensions. And don’t forget to subscribe or check back soon for Felix’s article where you can read about the challenges he faced adapting to responsive design.

Welcome to our blog and thank you for reading!

Joshua Reynolds
President
JTech Communications

JTech created a guide for editing your website’s metadata in the Control Center.

Metadata is a behind-the-scenes component of your website — more or less an executive brief that tells search engines about each page of your website.

Depending on the age of your website, you may or may not have access to your dynamic pages’ metadata in the Control Center. If you’d like to edit your metadata but it’s not appearing where you edit your site, please contact Tyler, our project manager.

Metadata is broken down into three categories:

1. Meta Title, the name of the page as it appears in search listings.

2. Meta Description, which appears as a summary of the page when the page appears in search results.

3. Meta Keywords, which serve to inform search engines about areas of relevant interest covered by this page of your site.

Our guide provides suggestions for writing useful, relevant metadata that will perform well in search results for Google, Bing, and other search providers.

JTech provides professional site optimization services, which includes metadata written for your website’s static content to improve natural search rankings. If you’d like to learn more about how we can help your business be found in search engines, contact us about internet marketing.

To see our guide to Using Metadata in the Control Center, click here.

We just launched a website for Bozeman, Montana artistan AlleeB’s Custom Jewelry. The new site has a clean, inviting palette and highlights the carefully-crafted artwork of metalworker Allen D. Brandt.

Allen is a fourth-generation Montanan and invites Montana’s natural beauty into his artwork; leaves and curvilinear naturalistic forms are present throughout. We’re proud to have designed this web showcase of Allen’s work.

alleebs.com

When your company first decided to establish a website, you may have checked whether yourcompanyname.com was already taken — and if it wasn’t, that may have been the end of your decision-making process. If the .com was taken, you might have tried variations of your company’s name — or you might have looked at .org or .net.

A big change is coming to domain names. As of now, the vast majority of websites use the .com top-level-domain. Starting later this month, ICANN will be announcing the approval of new top-level domains every week — and over the next year more than 1000 new top-level domains will be made available. Soon it will be common to visit sites with addresses like: bozeman.bank, toys.baby, bozeman.audio, local.bargains, or free.beer.

There are many uses for these new domains — They can be used to ensure that customers find you when searching for your products or services in Google, be used for your primary domain name, or held defensively to keep competitors from having them.

To help you, we’ve developed a new domain name strategy service. In this service, we review your company’s marketing goals and formulate a plan to purchase the best new domains for your needs.

The new domains are launching as we write this, so call us or email us today and we’ll help you draft a cohesive domain name strategy.

New website: AlleeB's of Bozeman

Fine-art metalsmith Allen D. Brandt is a fourth-generation Montanan whose craftsmanship and meticulous attention to detail have culminated in a beautiful gallery of work that is showcased on his new website.

The new AlleeB’s website is a platform for Allen’s jewelry and metalwork — its clean, sophisticated layout frames the complexity of his work — informed by Montana’s natural beauty, as well as a heritage of modern and ancient metalworking techniques.

Feast your eyes on his attention to detail and visit the site today.
AlleeBs.com

Our Bozeman, Montana production team is growing! We have room for a junior web developer to work with our design and programming crew. We're less interested in your formal education or age and more interested in your hands-on knowledge of programming and the web and your excitement to learn web development in a fast-paced Montana web development environment.

Relevant skills include PHP, SQL, CSS, HTML, and JavaScript, as well as object-oriented programming. Are you a Bozeman website developer? See the job description and send us your application.

New top-level domain names are coming soon. The familiar names — .com, .net, .org, and their ilk — will be joined by over 1000 newcomers, such as .bank, .tech, .play, .fishing, and .buy. Starting this month, ICANN will announce approximately twenty new top-level domains each week.

These new domains can be used as your primary domain, purchased to prevent their use by competitors, or employed to enhance findability in search engines. We want to help our clients capitalize on this rare chance to get in early. JTech is offering a new Domain Name Strategy Service to review your goals and develop a list of new domains you wish to purchase.

These new domains are coming fast and will give all of us doing business online a huge opportunity. Give us a call today and we’ll help you understand your options and create a domain name strategy.