In 2016, hayWire joined the Red Branch Media family and we’re so happy to be here! Red Branch Media, is a full-service marketing and advertising agency that caters to assisting clients in B2B, Non-Profit, FinTech and more. The Red Branch blog features articles on marketing, design, leadership, HR topics, social media and so much more. This article originally appears on the Red Branch Media blog and is reprinted here with permission.  

A better-looking, better-functioning and overall upgraded website is something our team gets asked to do quite frequently. In an age where 50% + users reach your website through a mobile device, a website brought into this decade is a box needing to be checked. The talented and hungry team of designers, copywriters, SEO strategists and developers pull their strengths turning a less than stellar online presence into an industry-leading web portal. However, what is a carpenter without a toolbox? Learn our web team’s 5 best tools they would never start a web project without.

Tweet This: Work in #WebDev? You need to know about these 5 tools!

1. Uxpin

The early stages of site planning require just that: planning. We use uxpin at the beginning of our projects to plan out the structure of the site. We build sitemaps, layouts and wireframes in the easy user interface. Visually representing page hierarchy in a sitemap rather than a page list better reflects a website navigation menu. The best feature of uxpin is the collaboration capability. The team can send a live link showing the sitemap instead as an emailed image. The link can be commented on and shared throughout the organization.

Website Development

2. Sketch

Sketch is a no-brainer. The super sleek, lightweight and exceptionally intuitive tool allows us to quickly draw up an artboard fit with images, text and styling fit for web. Setting sketch files up with web specifications allows a seamless transition from design to code.

Web Development

3. Icomoon

Creating a custom icon set for each website brand is a simple but significant design choice. A thin line monochromatic icon can embody simplicity and transparency while a multicolored, detailed expressive icon can express personality and originality.  When using custom icons, we use the web platform of Icomoon to turn svgs into an icon font. This enables icons to be subject to code. What’s the importance of this? Well, when there is a color change request, one line of code needs to be changed instead of a new image uploaded. If you don’t understand the gravity of this situation, count yourself lucky.

Website Development

4. Codekit

Hosting clean and consistent files of code can make or break your site (literally). We use Codekit to compile and compress our files and images. The result is a smaller output file which can more easily be digested by the web. Long story short, this makes our sites smaller and faster. Added bonus? Codekit’s magic browser refreshing feature means the dev team can see in real-time the effect of their code.

Website Development

Don’t have a clue what we’re talking about? Read the basic code every marketer should know here.

5. Browserstack

We develop on chrome. This means our sites are beautiful on chrome. This does NOT mean, however, our sites look the same on alternate browsers such as Firefox, Safari, Opera, Edge and *cough* *cough* Internet Explorer. The team uses a tool called Browserstack to show in real-time what our sites will look like in other browsers, operating systems and devices. Cross-browser and mobile functionality is a core deliverable for any good website development team. Browserstack shows what needs to be fixed for which device/browser or OS. This means we can fix these issues before a user opens up the site in his Windows phone.

Web Development

Love this? Read a Day in the Life of Web Developer.

We Love Pretty Sites

We also love functional sites. Need a mixture of both? Learn more about our process here.

 

This article originally featured on the Red Branch Media blog on our sister-site, Red Branch Media. It’s a whole new world over there, take a look

Posted By: