Wordpress is by far our most requested content management system. While the Wordpress support forums, Stack Overflow and Google searches are all good resources, we saw a need for a single resource that clearly and concisely touched upon all the basic Wordpress administration tools.

To address our clients’ most common site and content management questions in one place, we created a General Wordpress User Guide available to all of our clients (and the web at large) that covers out-of-the-box, native content management methods and tools.

Created using couscous.io, hosted on Github Pages and complete with annotated images for visual reference, the guide is a one-stop-shop for content management basics in Wordpress — from creating new posts and pages (and the difference between the two) to uploading media to a post and formatting text.

We invite you to have a look around and let us know what you think. Like what we’ve done? Feel there’s anything we missed? Let us know in the comments below!

Phuse’s General Wordpress Guide: A one-stop reference for Wordpress basics was originally published in Phuse on Medium, where people are continuing the conversation by highlighting and responding to this story.

No one likes surprises during a project. Whether it’s the scope expanding in an unexpected way or new research that uncovers extra work, the end result is that costs balloon and the project runs the risk of failing entirely.

There are several reasons why this happens. Let’s go over what those are, and walk through the proven method we use to create accurate estimates based on real data.

Set Clear Expectations in the Sales Process

Start any relationship with a set of calls and an exchange of deliverables to establish clear expectations on both sides.

We work together with our clients to discover the scope of a project. The client will provide what they have on hand, and then we, as the experts, make recommendations about what else we need to estimate that work accurately. Our job as the expert is to educate them about the digital design and development process, and their job, as the client, is to educate us about their company and goals.

What deliverables can you exchange? An agency should send samples, a brand book, and a client guide (or another type of process outline). An agency might also provide some free consultation. Don’t send or expect an estimate at this stage. It’s too early to start throwing numbers at the wall to see what sticks, and down that path lies dangerous, inaccurate estimates.

In return, a client should provide a scope document, any quantitative data (like analytics), any qualitative data (goals and business strategies, user feedback, etc.), an ideal timeline, and any budgetary constraints.

Identifying risks is crucial. If you’re on the client side, set defined boundaries so that the people you hire can be creative within them. For instance, if you’re trying to launch a new website so that you can attend that yearly conference and show off your new product, you need to share that date with your team so that they can meet your deadline. If you’re on the agency side, count the number of stakeholders who will be involved in the project and consider how communicating with them will affect your timeline and feedback loop.

If there’s confusion about what “scope” means later in the project, you can bet it’s because clear guidelines were not established in the sales process.

Use a Team-Based Approach for Estimating

Setting expectations is only half of the estimating process. The other half is getting the team involved to help create the estimate.

At Phuse, the designers and developers who estimate on projects are chosen because of their expertise in particular areas. If it’s a WordPress project, we’ll get a WordPress expert to do the estimating. Ideally, the one doing the estimating is the same person assigned to the project when it begins.

Once the estimate is complete, and it has been vetted by several people, we relay it to the client and get additional information from them as needed until we reach an estimate that both the team and the client are satisfied with. This back and forth makes sure that everyone is actively involved and has a say in the end result, which inevitably results in more accurate estimates.

This transparent team effort allows us to craft an approach to any project in a short time. By the time the estimate is shipped we are able to identify:

1. The size and scope of the project
2. Areas in which we need additional information
3. Potential risks that could change the scope, timeline, or budget of a project
4. Project constraints
5. Whether or not the project is within the client’s budget range

Use Spreadsheets for Breaking Down Estimates

To actually create the estimate, we use a shared spreadsheet. (For the clearest view, I’m going to approach this process from the agency side, but clients will find this process equally valuable.)

I’ve uploaded our estimate spreadsheet template to Google Docs. Check it out, and feel free to use it for your own projects.

Once you duplicate a new sheet from the template, the rest is simply a matter of filling in the details. Add the scope of the project in the left columns, and estimate hours to the right.

The Scope column is where you put the name of a specific task, and the Details column is where you list any constraints or assumptions. Each item in the scope can have multiple phases. In the template we include Brand Strategy, Content Strategy, User Experience, Design, and Development. Estimate minimum and maximum hours for each of phase a particular item must go through. If an item is limited to one phase only, leave the rest of the columns in that row blank. Don’t be afraid to add or remove phases as needed to fit your own process.

Be as particular and detail-oriented as the information you have on hand allows.

If the suggestion to use spreadsheets makes you groan, consider everything Phuse accomplished when we moved to spreadsheets in Google Docs:

• We saved time on scoping
• We doubled down on collaboration
• We reduced the probability of calculation errors
• We added Communications, Quality Control, and other operational costs into the estimate as rules, rather than on an “as needed” basis.

This one simple change immediately resulted in more thorough and accurate estimates for us.

Example Estimate: Landing Page

Now we’ll look at an example to see how this works in practice.

Let’s assume we’ve been tasked with building a new landing page. The client wrote the copy and came to us with a logo, so our tasks are to wireframe, design, and develop a single page website. The client told us the deliverables are static HTML/CSS with a Mailchimp email capture field on the page to measure interest in their new product. We’re also responsible for launching the site, and it needs to be responsive.

Here’s what our team came up with (click here for full spreadsheet):

A few things to note:

• Communications are set at 15% of the subtotal; Quality Control at 10%. These numbers can and should be adjusted to fit your process.
• Project Management is not included. We don’t usually charge for Project Management at Phuse, but if you do, be sure to add it to your spreadsheet as a percentage of the subtotal.
• The Brand Strategy and Content Strategy columns are both empty. If you remember the brief above, this is because the client wrote their own copy for the site, and came to us with a logo we could use. You should determine these sorts of things during the sales process.
• The Landing Page does not include any custom illustrations, graphics, or icons. Nor does the estimate including miscellaneous work such as sourcing stock photos. If those were things the client wanted, we would add them to the spreadsheet as separate line items and estimate minimum and maximum hours for each.

Once the client is happy, and the scope is fully accounted for, then congratulations, you’ve arrived at an accurate estimate…right?

Base New Estimates on Past Data and Experience

At this point, our example estimate is only accurate in theory. Before you send it to the client, be sure to validate your theory by comparing your estimates with past experience and, most importantly, real data.

At Phuse, we use Harvest, so we can quickly generate and review reports on past projects — how much they cost, and the effort it took to complete them. By finding a past project of similar size and scope as the new one we’ve been asked to estimate on, we can give a more accurate estimate.

The only way you’ll be able to get accurate numbers for your own agency is by using a tracking tool like Harvest and learning from the data. If your business is relatively new, it’s a bit of a chicken and egg scenario — you need to have experience doing similar projects in the past in order to give accurate estimates in the future. Over time, as you gain experience and learn more about yourself and your process, your estimates will become more accurate.

From a client’s perspective, this means a few things. First of all, look for a team that has worked on a project similar to yours in size and scope. Be sure to ask for samples and compare them to the project you have in mind. Second, ask yourself if you’ve fully uncovered the scope of your project. The worst culprit for failed projects is a poorly outlined scope.

However, we all start somewhere. Here are a few tools that will help you cover your bases:

1. Hillary Weiss at the Crew.co blog recommends putting together a client survey
2. Have a checklist of operational necessities with questions like: who’s going to handle hosting? What file format do you want the deliverables in? Who is responsible for migrating content from the old to new website?
3. Create a responsibility assignment matrix.

Don’t Forget Overhead and Padding

Our goal with estimates is always to come in at or under the low end of the estimate. Why? Because we want to exceed people’s expectations.

This requires padding your estimates accordingly. Notice how the Communications and Quality Control time above were added automatically to the estimate above based on a percentage? We chose that percentage based on past data — plus padding.

The hard truth is that you can’t foresee all of the bumps in the road at the starting line of a new project. The universe may be conspiring, unseen, to throw you off the rails. Padding your estimates for hidden stakeholders, unforeseen requests, and curve balls is not just good planning, it’s good business.

Be sure to keep the type of client you’re working with in mind when it comes to padding your estimates. Some clients require more communication and hands-on time than others.

Tips for Estimating

Here are a few more tips that will help you estimate better.

1. Break things down. Then break them down again. If a page has complicated elements on it that need to be designed or developed, make sure to add line items for individual elements. For a dashboard, this might mean quoting for the top-level dashboard, then breaking widgets on the dashboard into individual line items.
2. Think about the user’s journey. Understand what pages a user needs to see as they go through the app or website. Sometimes a client might have asked for things like a login form but may have forgotten about a user’s need to reset their password and the 3–4 additional pages that are required to do that effectively.
3. If you’re doing integration, add padding for existing environments. Our development team came up with a checklist of things they look for in existing environments that cause problems (i.e. lack of test-driven development, documentation, unfamiliar languages, etc). Do you use a similar tool? Why or why not?
4. Think about what will be required in getting the project set up, launched, and documented. For us, this includes things like:

• Content import
• Environment and set up for development environments
• Training clients on CMS systems
• Documenting CMS systems
• API integration
• Individual icon design or graphics

1. Don’t be afraid to pitch discovery. Some projects require a bit more time to discover how long they’ll take and create an accurate estimate. When in doubt, leave it out. Explain to the client that instead of shooting into the dark, you’d like the opportunity in a paid engagement to research what’s involved and come up with an accurate estimate before moving forward. Most people will be open to this if you explain the sound logic behind it and come at it strategically.

Practice Makes Perfect

Estimating on digital projects is hard. A study in the Journal of Personality and Social Psychology (wiki) showed that most people are not good at estimating time at all. Everything from how long it’ll take us to drive up the street to a neighbour’s house to how long it takes to paint a room are wildly inaccurate guesses.

In fact, every estimate is a guess — that’s what the word “estimate” means.

That’s why you need to use your team, work closely with your client, base your estimates on real data, and utilize a spreadsheet that automatically adds padding and does the math for you to consistently arrive at accurate estimates.

You also need to educate your clients throughout your time with them. The project you’re working on with your client is rarely their only responsibility. It’s your job as the expert to teach them and collaborate with them the whole way through. No project comes without risks, but starting a new relationship with this kind of transparency is beneficial to you both in the long run.

I hope you find the spreadsheet template useful. Use it, modify it, and please leave your thoughts and questions in the comments below.

Good luck!

You might also like…

Originally published at phuse.ca on November 2, 2015.

A Process for Creating Accurate Estimates was originally published in Phuse on Medium, where people are continuing the conversation by highlighting and responding to this story.

The first retreat in Mexico last year taught us several valuable lessons, and this year we were able to take it up a notch. We rented a large house near our favorite coworking space downtown, the CSI Annex. There, we booked a conference room and spent the first half of each day bonding over coffee, getting some work in, and generally doing what we each do in our home offices and coworking spaces — but with undeniably better company.

Phuse on Twitter

Everyone arrived safely in Toronto! Here's us coworking this morning @csiTO

While we made a pretty detailed schedule for the week, the afternoons were left open. After coworking, some people continued working on their projects, others played video games (Diablo III, FIFA 2015, and Call of Duty: Advanced Warfare were the hits of the week) or went shopping on Queen Street. In the evenings, we regrouped for team dinners at locally acclaimed restaurants like La Carnita and Terroni. One night, Larissa and Heidi made southern style shrimp and cheesy grits for the rest of the team with locally-sourced ingredients.

The evenings were also packed with fun activities. The first night everyone was in town, we went to a board-game pub called Snakes and Lagers to play Cards Against Humanity and Boss Monster (depending on your preference).

Phuse on Twitter

Wouldn't be a trip to Toronto without a trip to Snakes and Lagers.

On a separate occasion, we tried our hand at an escape room. If you’re not familiar, escape rooms are real-life adventure games. Popularized in Asia, the concept has since migrated to North America. They’re fun, but challenging, too. The success rate of the one we attended, called “Escape from the Mysterious Room”, was a measly 3%. Though we came close to solving the puzzle, the timer ran out before we made our way through the final few clues.

Phuse on Twitter

We just Escaped from the Mysterious Room! Well... Almost.

At the end of the week, we also celebrated James’ birthday with a barbecue…and a party bus which took us to Dave and Busters!

Yeah, James, we were excited, too!

We’ve already begun to plan the third annual retreat for 2016. Our goal for next year is to enable the whole team to join the fun by subsidizing flights and choosing a reliable, central location.

If you want to say hi next time you’re in Toronto, or you have any recommendations for what we should do while our team is in town next year, mention @phuseca on Twitter, or leave a comment below!

Second Annual Phuse Retreat was originally published in Phuse on Medium, where people are continuing the conversation by highlighting and responding to this story.

Shuffle, a smart communications app that gives its users access to multiple numbers on a single device, is now available on the iOS App Store in the United States and Canada.

Shuffle makes it simple to manage multiple phone numbers and email addresses for a variety of purposes. Whether you need a second number for your online business, you’re selling an old piece of furniture on Craigslist, or you’re dipping your toes into online dating, Shuffle’s focus on privacy will keep your contact information safe and your communication options flexible.

Craig Collett came to us a year ago with his vision for Shuffle. His passion and relentless determination has been instrumental in bringing Shuffle to life, from the Indiegogo campaign to the design process and beyond.

Get it now on the iOS App Store

An Android app is currently in development with an estimated release at the end of this year. You can sign up for the mailing list to be notified of the Android release at GetShuffle.com.

Shuffle “A Number for Every Occasion” Launches on iOS was originally published in Phuse on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Youth Space Challenge, a space-themed event for kids ages 7–15, takes place this weekend, April 11th, from 1–5pm at The Lab in downtown Toronto. Attendance is free. Participants will have the opportunity to spend an afternoon bringing their space-related dreams to life, and no registration is required.

A few of the activities will include:

• Hotpop Robot: Stars are very far away, but astronomers can learn a lot about them from their light. Kids will be able to make their own spectroscope from simple materials and study the light spectrums of different bright objects.
• Making Space Badges: Kids will create space-themed images using the web-based Pixlr program and craft supplies. They will then bring them to life, making a pin-on badge with a button-press!
• Learn to Code: Using Tumblr, a popular blogging platform, kids will craft a short post about “what they love about technology and space” within an HTML template. The blogs will be published on a rolling basis throughout the day, resulting in an exciting demonstration of the kids’ perceptions of technology and space.
• 3D Printers: 3D printers will also be set up on site so that kids can see them first hand.

In 2013 and 2014, the NASA Youth Space Challenge attracted on average 130 kids per year to the event. To quote Laura Plant Hasanbegovic, Co-Executive Director of event hosts Ladies Learning Code:

“Our mission is to help youth experience technology as a medium for self-expression, and as a means for changing the world in an accessible way.”

The Lab is also the home of Kids Learning Code, an organization dedicated to teaching kids how to get the most out of modern technology, and giving them life-skills they’ll need for a technological future.

You can learn more about the event, which is part of the International Space Apps Challenge hackathon that runs throughout the weekend, by visiting the youth event page on SpaceAppsToronto.com.

Learn and Play at the Free NASA Youth Space Challenge was originally published in Phuse on Medium, where people are continuing the conversation by highlighting and responding to this story.

Registration for the 2015 International Space Apps Challenge is now open! Visit their website to find a location near you, and register to attend the biggest hackathon in the world.

Since its inception in 2012, the International Space Apps Challenge has become the biggest global hackathon, engaging thousands of citizens across the globe in working with NASA to design innovative solutions to global challenges. At the last Space Apps event in 2014, more than 8,000 global citizens in 46 countries and 95 cities participated.

— Ali Llewellyn, Community Advocate at NASA

On the Ground in Toronto

For the third year in a row, Phuse is organizing NASA’s Space Apps in Toronto. James will be on the ground floor the weekend of the event, April 10th to 12th, and at the Youth program on April 11th.

If you want to learn more about the Space Apps Toronto Hackathon or Youth program, all the details are located at SpaceAppsToronto.com, or you can follow @spaceappsto on Twitter.

NASA Space Apps TO on Twitter

Calling all Toronto makers, hackers, designers, and big thinkers - registration is open for Space Apps Toronto 2015! http://t.co/S7ELISpOGZ

Women in Data

The Challenges themselves, the questions that the attending teams of designers, developers, entrepreneurs, and makers will be addressing, are centered around themes of Earth, Space, Humans, and Robotics. These will be announced in late March.

This year NASA is placing an emphasis on Women in Data by kicking off the weekend with a one-day data bootcamp, an inspiring initiative which will be live-streamed to other events and participants around the world.

We’ll be tuning in. Will you?

Space Apps Challenge: 2015 Registration Opens! was originally published in Phuse on Medium, where people are continuing the conversation by highlighting and responding to this story.

Background on the Project

After two years of work, the InfoSec Resources team had an incredible archive of informational security media: articles, labs, series, and ebooks. All of these resources were connected and kept alive by InfoSec’s community of passionate technologists.

Unfortunately, as time went on, the resources site experienced some growing pains. Inconsistencies in their design crept in as new functionality was added. Calls to action got lost among the noise, and reading on the site wasn’t the most pleasant experience due to the crowded design. Needless to say, the site had outgrown the humble WordPress theme it started with.

Let’s take a look at the resource site’s journey from discovery session to final design.

Discovery Sessions

We kicked off the project with something we call a “discovery session.” Our discovery sessions are active work sessions. Everyone involved in the project was brought together via Skype, and we spent the day identifying InfoSec’s goals, problems, and the possible solutions. We also created wireframes, discussed the information architecture, and made strategic decisions that influenced the rest of the project.

InfoSec came to us with a couple of goals already in mind:

1. Improve the overall visual appeal of the site with a focus on how to present their vast amount of content.
2. Improve conversions on various course promotions and calls-to-action around the site. This included better integration with other InfoSec sites, inviting people into their training programs, and tying in with their newest addition to the InfoSec ecosystem, SkillSet.

From here we looked at what they were currently doing — both the pros and the cons. The major improvements we wanted revolved around improving the reading experience for their most active users. This included making the design easier on the eyes, improving how we organize the content so people can find what they are looking for faster, and introducing calls-to-action seamlessly within the content using a flexible template system.

Wireframing

We usually have time to start the wireframing process during a discovery session, but it always extends beyond it. When the notes were in and the planning was done, we really dug into the rest of the information architecture (IA) and wireframing in-depth.

Wireframing and information architecture (IA) are two of the most important aspects of visual design — they lay the foundation for the other aspects of visual design. If were were building a house, the wireframes and IA would be our blueprints, and we spent a lot of time making sure we were building a solid foundation for the design.

We had two main challenges during this phase of the project:

1. To make sure we were not only displaying the vast amount of content that the site had to offer, but that users were seeing the newest posts highlighted, especially when they were “hot off the press.”
2. Solving the problem of post types and how best to display content for the user. InfoSec has post types ranging from text based articles to videos to mini courses to multi-part series. When we thought about these post types and how they differed, it was clear that one set layout was not going to work for them all, so we designed a range of different layouts to suit each of the post type requirements while maintaining consistent reading patterns across the whole site.

[caption id=”attachment_3269" align=”aligncenter” width=”700"]

Wireframes for InfoSec Resources[/caption]

Visual design

Once the wireframes were finalized and approved, we moved on to visual design, starting with a few loose color selections from the current InfoSec brand. Short of that, we pretty much had a blank canvas to work with.

I started by building two color palettes. One would influence the bulk of the interface (backgrounds, sections, etc.), and was inspired by the most popular terminal/editor themes among developers (our main user type). This palette consisted of a number of shades of grey. The second was derived from the current InfoSec brand colors and would be used more selectively for calls-to-action, post types, and important links.

[caption id=”attachment_3271" align=”aligncenter” width=”700"]

Colour palette for InfoSec Resources[/caption]

It quickly became clear that serif fonts simply weren’t going to work with the style we had in mind. Instead, we focused on sans-serif fonts, considering the kerning and — again — the reading experience. Eventually we settled on Montserrat for the main font.

[caption id=”attachment_3260" align=”aligncenter” width=”700"]

“Hello World” in Montserrat font.[/caption]

Another big decision during the visual design phase was the proper use of images/photos. During wireframing we set up a structure with an option to show an image associated with each post if that post was new/featured. The content team would then be able to use background colors to associate the post with a category. Again, the goal here was to reinforce the fresh new content, especially for returning users. When you look at the site now, these image/color associations are instantly noticeable.

Another hurdle we overcame together with the InfoSec team was that the quality of images for posts was inconsistent. With the new design displaying images so prominently, the importance of image quality increased tenfold. We created an image guide to help the content team at InfoSec source images at the best quality and with suitable dimensions for the new site going forward.

Here are some before and after shots of the design so you can see them side by side.

[caption id=”attachment_3277" align=”aligncenter” width=”1400"]

Before and after screenshots.[/caption]

Development Advocacy in Design

The next step in the project is the web development phase. At Phuse, the development team is looped into every design decision. From discovery to the end of design, Ben, the developer assigned to InfoSec Resources, worked tirelessly to give constant feedback. He was forthcoming about any restrictions or difficulties we might run into during development based on the proposed changes and layouts from the design phase. This allowed us to either tweak the design or add in contingencies to account for the issues he foresaw across browsers and devices. Working side by side with Ben was invaluable during the entire design phase.

Conclusion

There we have it, a look at our design process and our thinking behind decisions made throughout the InfoSec Resources project. The end result is a much more pleasant, readable site that users enjoy interacting with and reading on. A couple days after launch, we saw that time spent on the site increased by 12%, and that user engagement went up by 5%. We’re confident these modest increases will continue to grow as the InfoSec Resources content team begins to use the new templating system and CRM integration to their full advantage.

The site is also interconnected with the rest of their ecosystem of websites, an added value for the casual user of their site who hasn’t yet been exposed to the wealth of knowledge at SkillSet and InfoSec’s other training programs.

Let us know what you think of the process and the end result by leaving a comment below!

InfoSec Resources: Journey from Discovery to Design was originally published in Phuse on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Mission Report showcases the winning projects, summarizes the outcome and reach of the event, and cobbles together important statistics. Last year’s Mission Report turned out to be an especially rewarding project to work on. It was shared at a NASA event, and the infographic stands out as some of the best Space Apps work we’ve done.

Space Apps 2014 Mission Report

In early December 2014, Space Apps representatives handed out fifty full bleed color copies of the Mission Report to an audience at Kennedy Space Center. Around the globe, thousands of others accessed the digital version. Folks that gathered at Cape Canaveral celebrated two big events that day: the success of the spacecraft Orion’s Exploration Flight Test-1 (EFT-1), and another great year solving Space Apps Challenges with the global community.

Here are a couple shots of the Mission Report as it would have looked that day.

Space Apps 2014 Infographic

Originally created for sharing at NextGen Government conference in July 2014, the infographic was also included as a two-page spread in the middle of the Mission Report.

[zoom-image src=”http://phuse.ca/wp-content/uploads/2015/02/sa-infographic-blog-1024x683.gif" zoom=”http://phuse.ca/wp-content/uploads/2015/02/sa-infographic-blog.gif" caption=”Click the image to zoom in” align=”center”]

The infographic was a particularly meaningful piece. You see, the Space Apps Challenge is focused on bringing local talent together to develop solutions to aeronautical challenges. It’s only the Mission Report — and this infographic in particular — that gave us the opportunity to aggregate the data from 95 locations across the globe, and display it in a meaningful way.

Our favorite insights from the event include:

• Ten astronauts participating, an impressive number!
• 29+ million tweets about the event.
• If you plot geographical points from northern, southern, western, and easternmost participating cities, you just about cover the entire globe.
• Toronto is one of seven cities to host a companion youth event.

To be involved in an event that has a world-wide impact is a reward in itself. But to be able to bring it all together for the participants, and show them what kind of impact their hard work had — that makes a difference.

Planning for 2015’s Space Apps Challenge

The 2015 Space Apps Challenge event is just around the corner. It will take place April 11–12, 2015 in cities around the world. Check out the Space Apps International website to find an event near you. There’s also a Space Apps Challenge 2015 event planning guide on SpeakerDeck if you want to organize an event in your own city.

Do you live in Toronto? Join us!

Once again, Phuse is organizing the Space Apps Toronto event. Plans are already underway for both an adult and youth event. Feel free to email james@phuse.ca if you’re interested in helping out. Registration for participants will open a month before the event, on March 11th. Sign up at SpaceAppsToronto.com to get notified about more details, registration deadlines, challenges, the youth event, and more!

Making Global Data Beautiful for NASA’s Space Apps Challenge was originally published in Phuse on Medium, where people are continuing the conversation by highlighting and responding to this story.

View the Demo

Do we really need another modal script? The short answer is “yes.” For better or worse, modal windows are here to stay. Many solutions have existed in the past that take the headache out of manually coding up a modal window: Lightbox, Thickbox, Colorbox (can you spot the trend?) and so on. However, many such solutions are outmoded by today’s standards.

The future of JavaScript is light. The future of JavaScript is modular. Browser vendors have known this for some time, and with the impending release of ECMAScript 2015 (the Artist Formerly Known as Harmony) and the upsurge in popularity of server-side JavaScript thanks to Node.js and io.js, developers are catching on too.

Enter Vanilla Modal, a modal built using ECMAScript 2015 that properly separates concerns (in other words, HTML, CSS and JavaScript don’t step on each other’s toes) and has zero dependencies. Better yet, its JavaScript component has a minified & gzipped footprint of 1.8KB.

Styling, breakpoints and transitions are controlled by you, using CSS. The markup of your modal is left entirely to you. And the content? Vanilla Modal can display any DOM element that already exists on the page, so you can theoretically open anything you like inside a modal window.

You can even have the window resize automatically to fit a page or series of pages from an iframe (just remember the same-origin policy when opening iframes). Essentially, there is no predefined stylesheet; no extant markup; and only a tiny glob of JavaScript to include in your project.

Perhaps most significantly, this modal doesn’t rely on any other JavaScript libraries. No jQuery, no Zepto, no AngularJS. This in turn makes it possible to integrate it seamlessly with your framework of choice — all events are delegated from the document, meaning Vanilla Modal will work even in a constantly-changing, stateful JavaScript single page app.

I’d tried a great number of modal solutions before finally giving up and designing my own. Every solution I attempted had a fatal flaw of some kind, be it a dreadful API, embedded markup, a narrow selection of available animations or use of the CSS :target pseudo-class (more on that in the documentation). I hope that this one will suit you as well as it’s suited the several projects it’s about to be deployed on in the wild.

Vanilla Modal is compatible with the evergreen desktop and mobile browsers, as well as IE 9+. It works with ES2015 imports, AMD and CommonJS loaders. It’s also available on NPM. Find it at the addresses below:

• GitHub
• NPM
• Documentation
• Demo

Enjoy! Don’t forget to let us know in the comments where you used Vanilla Model.

Vanilla Modal: A Plain JavaScript Modal for the Rest of Us was originally published in Phuse on Medium, where people are continuing the conversation by highlighting and responding to this story.

A company brand is something that evolves with time, as the company grows. So it should come as no surprise that we’ve been thinking about rebranding for a couple years.

This isn’t the first iteration our logo has gone through, but this time the process was different. This time it wasn’t just a logo; it was our identity, our sense of who we were as a team, and therefore much more involved.

The Rebranding Process

Involved doesn’t necessarily mean it took longer — at least the actual implementation didn’t take longer. James Costa (our Creative Director), Jonathan (our Brand Designer), and I sat down to talk about it after we launched a newly rebranded website to celebrate the evolution we’d gone through.

“We started thinking about it about a year ago when I joined the team,” Jonathan said. “We had it in our minds for a long time before actually doing the work.”

Once we had a concept firmly in mind, though, the actual work only took a month, spread between client projects and other day-to-day tasks. Speaking in terms of time/cost analysis, it wasn’t expensive — nor should it have been. Having a thoroughly envisioned, solid concept really cuts down on the time it takes to design a brand — or anything, for that matter. Once you know how the end result should feel, the rest is process.

“And we followed our branding process to a tee,” said James. We all smiled. The same process we use with our clients every day worked on our own stuff. That felt good.

Let’s talk about the process.

Positioning Ourselves Against Confusion

The first itch we tried to scratch with the rebrand was to position ourselves against perceptions we didn’t want associated with our brand.

For years we’ve been “The Phuse.” Over the time we’ve used that name, we’ve seen many misspellings (ThePhuse, Fuse, and variations between), mispronunciations, and questioning expressions. “You work for who?” people would ask when we introduced ourselves at networking events. We decided that dropping “The” from in front of the name would simplify it and help eliminate confusion. “Phuse.” Short and sweet. We found a new domain name, Phuse.ca, to match.

Another issue we faced was that the old cloud logo appeared to be eerily similar to the iCloud logo currently in use by Apple (but we came up with it first… no, seriously!). Worse, a cloud with a thunderbolt is the universal sign for gloomy weather. While rainy days can be fun, our idea of who we were as a team didn’t line up with the negative connotations gloomy weather implied. Early iterations of the new brand included clouds, but we moved away from that concept quickly.

The third issue that confounded us was of our own making: a lack of consistency in fonts, colors, and presentation. Over the years, we’ve experimented with different colors and different applications of the brand. The style of our portfolio also shifted as new designers came on board and our sensibilities changed.

The truth is, we didn’t come up with a style guide when we came up with the original concept over five years ago. The lack of a definitive guide allowed the brand to become muddled over time. To remedy this once and for all, we created an in-depth brand guide that defines the colors, fonts, tone of voice, and usage.

Positioning Ourselves With Our Core Values

Once we had defined what we didn’t want to be, we were faced with the more challenging task of defining what we did want to be. What were our company values? What did we want to be known for?

We already had a few ideas bouncing around. The 5 Pillars of Awesome Team Culture talk James and I gave at South by Southwest Interactive 2014 was part of the story. We also talked a few months before the rebrand process started about how we wanted to position ourselves to our clients: namely, we wanted them to think of us as a product team, which is how we think of ourselves.

We’ve learned a lot in the past few years and, as usual, when we learn, we iterate. Out of that “rework” (to steal the catchphrase from Basecamp founders Jason Fried and David Heinemeier Hansson), we distilled our core values down to three, each related to one of the foundations of our business:

• Our team, which is Authentic, both in how we communicate with clients and represent our work.
• Our environment, which is Collaborative, as we work closely with teammates, clients, and partners.
• Our process, which is Transparent both in terms of the company’s roadmap and project-related communications.

We see the authenticity, collaboration, and transparency every day now. Defining these values didn’t change the way we work. They defined what we were already doing. They also drive every decision we make on a day-to-day basis.

Knowing the words to use just made it easier to see.

The Story of Our Brand

With our positioning clarified, we kicked off the design process and raced through it in a month. A lot of great discussion happened around the concept of the logo during this work, and that’s the story we tell to people who ask what the logo is all about.

In the words of James:

“The logo is made up of dots and dashes that come together to form the bolt. As a remote team, coming together from different places (both in terms of location, background, and experience) is a part of who we are. It also shows that we’re a part of something bigger than ourselves: a Phuser is never on their own. They always have the full support of the whole team. Our clients rely on us in a similar way. We become a part of their product team. Finally, the lightning bolt represents energy, which is something that we bring to all of our projects — in terms of speed, quality, and the customer experience.”

There’s even an easter egg hidden in the logo. The acronym ACT, which stands for the three core values of authenticity, collaboration, and transparency, were built into the logo itself.

Phuse’s Brand Book

With the design process complete, it was time to put it all together in context, and define how the brand was to be used in all its various permutations.

This work was a collaborative effort between Jonathan and I. I wrote content alongside him as he was formatting the file in InDesign. It was a rewarding experience, because we were able to take all the collateral we already had and make a guide that would encompass the entire brand for years to come. Achievement unlocked!

You can download our Brand Book here.

A Phased Rollout

When our design team had a definitive brand guide to pull from, we reskinned our current website so that it fit the brand, and cranked out a new client guide and sample guide to share with our prospective clients for a consistent experience.

Over the next few months, we’ll be reworking individual pages of the site to improve them, and we’ll be designing other brand collateral — new business cards, t-shirts, hoodies, stickers to hand out at events, you name it. We’re excited to see it all take shape and will be sure to share it with you when it’s done.

We chose to roll out our new brand one piece at a time because iterating is part of who we are. We’re OK with doing it one piece at a time because it lines up with the core values we covered above. Not to mention, iterative workflows and minimum viable products are what we recommend to our clients — and we practice what we preach.

Lessons Learned

Branding is an ongoing practice. Each new decision you make continually redefines your brand over time. Rebranding doesn’t mean that you need to be something different than what you were. But it can mean that you’re more confident in the direction you want to go in.

Defining who we are helped us make decisions throughout the process, and influenced the imagery we chose to represent Phuse for 2015, and years to come.

Do you have any lessons to share from your own rebranding experience? Share your story with us in the comments!

Rebranding, Hidden Truths, and Lessons Learned Along the Way was originally published in Phuse on Medium, where people are continuing the conversation by highlighting and responding to this story.