We need someone who enjoys working closely with the design team prior to development, to be proactive and inform design interaction, and develop pixel-perfect front-end experiences integrated into custom WordPress themes. We value a collaborative workflow that enables our team to understand stakeholder requirements and craft unique solutions for each project and brand. Attention to detail is a must and we look for each individual of our growing agency to contribute each step of the way.

what you’ll know:

• Building semantic HTML
• Writing clean and reusable CSS/SASS
• Comfortable with modern JS and have used jQuery
• PHP as it relates to WordPress
• The flexibility of WordPress in building custom themes from scratch
• SEO best practices and how to structure websites with them in mind
• Familiar with webpack and how it relates to building JS
• Know the importance of linting and go out of your way to write industry standard code
• Familiar with popular WordPress plugins (ACF, SearchWP, Gravity Forms/WPForms, etc.)
• Know your way around git and GitHub (branches, pull requests, etc.)
• Familiar with Adobe XD.
• Familiar with build systems (DeployHQ, CircleCI, GitLab, etc.)

how you’ll use it:

• Collaborate with designers and project managers to develop innovative work
• Create custom digital solutions
• Integrate 3rd party APIs into our WordPress framework
• Perform cross-browser testing and optimization
• Fulfill deadline-based deliverables via Asana
• Multitask comfortably across a handful of projects

Show us those js skills to pay your bills... and join our team.

it’d be sweet if:

• You have experience working with clients and teams
• You are familiar with an iterative design/development process
• You lean towards being a full stack developer
• You have an advanced knowledge of extending WooCommerce

life at TBX:

• Flexible work hours
• Remote/In-Office hybrid structure
• Competitive salary based on experience
• Open vacation policy
• Paid holidays off + summer/winter agency breaks
• ‘Play Days’ where we have fun, eat and laugh
• Collaborative office space, complete with endless caffeine and snackage
• Born and raised on downtown GR’s Westside

ready to craft with us?

We are looking to hire quickly, so if you think you are a great fit, let’s talk! Tell us about you and your work, 2-3 live website examples would be ideal.

Click the link below or email [email protected].

The post Senior Front End Developer appeared first on TBX.

Creating the Fade In 

Now, if you’re reading this on a desktop browser, click the “What We Do” menu at the top of the Rhodes Mckee homepage. You’ll see we created an engaging effect for the menu by sliding it down from the top of the page. However, after doing so, it still appeared to be missing something. To further elevate the menu and bring a more polished feel, we added a simple fade in down effect by using the  * CSS selector (lazy, but in this case, it worked). The animation combined the transform CSS property with the translateY value to create the effect. So when selecting any of the service areas (Real Estate Law, for example) in the menu, a sub-menu will open to the right of the clicked element. Looks great, right?

Correcting the Position 

Well, here’s the issue: the client was looking for the red element to line up with the top of the green element. But for some reason, we could only get the red element to line up with the blue element. This was because of the transform property that was applied to every element from the animation. By placing a transform property with a translate value on an element, you create a pseudo-relative positioning, which would be the same as using the position: relative; CSS property / value.

Planning for the Future 

Luckily for us, we were able to remove the animation from all of the elements in the cascade until we aligned the submenu with its relative element. And thus, fixing the issue. Now, what’s the good news? Well, whenever something like this happens, you learn from it. If the issue occurs again months down the road, we’ll find the answer saved in a note—or written in a blog somewhere. Undoubtedly, this is our note for future reference.

Have you experienced any unexpected CSS setbacks? Share them with us!

The post The Quirks of CSS appeared first on TBX.

He was a great man. A real “man’s man” type of guy. A mix of Johnny Cash, Bill Gaither, and Ted Nugent. He took me to the Upper Peninsula to hunt, ride 4-wheelers through swamps, and drown brand new trucks in rivers.

I learned, probably more inherited, my perspective in life from my grandfather. He was a self-starter. He owned gas stations, property, car dealerships, and a host of other businesses he started from the ground up. He had a great enthusiasm for life and seemed almost addicted to the risk it took to become successful.

One of his great lines that we spoke of at his funeral was, “There’s no romance in a straight line.” I first heard him say this when I was 12 years old while helping him with some landscaping. At the time, all it meant was it would be annoying to place bark down because there were a bunch of curved edges. Yet as I grew older, I finally realized what he was teaching me.

We often get hung up on what we think the right path is. We think we’re in control of our lives, our business, our projects. We think we can map things out, and if we’re diligent, all should go according to plan. Our only concern is getting from point A to point B.

I personally have a strange dichotomy I work within; I travel between being the guy who wants to organize and control a process versus being the guy who understands I can’t control all the variables. I try my hardest to execute everything in a straight line, only to end up frustrated or anxious that things aren’t going as anticipated. I now realize anxiety sits hardest on my shoulders when I put the weight of the world on them.

We think we can map things out, and if we're diligent, all should go according to plan.

But where is the romance in that? If projects and business (and life in general) went exactly as planned, the special spark that makes things truly unique and beautiful wouldn’t exist. Most of the great moments I look back on, even the painful moments, are unplanned and spontaneous. The moments I didn’t plan. The moments requiring personal growth. These curves seem to give life the most meaning.

They say life imitates art, and the further I go in life, the more I begin to understand this. We, at TBX, straddle the line between art and design. Design has rules. Design has goals. Design has constraints. Art, on the other hand, is flexible. Art takes courage, risk, and vulnerability. Art requires a person to suffer through their deep subconscious questions.

On a daily basis, my team straddles this line in their work. Design is the easy part. But it’s when they extend themselves toward art that I become especially proud of them. When they are willing to try something different. When they put their egos aside and become vulnerable enough to place themselves on the line and look at things from another angle. Or, when they take ownership of a process they’ve never tackled before. This is when everything stops being linear and the romance comes into view.

I’ve learned, rather inherited the belief, that it’s only when we stretch beyond the linear and embrace the curves that we experience the truly meaningful moments in life. Thanks, Grandpa.

The post The Daily Romance appeared first on TBX.

TBX has scaled significantly, and now, we take that same approach to medium and large-sized businesses. TBX does bigger and better work and we are loving it.

However, a year ago, we started to acknowledge a large gap in the website creation world. TBX could no longer serve the people and businesses that we personally cared so much about, and their other options in the market were falling short in our opinion, too.

We knew we had the skills to provide solutions for these businesses that we care about. It was simply about finding a new system and new processes to deliver them. They needed good design at a good value. So, we sought to figure it out.

The result is www.builtbylava.com

LAVA exists so that people and companies who don’t have a million bucks can still look like a million bucks—online. LAVA websites have a small on-boarding cost—and an even smaller monthly subscription cost. It’s great websites built with small and approachable costs for small businesses.

Lava exists so that people and companies who don’t have a million bucks can still look like a million bucks—online.

We, at TBX, call LAVA our “value brand,” but that doesn’t mean we are skimping on any part of what makes a great website. By using Squarespace and our own people to do design, photography, and copywriting, we can make amazing websites that look great, work well, and most importantly, won’t break the bank.

We’ve been low key building LAVA behind the scenes for a few months now, and have launched a few successful projects while doing so, but we are excited to fully release LAVA into the wild. It’s fun to take what we love and what we are best at, then find new and creative ways to help people and companies.

We know LAVA isn’t the right website solution for everybody, but it’s the perfect website solution for a whole lot of somebodies.

So if you need a million dollar site but don’t have a million bucks, hit us up at https://builtbylava.com

Trust us. You’re gonna LAVA it.

The post TBX Launches LAVA appeared first on TBX.

404 errors are the digital equivalent to discovering you are lost. Functionally, they exist to inform a user that the requested or intended page cannot be found. This generally happens for a couple of different reasons:

1. A URL typo. #usererror

2. A broken or dead link from an external website.

3. A broken link within your site.

But just like bad directions, the reason doesn’t change the result. Regardless of why it happens, the outcome is the same: the user is left feeling frustrated and didn’t get to where they wanted to go. A standard 404 error page communicates this reality and usually offers the opportunity to start over (homepage link) or explore other pages.

a well-designed 404 page can be the perfect easter egg to reinforce a brand’s personality

So practically speaking, the error has been addressed. But what about the feeling? Users are human, which means they get annoyed, frustrated, and disappointed. It also means they most likely enjoy laughing and smiling. So do that. Make them smile.

404 pages afford designers a simple, yet fun opportunity to turn a user’s frown upside down. Whether it’s tailoring the messaging uniquely to the brand or using a humorous visual, a thoughtful, well-designed 404 page can be the perfect easter egg to reinforce a brand’s personality and empathize with a user’s frustration.

At the end of the day, you can’t control all the scenarios that generate a 404 error, but you can always design for a smile.

The post Page Not Found :/ appeared first on TBX.

In the second installment of our series on web development, Geoff Dusome, our senior developer, walks us through the steps of coding content for a page. (If you need a refresher, check out part one.)

First things first: What is semantic code? Semantic code helps browsers, search engines, and browser accessibility tools (text-to-speech, etc.) understand your code in a way that is meaningful to the displayed data.

Let’s begin by looking at our previous example.

https://gist.github.com/GeoffDusome/73f4788480bc7ef2ff997f733b3fff42#file-index-html

Now, let’s create a basic template for our content. I’ve used Lorem Ipsum (a type of Greek placeholder content) to fill space so things are a bit easier to understand.

https://gist.github.com/GeoffDusome/73f4788480bc7ef2ff997f733b3fff42#file-semantic-html

Understandably this is a lot to take in, so we’ll go step-by-step.

The <header> Element

A <header> element defines the beginning in a set of content. In our case, the <header> element is used to describe content within the entire document. In the <header> element, we can see an <h1> (heading) element with an <a> (link) element inside of it, followed by a <nav> (navigation) element with a <ul> (unordered list) element inside of it. A <header> element can be used within most other content tags (such as <section> or <article>) to describe the content within that section.

Headings

A heading element (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) describes a section of content.  There should only be one <h1> element per page, as it should be used as the main description of the page. After that, all other heading elements should be hierarchical. For example, an <h3> element that follows an <h2> element is “nested” underneath the <h2> element and all content under the <h3> is then semantically a part of the <h2> element’s content. In our case, our <h1> element is describing the document, saying it is “My Website”.

The <nav> Element

The <nav> element is fairly straightforward. It contains a set of links that can navigate the user to a section on the same page, to other pages, or to pages on other websites. Note that there are many places to put a <nav> element. It can live within the <header> element, below it, or even inside an <article> or <aside> element.

The <article> Element

The <article> element is where we’ll place the main content of our page. The <h2> section describes a little about who we are and the <h3> tag below it describes something related to the “About Us” heading. The <article> element can contain <section> elements if you need to split up the content of the <article> even further.

The <aside> Element

The <aside> element contains the supporting content of the document. In our example, the <aside> element contains supporting content of the entire document. You can use the <aside> element within an <article> to support a section of content.

The <footer> Element

The <footer> element usually wraps up content. The footer closes the document with a copyright notice in our example. Sometimes, a <footer> element contains a menu or other supporting information for the content. For instance, you could use a <footer> element within an <article> element to denote the author of a post.

The Final Product

Still following along? If so, your work should resemble the screenshot below.

I’ve only covered a small part of a large list of the main elements you can see on the web today, so get out there and learn more! Visit here to explore additional information about writing semantic HTML.

Coming up next, in the final part of this series, we’ll start styling our document and make it look a bit more beautiful!

The post Web Development 201 appeared first on TBX.

For any writer, on any project, one of the initial big tasks at hand is establishing a client’s brand voice. What does this mean? Well, determining how the content should flow and sound to the audience. Because after all, every user wants to connect, to engage, to easily comprehend and experience something different from any other brand. And when it comes to a niche industry, it’s all about differentiation.

As a copywriter, I find this process to be a tricky balancing act. While the client may view their brand one way, you—as the content expert—may believe the brand should veer off in a completely alternate direction.

Before we continue, let’s quickly establish the difference between voice, tone, and language. Voice is the overall style a brand expresses (casual, formal, etc.). Tone refers to the variation in your voice to reflect a specific feeling or response to a situation, and the language is the actual words used.

Read on to see my four-step strategy for uncovering a client’s unique brand voice.

This persona brings distinct emotions to the table. And just like any human, it matters how they speak and how they portray themselves to others.

1. Ask the right questions

Always start by posing targeted questions to assure others think about a brand the same way you do. This will help guide your storyboarding and see if the current voice is on-point or completely off-kilter. Tee up the discussion by asking:

Who does your brand want to be?

What are your end goals as a company or organization?

What does your brand hate?

What does it love?

What do users want out of your website?

How does your brand stand out among the competition?

Now, you can dig into the specifics.

2. Define the Personality

Explain to clients that a brand is almost its own person. This persona brings distinct emotions to the table. And just like any human, it matters how they speak and how they portray themselves to others. Because it’s representing something bigger—an entire organization (kind of a big deal).

You are creating a being that that allows your company to take on a life of its own. So don’t blow it off or emulate the next guy in your competitive circle. Take time to think about the person behind the site or the ideal image of someone who’d represent you at a tradeshow or conference. Are you positive, fun, and confident? Or practical, smart, yet witty? Whatever this may be, choose three words to name this personality.

Having consistency is the key to reaffirming and building brand affinity. It’s easy to usher this in through microcopy tweaks. Sprinkle terms across CTA’s, FAQ sections, landing pages, and find the changes are subtle, yet impactful.

3. Ensure Proper Language

Hone in on the true characteristics. Now that you have a general idea of who “it” is, it’s time to determine how it should speak. Outline words this person would use to express various meanings (i.e, regret, concern, gratitude, etc.) The list could go on, but you get the gist. It’s often helpful to create a chart and decide do’s versus don’ts, similar to CoSchedule.

Be sure that whatever you establish is easily translated onto other touch points (sales, customer service, social media). Having consistency is the key to reaffirming and building brand affinity. It’s easy to usher this in through microcopy tweaks. Sprinkle terms across CTA’s, FAQ sections, landing pages, and find the changes are subtle, yet impactful.

And don’t forget, while SEO is always important, it shouldn’t sway your client from sounding human and relatable. But on the other hand, don’t try so hard. As stated, it’s all about #balance.

Although some brands are witty and some brands are informative, all exceptional brands are two things: approachable and engaging.

4. Allow Revisions

In the end, remember every brand needs to room to evolve. The process of determining brand voice is not fixed, but rather fluid. So never stop searching for fresh ways to recreate or update your image.

After digesting all this, it’s common to question, Am I being too formal? Too casual? Is it appropriate for my audience? Have I captured my brand correctly? Rest assured, second guessing is both natural and necessary for any content marketer.

Here’s one final tip: Great brands don’t replicate—they innovate. They experiment, find new ways to impress, inspire their audience, and position themselves for success. Although some brands are witty and some brands are informative, all exceptional brands are two things: approachable and engaging.

Hoping to raise the bar on your content? Shoot us a message and learn how we can recharge your brand identity today.

The post Talk the Talk appeared first on TBX.

In my previous life as a wedding photographer, I experienced many smooth, well-organized days of shooting. No issues. No delays. No scrambling on short order. I’ve also experienced the opposite — absolute chaos from lack of planning and unrealistic expectations on a day hinged upon logistics.

As an account manager and the resident photographer at TBX (read bio), I help plan and execute photoshoots for our clients to ensure their new web presence has imagery to support their overarching site goals and holistic strategy. Because, as we all know, a picture’s worth a thousand words. Am I right?

Now, let’s assume your website project is underway, and we’re geared to take some pretty pictures. First and foremost: we cover the details. Similar to most things in life, a little planning up front makes for a much better outcome.

And while each shoot comes with a unique set of circumstances and objectives, the following best practices help ensure every shoot runs without a hitch.

Be Organized

Part of our job as an agency is to help your team plan for an exceptional day of shooting, so our time together is efficient and yields the shots needed. That’s why a visit to your office or shooting location is critical as it gives both the photographer and the creative director a holistic sense of the space and your brand’s vibe. It also helps us nail down other need-to-knows, such as:

• Lighting/Gear Needs
• Shot List
• Specific Shot Locations
• Headshot Location
• Team Members/Talent Needed
• To-do Lists and Prep Notes

Once you, the client, receive a shot list and goal timeline for the day, you can begin internal preparations for your team and your space.

Think of a slightly more refined, polished version of your typical day. However, if you’re not normally a jacket and tie kind of team, don't forsake authenticity just for photos.

Be On Board

Having your staff’s buy-in will make the experience more positive, especially if headshots are on the list. Not everyone loves being in front of the camera — we get it. So if your team members will be in the photos, give them a head’s up (pun intended) — and remind them the new website is an important investment and an exciting opportunity to take part in. Leading up to the scheduled shoot, spaces can be decluttered and staged, new collateral or signage can be ordered, and employees can have a chance to look and feel their best. Plus, with the advanced notice, more people will likely volunteer for staged group shots rather than hide in the break room.

Be Authentic

Does your team usually wear branded polo shirts with jeans or business casual attire? No matter your dress code, be sure to have cohesive clothing that speaks to your culture. And then, turn it up a notch. Think of a slightly more refined, polished version of your typical day. However, if you’re not normally a jacket and tie kind of team, don’t forsake authenticity just for photos. People will see right through it the moment they pay your office a visit. Keep in mind, this is going to be where prospective customers and employees get a first impression. That’s why it’s crucial to present yourself in a way that is true, while simultaneously putting your best foot forward.

If there’s a team huddle happening at the whiteboard or a product being crafted, you better believe we’re seizing the opportunity and snagging photos.

Be Realistic

Is your team seven people strong? Not a problem! A smaller team simply means those same people will make an appearance in photos more frequently. Is your space bright and open with brand elements incorporated in the décor? Or, are we shooting at a shop with sparks flying in the background? No matter the answer, embrace it fully and we will too. Again, see note above about being authentic.

Be Flexible

Some of the best shots happen spontaneously. For most companies, a shoot day still means business as usual. If there’s a team huddle happening at the whiteboard or a product being crafted, you better believe we’re seizing the opportunity and snagging photos.

Last but not least, we always strive to pair people shots with detail shots, creating balance throughout the collection of images. Therefore, trust our creative team to stage your team and find elements that best represent your brand — even if it falls outside of the timeline or shot list.

That’s a wrap! Have your own photoshoot secrets or stories? Share with us. Or if you’re game to create a new site and some shiny new photos to go along with it, hit us up!

The post behind the lens appeared first on TBX.

Take note as our in-house coding expert, Geoff Dusome, shares the building blocks of web development.

Welcome to the first in a three-part series, where together, we will eventually create a simple webpage. Feel free to open your favorite code or text editor and follow along. If you are following along at home, be sure to save the file as a .html file and open it in your browser of choice.

To start, know the basis of everything you see on the web is made up of markup, specifically the Hypertext Markup Language (HTML). HTML defines the structure of what you see, as well as the hierarchy of content on a webpage.

Declare Your Version

At TBX, we use the newest iteration of HTML, HTML5. Every HTML page or file starts with a DOCTYPE declaration, where we tell browsers which version of HTML we want to use. In our case, this will simply be HTML. This is the standard for working with HTML5.

HTML<!DOCTYPE html>

Create a Structure

Next, let’s begin by surrounding everything with an HTML element and creating the structure of our document. Think of the structure of an HTML document as a person. Every person has a head and a body (just so we’re clear, the body contains everything below the head), and every HTML document has a head element and a body element.

HTML<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Give It A Title

Now, we need to give our page a title. The title acts like a person’s name (this is stored in the brain, which is located in the head!)

HTML<!DOCTYPE html>

<html>

<head>

<title>Hello World!</title>

</head>

<body>

</body>

</html>

Finally, you should have something that resembles the image below. Our title of ‘Hello World’ should be displayed to everyone in the browser tab.

Stay tuned! In the next lesson, I’ll go through the structure of the body element and how to write semantic code.

The post Web Development 101 appeared first on TBX.

Has it been a while since you’ve touched your website? Wondering if it’s time for a redesign? If you’re here, then you’re likely already aware of the importance of a strong online presence. So how do you make sure you’re putting your best foot forward on the web? Frequent website maintenance—writing new blog posts, refreshing copy, or adding new projects to your portfolio—should be routine for your business. But there comes a time when even these updates aren’t enough. That’s when you’re in need of a total digital makeover.

To help you evaluate where your current website stands, we’ve come up with seven categories to consider:

1. Age: Is it older than an iPhone 5?

I know what you’re thinking—who still uses an iPhone 5? But let’s be honest, if you wouldn’t trust an outdated iPhone for your personal use, then you definitely shouldn’t trust an outdated website for your business. Of course, different industries beg for different rates of redesign. If you’re in the digital or technology industries, your website should reflect your business’ savvy (especially if you expect another company to trust you with their redesign). For these industries, a good rule of thumb is to update the site every three years. However, if you’re in a more niche market, there may be more flexibility in your website’s life expectancy.

2. Aesthetic: It’s more cluttered than your grandma’s basement.

Within 10 seconds of your website loading, visitors will judge the credibility and trustworthiness of your company. Aesthetic and organization are key components when selling your brand. So ask yourself, What’s the viewers’ first impression when my site loads? Is it densely packed content, difficult to sift through and hard to navigate? Is it an outdated homepage that hails from 2003? If so, you may be losing visitors at a faster rate than you realize and a redesign is in order.

3. Ease of Navigation: Visitors shouldn’t need a GPS to find what they need.

When designing your website, try to anticipate your customers’ needs. Then, make it easy for them by presenting the information they need in a succinct manner. Clean, clearly labeled landing pages allow you to emphasize what’s important without requiring users to dig.

4. Responsive (Mobile-Friendly): Can your visitors browse while on-the-go?

Over 50 percent of all website traffic is generated via mobile phones. So, if your website isn’t accessible across a variety of devices, you’re running the risk of of losing major traffic. Since Google now prioritizes responsive sites, your website’s compatibility with mobile viewers also affects your SEO. If you want to rank well and cater to your visitors most effectively, a responsive website is a must-have.

5. Traffic: Are your visitors hanging out or bouncing out?

How are you monitoring your website traffic and conversions? Analyzing your website’s traffic is crucial to determine whether or not the content you’re providing is effective. Your visitor bounce rate—the number of people who only view one page before leaving—indicates how successful you are at engaging prospects. Bottom line: a fast loading, well-organized page with quality content will keep visitors engaged for longer periods of time.

6. eCommerce: What’s your strategy for conversions?

Whether you are a B2B or B2C company, you should always strive to make it easy for prospects to take action on your site. If you’re selling a product: Does your site have e-commerce capabilities? If you’re a B2B company: Do you have a form for visitors to inquire? Are your CTAs strategically placed and carefully worded? If not, we can help you craft the perfect ones.

7. Competitive Sites: Are you crushing it or getting crushed?

If you’re unsure of your site’s standing within your industry, start by checking out your biggest competitors. Are any outranking you in search results? By comparison, is your design more up-to-date, functional, and engaging? If those sites are significantly more appealing and progressive, consider planning a redesign to keep your competitive edge.

Still uncertain whether or not your site needs a redesign? Don’t hesitate to contact us, start a discussion, and find out.

The post Is your website outdated? appeared first on TBX.