To celebrate this, we’ll be live streaming a live panel discussion and a virtual dance party, starting at noon, Thursday October 15th at https://viastudio.live

Live Panel Discussion: “Why Rebrand?”: Noon EDT

Join us Thursday, October 15th at noon on https://viastudio.live for our virtual panel discussion: “Why Rebrand?” Featuring Jason Clark and the VIA team moderated by the Bureau of Digital‘s Carl Smith.

Virtual Dance Party: 2:30PM EDT

And then, stick around for the Virtual Dance Party starting at 2:30P EDT, hosted by Jason Clark and Trevor Lamont.

RSVP Today!

OCTOBER 15TH, 2020

12:00P EDT – Panel Discussion (RSVP on Facebook)

2:30P EDT – Virtual Dance Party (RSVP on Facebook)

viastudio.live >>

The post VIA Studio Launches a New Brand Recognizing New Capabilities, Long-Standing Partnerships, New Clients appeared first on VIA Studio.

Why Timber?

If you’re a WordPress developer, you’re probably familiar with this:

This is a simple example of The Loop in use. This is how we access a post in a template and make its data available for rendering. You’ll notice a few things common to most WordPress templates: switching between PHP and HTML code frequently to access and arrange data, calling several WordPress functions to check for the availability of and access post data and using WordPress functions to render HTML.

Here’s how we can do the same thing in Timber:

Ooh! At a glance, it’s much easier to read, but let’s dig into some of the benefits of using Timber: improving the readability of template code, separating data accessing from our templates and generally offloading a lot of the tedious work of WordPress.

It’s Pretty

And that’s important! I’ve been building WordPress sites for a little while now, but every time I open a WordPress template file my brain shuts down for a second. It’s usually either a mess of interspersed PHP and HTML blocks with WordPress functions that seem to span entire lines of code or the mess has been abstracted into other files that you have to dig through to get a clear picture of the architecture. Both of these scenarios make it difficult for a developer who’s new to the project (or yourself after going on vacation!) to understand how things are set up and get to work.

It Separates Your Concerns

A big contributor to the clunkiness of WordPress templates is that the data fetching and arranging are being done right alongside the templating. In Model-View-Controller terms, the template file is acting as both the controller and the view.

Timber allows us to use the PHP files as controllers that fetch and arrange the data and then pass them as variables to the views: Twig files.

In the example above we only need the post object, which as we’ll see later is often available automatically. But what if we need derived data? Let’s say we have a Product post type, and on a certain page we want to display all of the products, as well as all of the categories and the lowest price item.

In traditional WordPress, we would need to write and run all of these queries and make the necessary calculations inside our template alongside the actual display code. This can result in messy files with business logic interspersed in our view.  But in Timber, we can grab all of this data and simply pass it to the view as variables, so we don’t have to include any query code in the template.

Now in our Twig file we can simply reference {{ cheapest_product.meta('price') }} and not clutter up the view with any math.

It Does the Tedious Work for You

As we’ve seen, we don’t need to bother with The Loop anymore! We can grab the data we need in the PHP file and treat them like normal objects in the view.

Often, the post is the only object we need in context, so we don’t even need to write PHP files! By using WordPress’s template hierarchy, we can just use page.php as a catchall, so we can just create a page-example.twig, and it will be routed through the already existing page.php and automatically get the post object without us having to do anything!

Timber also adds other shortcuts for doing basic WordPress things. For example, there’s no need to remember all of the WordPress functions for accessing different post data. Instead of remembering whether it’s get_the_thumbnail() or get_the_post_thumbnail() or if you actually need wp_get_attached_image() or maybe get_attached_media() — quick quiz: which one of those doesn’t exist? — you can just call {{ post.thumbnail }} anywhere in your Twig template. No need to remember all those functions! And if you ever forget what data is available in the object, you can just use the debugging tool covered below to easily find it.

Random Cool Things Timber and Twig Can Do

Make converting image types easy

Let’s take our single.twig example above and convert our featured image to webp on supported browsers and to JPEG on non-supported browsers.

Play nicely with Advanced Custom Fields

If you use ACF, working with Timber is an absolute dream. Let’s say we have a page with a Repeater field that contains an indefinite list of employees: an image, a name and an email.

The ACF field group editor

The resulting field will be displayed on the Employees page for data entry. Now to render the content in the page. How would this work in PHP?

How about Twig?

Again, no need to worry about remembering function names! All of our ACF data is stored in the post’s meta property, and the repeater is just an array that we can loop over.

Help you debug your code

Ever get stuck trying to figure out what exactly is in a variable you’re working with and try the ol’ var_dump($variable); die(); only to be presented with a page-long string of characters that allegedly contains the value you’re looking for?

Source: Laravel Daily

With the Timber Dump Extension, simply calling {{ dump(variable) }} will output a nicely formatted block of code to investigate. This is great for debugging the data that’s available in a template’s context. And nothing has to die()!

Source: Timber Docs

How Do I Get Started?

So you’re convinced! Where to begin? Let’s assume we’re starting from scratch. While Timber can be installed and applied to an existing theme incrementally, beginning with the starter theme will get you up and running very quickly and help you learn the fundamentals you’ll need to start picking and choosing which pieces you want to use.

Install It

First, make sure you have a WordPress installation. Then, grab the starter theme. Download it, unzip it, and add it to your wp-content/themes directory. Now run composer install in the theme to install Timber.

Note: While Timber can currently be installed through the WordPress plugin directory as well, that option will be removed in the upcoming version 2, so go ahead and get comfortable with the Composer method.

Now activate the Timber plugin and then the theme, and you’ve got a working Timber installation!

Write a Custom Template

You already have pages here that should be getting post data. Now let’s create a custom page. In WordPress create a new page named My First Page. It should have the slug my-first-page.

Now create the file page-my-first-page.twig. Copy the contents of page.twig over, customize as you’d like and now when you visit My First Page you should see your template!

You can now start adding content and ACF fields and render them in your new template. Check the Timber docs here for additional options for setting this up.

The post Building a WordPress Theme with Timber appeared first on VIA Studio.

That’s where a “brief” comes in:

Briefs are required for work to start.
Briefs can be used for almost any kind of work (strategic, creative/design, dev).
Briefs should provide goals, priorities, audiences.
Briefs should be short.

Briefs are the guidelines before the work is done, and the measuring stick after the work is done.

If you’ve worked in the marketing or creative fields, you are probably aware of the “Creative Brief”. It’s tried and true and we still use them today. But as our work has become increasingly complex and sophisticated, we’ve adapted a number of other briefs that perform the same basic functions, for different types of work.

Here’s a brief overview of the briefs we use:

Creative Briefs

• Define a single project or outcome, e.g. an advertisement or perhaps an entire campaign or website
• Defines the goal, audience, calls to action, design requirements, and initial creative direction.
• Are separated from the execution, and do not define it.

After the creative brief is determined and approved, we can move forward with the work. For simple projects like ad design, we would move into design. But for complex projects – like a website or an app, we must define the experience at a deeper level for there to be consistency with the goal of the project. We have to define the User Experience (UX). We do this with a “UX Brief”.

User Experience (UX) Briefs

• Relies upon a creative brief for goals, priorities, audience.
• Defines audience interactions, technical limitations.
• Does not define project specifications or discrete design.
• Defines a brief list of priorities (must have, should have, could have)
• Defines how we will measure success.

Those two briefs are well-established standards in our industry. They help to take a discrete request and define guidelines for work. But – what do you do when there’s a far larger challenge – one that might require multiple requests or pieces of work, but all need to be aligned?

As we began to create more sophisticated, comprehensive programs for our clients, like launching a new brand, we identified the need for something that could define a landscape rather than a single effort or output. We call these “Strategy Briefs”.

Strategy Briefs:

• Tend to be audience-focused. Where is our audience, and how can we engage them?
• Provide priority of platform and medium
• Describes audience motivations, challenges, and our desired actions, rather than design or messaging

Having created and iterated on many briefs internally, and having seen how effective they are at crystalizing direction and aligning work – we have also developed an externally-focused brief for prospective clients, or for nascent projects for current clients. We call these “Prospect Briefs”.

Prospect Briefs:

• Recap conversations, summarize and align goals, priorities
• Use common language all team members can understand
• Define the work that we’ll be responsible for
• May provide estimates or timelines, but…
• Are NOT scopes-of-work, but rather a working document – a “shared understanding”

In summary, briefs are powerful tools that condense and summarize the landscape as well as set goals and guidelines for projects big and small. They are quick to write and easily readable. They become the foundation of work and provide a lifeline from the beginning to the end of a project.

For us, they’ve become invaluable, required work and communication tools for every discipline and for both internal and external work.

Want to see how we use them? Contact us to tell us about your project.

The post A Brief Guide to Briefs appeared first on VIA Studio.

When clients request templates, a big reason is so that they can make changes to the creative internally, saving money and eliminating the back-and-forth requests to an agency. Despite what Oprah says, templates aren’t as simple as they seem and do not work in all cases. 

So, what pieces warrant a template?

The best case for creating and using a template is when the layout stays exactly the same and copy and images are the only things switching out. Food menus, business cards, and email blasts are great examples of when a template can come in handy and keep your brand consistent. 

Keep in mind that content informs the design and layout. If your main message and concept are changing for a specific piece of creative – think social posts or print ads – a template will not be the most effective approach because it will pigeon hole you to one layout that may not work for every message you are trying to communicate.

Other examples of when a template might not be the best idea is when content will change tremendously such as annual reports, newsletters, and presentations. While there are guidelines that can be set to help create these items, a template used outside of a design team and design software would be very time consuming to create and at the end of the day, may not be worth the investment. But don’t worry – we have solutions for both cases because we’d never leave you high and dry.

Helpful tools

Editable PDFS – These are great for small scale projects that don’t need a whole lot of editing. For example, business card templates can work well in this format where a few key pieces of information will change, but will not affect the overall layout. The beauty of this method is that designers can create custom documents in any of the Adobe Creative Suite programs and save them out as editable PDFs. The designer can then open the file in Adobe Acrobat and assign text fields that the end user can fill in and change. The end user will just have to purchase Adobe Acrobat Pro to edit and the learning curve there is pretty low. Food menus, name badges, and price tags are all other examples of when this technique can come in handy.

Google Slides – VIA has used google slides for templated presentations for ourselves as well as our clients. Where this tool lacks in design capabilities, it makes up for in accessibility and collaboration purposes. It’s best to keep design as simple as possible when setting up templates because the design toolset is very limited compared to professional design software. A designer can take this method a step further by creating custom icons and illustrations in external programs, and saving them in an ‘assets’ folder alongside the actual google slide file. That way, the end user will have a library of custom branded content they can pull into their presentations. 

InDesign – InDesign is a part of Adobe Creative Suite and is used widely by designers. It can be a great tool for setting up long form documents. For example, we are currently working on building a custom RFQ (Request For Proposal) document for one of our clients using this program. Why InDesign? InDesign allows you to set paragraph, character, and object styles – leaving no room for guesswork when it comes to creating new pages. You can also assign as many master pages as you’d like, locking certain information in place. This technique only works if the end user has an InDesign license and has a good understanding of how to use the program. This would be the ideal approach for creating items such as annual reports, presentations, and newsletters since it makes changing out large amounts of information easy and consistent. 

Canva – There is an abundance of drag-and-drop, template based software options accessible to anyone with a computer and an internet connection. Canva is one that I have not personally used, but have heard about from non-designers. This, and others like it,  could be an option if you do not have access to or the budget for hiring an agency or freelancer. There are already preset templates to choose from where you just plug in your own content.  

To my knowledge, there is no perfect solution for handing off work to be easily edited by someone who does not have access to or knowledge of using design software. However, The beauty of partnering with an agency is that you have the ability to get custom, unique designs created just for your company that will set you apart and completely align to your brand.

The post Design Templates: appeared first on VIA Studio.

We build something

Most of the time, a client has a technical need that they wouldn’t be able to do themselves. We do research to figure out how to solve their need, then we build something. In that case, it’s just the VIA team building the stuff and the client double-checking as we go to ensure they’re happy with what we’re building.

Working with a client’s team

Sometimes, though, a client has their own team that we get to work with. This is an opportunity that we love. One of our greatest strengths is working with other teams, whatever their capabilities might be and however we might fit in.

Hosting Experts

Often, especially on smaller sites, a client might have a developer who’s building the site and they need help with the hosting side of things. We have a top-notch hosting infrastructure (WP Engine for WordPress sites, Rackspace for everything else) plus loads of experience with other hosting platforms like Netlify, FlyWheel, Cloudways, GoDaddy Hosting, etc etc.

In those cases, we can help make recommendations to ensure that a client site is robustly hosted and within the client’s budget. We have also helped automate deployments, troubleshoot hosting issues and so on.

Development Experts

Last year, we got the opportunity to design a new brand and website for Kentucky Performing Arts (KPA).

KPA uses a content-management system called Sitefinity. It also integrates heavily with Tessitura for show management and ticketing.

As you might expect, an organization like KPA has their own development team for managing Sitefinity and another team for managing ticketing. Given the scope of the redesign project, that meant that we were heavily embedded with their team. That meant giving their developers access to a shared Slack channel for rapid communication, Github for code-sharing and even having their lead developer in our office for collab sessions every week.

Given KPA’s expertise on building and managing Sitefinity templates and our expert knowledge of front-end web development, we were able to divide up the work fairly evenly. We developed a build pipeline that let us generate static HTML templates and stylesheets based on the redesigned brand. Each template represented a small chunk which could be easily turned into a Sitefinity component (since Sitefinity pages are built by dragging and dropping components onto a page). KPA’s developers could grab those templates, build their Sitefinity components, drop in the CSS and, voila!

For the ticketing portion of the site, we decided to build it as a single-page React application. This let us do the templating and Sitefinity work in parallel with the ticketing development. We handled the React piece while KPA developed the API to let us integrate with Tessitura.

You can see the end result at https://www.kentuckyperformingarts.org/. A tight collaboration yielded a fast, flexible, and beautiful site.

Team Augmentation

A scenario we’re great with is helping an expert team that has too much work.

We got to do this recently for Code Koalas (CKD), another fantastic Midwest dev/design agency. They reached out to see if we could help with development on a large PHP + Laravel (our favorite PHP framework) project, a space where we feel right at home.

Their process was extremely well-organized. Everything was in a ticketing system with milestones and lots of details. They had a very active Slack presence, a good codebase, version control, etc. That meant our on-boarding was fairly easy.

We had Slack calls every few days to list out which tickets they wanted us to tackle. Then we worked through those tickets until we were done and ready for more.

I, personally, love these kinds of engagements because we, in addition to being useful to our client, get to learn a ton in the process. While we have loads of PHP & Laravel experience, you can always learn so much from studying someone else’s codebase. It’s an opportunity to think about how you might have done things differently and to pick up ideas about how to organize a project or learn a new way to do something.

We loved working with the CKD team and they appreciated how quickly we were able to ramp up and be productive on their project.

It’s all about people

In the end, everything boils down to working with other people. My mission statement on my personal blog includes this:

I firmly believe that the days of a developer working by themself in a room are over. Software Development is all about collaboration. The ability to work with other developers and clients is just as important as the ability to write code. I love to work with awesome, smart people making beautiful and exciting things. I love making things that people will use and enjoy.

That’s something that VIA Studio embodies to its core. At the end of the day, like all trends, technologies and design styles come and go.

All that matters is collaboration and relationships.

The post Works and Plays Well with Others appeared first on VIA Studio.