Meet UX Designer Spencer Ravago and Frontend Engineer Nick Guzman. They have an unwavering dedication to excellence and an appetite for pushing boundaries. Spencer and Nick embody the spirit of innovation that defines our agency. We can’t wait to witness the impact they will make on our projects.

So please help us roll out the red carpet for these two new team members. Make sure to keep an eye out for their incredible contributions as they revolutionize the way we approach design and development. Together, we’ll continue to create extraordinary digital experiences that amaze and inspire.

Spencer Ravago, UX Designer

A common theme among the teammates at WebDevStudios (WDS) is a passion for WordPress. That resonates with Spencer.

“What I like most about WordPress as a platform is its versatility,” Spencer explains. “It can be a simple platform for the average person who would use it out of the box for blogging. But on the opposite end of the spectrum, WordPress can also be customized with complex features for enterprise-level clients, like what we do for our clients at WDS. With the addition of Gutenberg blocks and full site editing, there are so many possibilities with WordPress.”

Lucky for us, Spencer was no stranger to WDS. He and Engineering Manager JC Palmes are longtime friends. In fact, both are lead organizers for WordCamp Iloilo 2023. We can give thanks to JC for nudging Spencer to apply to join our team.

“JC told me about the vacant designer position here and encouraged me to apply,” reports Spencer. “I was honestly intimidated and hesitant at first. But thinking about the great people on the team, the collaborative work environment, and the caliber of clients WebDevStudios has, it was too good not to even give it a shot. Thankfully, I did.” We’re grateful, too!

In Spencer’s team bio, he mentions that he enjoys the “problem-solving aspect of design.” When asked why that is, he says it’s just how he’s wired.

“I generally have a hard time doing something that doesn’t have a specific goal in mind,” Spencer clarifies, adding, “Which is probably why I consider myself more of a designer than an artist since art leans more toward self-expression. Design allows me to be creative in a way that focuses on a specific goal or problem that I can work towards.”

As mentioned earlier, Spencer and JC were lead organizers of WordCamp Iloilo. (WebDevStudios was a proud sponsor.) The pair also headed up the Kids Camp portion of the event, too. Spencer has been actively involved with his local WordPress community since 2008.

“What keeps me interested in being involved with WordCamps and the local WordPress community is how tight-knit and collaborative our group has become,” Spencer says. “Some of the people in the community have even moved on to other non-WordPress careers, yet they continue to be active in our community, especially during WordCamps.”

When Spencer isn’t working or getting involved with the WordPress community, he focuses on his interest in the San Antonio Spurs. He hasn’t been to a game yet, since he is located halfway around the world from the team, but going to a game is on his bucket list.

“What I admire about the San Antonio Spurs is that they’re generally low-key and not very flashy since they’re a small market team,” Spencer explains his adoration for the team. “Yet they’re one of the more successful teams in the league, having won five championships. This is largely due to the team’s emphasis on fundamentals, teamwork, and continuous improvement. Great values to live by even outside of sports.”

Nick Guzman, Frontend Engineer

“My journey with WordPress began during my time as a junior at university,” shares Nick, adding, “I quickly developed a deep appreciation for its capabilities. Working with WordPress not only ignited my passion for web development but also provided me with opportunities to earn income while pursuing my education.”

Nick was inspired to join the team at WDS after discovering our blog. “Some years ago, I was googling for a starter custom theme for a WordPress client, and I stumbled upon the WebDevStudios starter theme wd_s, which was the subject of the blog post ‘Building a WordPress Theme,'” he explains. “I started following the blog closely, and when I saw a frontend engineer job opening, I decided to apply, and here I am.”

Prior to joining WDS, Nick worked on some interesting mobile projects. For example, he worked closely with the chief technology officer building Remble, which is on the mission to enhance the lives of millions of people throughout the world by making relationship and mental health support accessible to everyone.

“We used WordPress very heavily on the content side and as a Headless CMS, and on the frontend, we used React and React Native,” Nick explains. Before that, he also worked on the AAA mobile app. Additionally, he has worked for nonprofits and enterprise clients, too.

Nick really enjoys enterprise-level projects. He says they bring a unique set of challenges and opportunities.

“One aspect I particularly enjoy is the scale and complexity of these projects. They often involve integrating various systems, handling large amounts of data, and implementing advanced functionality,” he adds.

You wouldn’t know it by looking at him, but Nick loves all things Disney. He has visited both Disney US properties multiple times and gone on Disney cruises. Plus, he also attends other Disney events, such as marathons or horse riding events. But when it comes to Disney movies, there’s one in particular that captures Nick’s heart. “I love ‘Toy Story!'” Nick exclaims.

The post These New Hires Bring Fresh Ideas and Expertise to WebDevStudios appeared first on WebDevStudios.

• Do we have an in-house web designer and developer who can handle the workload?
• Do we have the resources to manage the project?
• Have we considered how we will run user acceptance testing?

This is the moment you might consider hiring an agency. Don’t stress! There are many reasons companies outsource to an agency, especially when it is one that specializes in designing and building websites. Ultimately, we bring a level of expertise to the project. Let me walk you through what it’s like to work with our team here at WebDevStudios (WDS), and why you would want to choose us for your next project.

Every client and project we work with is different, and because of that, the specific WebDevStudios team members that you work with will be unique to your project’s objectives and will include specialists with various skill sets and knowledge. Each of our team members play a critical role on the project. Today, I’m going to give you a sneak peek into roles and responsibilities to give you a better feel for what to expect when working with our team.

Business Development

You will be initially speaking with a member of our Business Development team. They are responsible for taking your vision of the project, researching it, and converting it into a comprehensive proposal and project plan.
 
 
 
 
 
 

Project Management

A dedicated Account Manager will be assigned to your project that oversees the account, while a Project Manager will be assigned to manage the day-to-day objectives from initiation to completion of the project. They are responsible for managing tasks, scheduling, communication, etc.

Our Project Managers work closely with the Engineers during the project to ensure everything is on track, in scope and on budget. Through our project management tool set, you will have the opportunity to follow the progress of your project. The Project Manager will keep in touch with you at all times during the project; so if you have a question or concern, you always have someone to talk to.

Design

If your project consists of a design phase, you will have a dedicated UI/UX web designer who will focus on creating a prototype for your new site based on the requirements you discussed with Business Development, as well as your target audience. From detailed wire framing to prototyping, you will be involved at every step during the design phase to ensure your needs are met. This is one of the most exciting steps in the project, as our creative team is excellent at taking your vision and creating something visual that considers accessibility and responsiveness to ensure your site looks great on desktop and mobile.

Engineering

There will be various Engineers dedicated to your project. As I mentioned previously, every project is unique and requires particular skill sets. We have a wide range of Engineers on the WebDevStudios team who specialize in different areas of technical abilities specific to WordPress. Below, I break down the different types of developers you might work with on your project.
 
 
 
 

Lead Engineer

Every project has a dedicated Lead Engineer (some projects require more than one) who is responsible for taking project requirements and mapping out a development plan for our Engineering team. They will also review updates, do demos, and work alongside the Project Manager during your project.

Frontend Engineer

Frontend Engineers are responsible for developing elements on the frontend of the website—essentially, everything your users will interact with—usually in the form of either a custom WordPress theme or a child theme from a popular theme framework. Our WebDevStudios team of Frontend Engineers take the beautiful prototype from the designer and turn it into the frontend of your website.

Backend Engineer

Backend Engineers are responsible for building the advanced functionality that typically interacts with the server. They also handle any data migrations from your old site to your new site, create custom plugins and custom post types, and ensure WordPress is created and set up for your new website.

In addition to our project team of experts, we break the project out into various phases that will help to set goals for each phase and move your project through from initiation to completion in a timely efficient way. You can check out more details about our typical project process flow in this blog post about a project life cycle.

We understand that redesigning or building a new website can be difficult, maybe even a little intimidating, but we’ve worked with many clients and have put together a team and process that make it fun and efficient. If you have an upcoming project, we would love to talk to you more about how our WebDevStudios team can help. You can get a hold of us by submitting a contact form or directly by phone at 1-855-932-3380.

Our team can’t wait to work with your team on your next project!

The post What Does Working with the WebDevStudios Team Look Like? appeared first on WebDevStudios.

WebDevStudios is thrilled to announce the launch of the new and improved TheSportsGeek.com! Working with Kevin McClelland, editor of The Sports Geek, was exciting. The challenge that he presented included the requests for a fresh redesign, a logo refresh, and a full-site-rebuild on WordPress. The original website was somewhat outdated, text-heavy, and in need of some visual pizzazz to better represent the energy of the client.

Admittedly, I’m not much of a sports guy, but that doesn’t prevent me from designing a great experience while concentrating on the important part: the content. We needed a plan focused on engagement and energy, while retaining the “sports” feel, so as to not alienate current users.

The Process

The first thing you might notice about the old site is that it’s plain; there is a lot of white and red. The header takes up the majority of “the fold,” and the site wasn’t mobile-responsive or mobile-friendly—a design that hearkened back to the early aughts.

“With the world switching to viewing websites on mobile devices, I knew I needed an updated and responsive website, but I was hesitant on getting a new website designed,” explains Kevin. “I thought the process would be confusing and difficult for someone like me who doesn’t have a background in design or coding. Thankfully the WebDevStudios team made the process very easy.”

Kevin came to the design with inspiration drawn from various sports, sports news, and sports betting sites like CBS Sports and Fantasy Pros. Three things they all had in common was that they were content robust, generally monotone, and very modular. So I started there and extrapolated.

“Every step of the way was carefully planned out, and there was an entire team working together to ensure I was happy with all aspects of the website,” Kevin says. “Communication was top notch throughout with weekly calls to keep me updated, and any of my questions or inquiries answered very quickly.”

The Layout

The typical user wasn’t spending much time on the site. Once signed up, users had the opportunity to receive emails with a bulk of fresh content. So, the primary goal was clear that user retention was important, but more so, user acquisition. The majority of the content on the old site was being served up long form without much imagery or differentiation in content. I needed ways to break things up. Enter the card.

A simple but effective way to break up content throughout the site, this layout solution comes in two forms: a “feature” visible on most pages and a general-purpose “card” visible everywhere else. Even the widgets are compartmentalized to keep things separate, but together.

Every part of this site was designed to create a hierarchy and separation between content; thus, influencing user focus, something that was sorely lacking in the old site’s layout.

The Colors

Red plays only a minor role in the new site design. Instead, blue and yellow take center stage, which are colors commonly used in the sports world.

I needed to keep things calm (blue) while bringing focus to elements throughout the site (yellow). Success!

The Header

The old site’s header, video, call to action, and a button is persistent on all pages, which is fine, but taking up that much real estate on a page can be problematic, especially on mobile devices.

Here, I’ve decreased that space requirement, while also giving users the ability to hide this block (not entirely) to clean things up a bit. Though the magic of javascript and cookies, that state (open or closed) is saved for the user; so, they do not constantly have to open or close that header block. Ahh, the internet… What can’t it do?

The Logo

The logo took shape after the site was well into the design phase, which is a fun little design challenge. We were left with a very specific space to fill in the header (longer than it was tall), a limited color palette given the darker blue background, and the need to somewhat refer to the original logo of the old site.

I kept things angular and in the vein of the old logo, but with a little extra flare, grabbing inspiration from existing sports logos, news sites, and for good measure some tech sites (for the geek).

The final logo design came out of our fifth choice, after a few minor tweak and solidifying the type… Voilà!

“When it was time to launch the website, I was eager to see what my followers/fans thought of the new design,” Kevin shares with us. “Within just a few hours of going live, I had numerous emails and tweets from people letting me know how much they loved the re-design; and since then, I’ve still had nothing but positive comments.”

Conclusion

Given several, albeit minor restrictions, we were able to give The Sports Geek a fantastic new look and feel without ignoring its roots. We’ve organized the content and provided a better mobile experience for those catching up on the fly. If at the end of the day, site traffic and new-user acquisition has improved by even a fraction, we’ve done our job. And that’s the power of design.

The post Our Redesign for The Sports Geek Is a Sure Bet appeared first on WebDevStudios.

Have you ever called your designer “a creative,” or asked them to just “use their imagination” when discussing new designs? Maybe you even came to them with a solution to a problem you hadn’t defined yet and asked them to make it look pretty. If any of those are true, it’s time to discuss the key differences between art and design, and why it matters to you and your company. Although art and design can look like the same thing, when you’re looking for someone to build your site with effective design, do the differences between design vs. art matter?

Art is open for interpretation

Art is subjective. Twenty people can look at a painting and give you twenty unique explanations about what it means, drawing upon their personal experiences and how the piece speaks to them.

Design is not subjective. Of course, one person may prefer the green button over the red button, but if the purpose of the button is to delete all of your photos, red would be a clearly better choice than green. There are hard facts based on data that support design choices and help inform these types of decisions, whereas artists don’t have to consider the goals of people looking at their art.

Design is more science and psychology than art. If your design has an interface flaw or doesn’t effectively solve a problem, twenty users will experience the exact same problem in the same manner. That’s because people always have a goal when they’re using a website or app; it’s nothing more than a tool to help them accomplish that goal.

Design is not created in a bubble

Art is created by one person, pouring her soul onto a canvas, drawing from wherever the imagination leads. Design has to involve other people. At the very least, a designer and a stakeholder. Design focuses on solving problems in a visual manner. That’s why when we see an infographic or sign in screen on an app, we immediately process it much differently than we would a painting or sculpture.

The very purpose of creating art is different from the purpose of design. The artist wants to express their point of view to the world, while a designer strives to connect the business goals and goals of the user in a visually pleasing and simple way.

We interact with design

Most of the time we don’t directly interact with art. We can admire it and contemplate it’s meaning, but for the most part, it’s a very passive activity. Think about how differently you would engage with a piece of art hanging in a gallery versus filling out a signup form on an app–two completely different activities with completely different goals and outcomes. This is why when designing for the web and mobile, we must constantly ask ourselves how we’re helping the user accomplish their goal, not how we’re going to make it pretty. Don’t get me wrong; interfaces can and should be attractive, but a beautiful app that’s confusing to use is far less useful than a mediocre design that’s well-planned and executed.

So now you should have a clear idea of the differences between these two ideas. They are both essential to us as humans, but we should always take care to remember these key differences between them.

The post Design vs. Art: What’s the Difference and Does It Matter? appeared first on WebDevStudios.

And, if you want to see just a few examples of some of the types of stuff we’ve been creating with Flexbox, be sure to check out our WebDevStudios Codepen page.

Getting Started

First, if you’re new to Flexbox, I can not recommend a better starting place than Wes Bos’ flexbox.io video tutorials. These are really great, quick videos that can easily get you up and running pretty solidly in less than a couple hours (if you watch them all). The only downfall is trying to go back and reference something is a little tricky with video. Not to worry–CSS-Tricks has you covered with this great guide to check back with when getting the lay of the land.

One of the trickiest and most difficult parts of implementing a new way of doing things is that there’s definitely going to be a bit of a learning curve. Learning while doing is the absolute best way to force yourself to learn something new, however along with that comes the “struggle bus” at times, and that’s ok–it’s common. Theoretical practice is nice, but real implementation is, well, REAL, and can be tricky sometimes.

Flexbox Hightlights

Let’s start by reviewing some of the benefits and positives to using Flexbox.

Flexbox has the ability to create a variety of different layouts and ways to order items on a page to best fill the available space. This was previously much more complicated especially when changing screen sizes and orientation.

It’s important to note that Flexbox is a module and not a single property. Some of the basic terminology can be found here from CSS-Tricks.com. This is a really good primer when you’re first trying to get started. Basically, there is a parent item, and it’s referred to as the flex-container. Then, the children of the parent container are referred to as flex-item (or items). This isn’t all that different than using Bourbon and Neat in terms of parent/child relationships, which I touched on some time ago.

Once you have a handle on that, you’re ready to start creating and laying out items–and you’ll find it easier than you have in the past! As I mentioned earlier, one of the best features is the ability to re-order flex items within a particular container, at least from my first impressions, I found this to be super easy and really helpful.

Have you ever tried to do this with previous methods, grids, or even using Bourbon’s Neat? It’s been possible, but at times more difficult than needed to make it happen, and it’s always felt, at least to me, a little unstable when previously re-ordering items (particularly within breakpoints)…that is, prior to using Flexbox. They worked, but the way it’s handled by Flexbox is much nicer and feels much more intuitive.

Flexbox Ordering

This is a super simple example, but here you can see rather than display these blocks in numerical order, we’ve put block #3 into the first position by using the order property.

Have you ever gotten mockup where perhaps the desktop view had four columns across in the footer section of a site and then when you look at the mobile version they’re completely re-ordered? This makes that a much easier task now by simply adding the order property. The lower the number, the higher priority on the item.

Flexbox Shorthand

For parent containers, the flex direction and flex wrap properties can be written our individually, or you can use the shorthand version, which is flex flow:

Flex grow, flex shrink, and flex basis (additional flex item properties) can be written out individually or simply combine all three items in the flex property on child items to make it a little more succinct.

Also, it’s good to note here: The float, clear, and vertical-align properties have no effect on flex items.

// Flex-flow combines flex-direction and flex-wrap properties
// Default values are:
flex-flow: row nowrap;

// Flex combines flex-grow, flex-shrink, and flex-basis
// Default values are:
flex: 0 1 auto;

// *important to note for older browser support you'll 
//  want to add a unit value to the flex basis portion

//** https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored

Flexbox Vertical Centering

Vertical centering text has always been a bit of pain point for front-end developers. It seems like every time the amount of variables that can vary make the solution vary, and sadly, vertical-align middle doesn’t always seem to work as intended. With Flexbox, you can wipe away the tears from vertical centering not working out just as you intended because the solution has been simplified.

This is a great example from Philip Walton’s Solved by Flexbox site; with just a couple lines of CSS, the magic happens within the parent container (flex-container).

Flexbox Troubleshooting

This is just a little overview and highlighting some of the positives that come along with Flexbox (and there are certainly more), but along with all the positives, there are definitely some hurdles at times, common issues and things to keep in mind.

The first resource I want to point out is also from Philip Walton; it’s a good list of notes, bugs, and workarounds. If you find yourself struggling to get something working as expected (or how you thought it would when checking your work while cross browser testing), this is a community curated list that should be pretty up to date, and will help you figure out what you need to do next.

Flexbox Tips

While browser support has come along way, I don’t recommend using Flexbox without autoprefixer. This will handle vendor prefixing and support legacy browsers you may have to support. To my knowledge, it doesn’t hurt to have this in place generally speaking, with or without Flexbox in use, so if you’re not using it, definitely check it out.

In addition to using autoprefixer and referencing the flexbugs Github page, one thing to keep in mind if you don’t want to be constantly referring back to other places that I found helpful was often related to the flex-basis property. Whether on it’s own or part of the shorthand form when issues arise in older version of IE(10/11), I found adjusting this was the most commonly fix on the flex item.

Although this last point may seem obvious given the name “Flexbox,” it’s important to note that while pixel perfect layouts are certainly doable with Flexbox, it can be a bit of a challenge at times at least when getting started–especially if you have very specific layouts to work from a mobile up to desktop view. Once you get the hang of things, it’s actually not too bad, but it’s something to keep in mind again when getting started.

Additional Resources

Below is a collection of additional resources not already highlighted in this post if you want to dig in deeper. Some of the games are good if this is your first foray with Flexbox. Practice a little! I highly recommend taking a look at some of these resources for additional notes and tips:

• Sketching with CSS
• Simple Flexbox Layouts
• FleboxFroggy!
• Flexbox Defense
• Flexbox in 5
• Visual Guide to Flexbox
• More Resources

Now and Down the Road

This article is a good resource to checkout and highlights some things to think about both now and moving ahead. As with most Front-End Developer technologies, things are always changing and evolving as the web moves forward.

Have any tips you’d like to share?

Are you currently working with Flexbox? Do you have any tips, tricks, or speed bumps you’ve run into that you found helpful when working with Flexbox? If so, we’d love to hear them in the comments! If you have any recommendation or things you’d like to see in the next Flexbox post, let us know and we’ll try and cover that too.

The post Getting Started with Flexbox: First Impressions, Tips, & Tricks appeared first on WebDevStudios.

Step #1: Understand the Value Proposition.

It’s critical that you understand value proposition and the competitive context of what ever you are trying to sell. For this exercise, I will be creating a Landing page for CMB2, a popular WordPress plugin created by the rockstars here at WebDevStudios. The purpose of the following steps is to create what we’ll call blocks from a hero, features, and a call to action. We want to communicate the value prop by displaying distinguishing features, and have a call to action linked to the download in the WordPress repo and Github repo.

Step #2: Start with Sketches.

My recommendation is to always sketch out your ideas. If you’re too busy to sketch, then you’re too busy to get it right. Many designers go straight into Illustrator or Photoshop. While that may still produce an acceptable result, don’t kid yourself–going straight for the mouse is not the most effective way to get to a design solution. You must discover the solution and that takes research driven by sketching; you must thoughtfully go through the value prop and encapsulate what you believe will get users converting. You need a broad set of ideas to choose from. You can get those ideas quicker by sketching them.

Need more convincing? Think about it from the perspective of different industries. Sketching is a requirement in architecture, print design, industrial design, film, animation, photography, and alike, because this form of creative processing and brainstorming is known for being effective at laying groundwork for the end result. Throw on some solid tunes, grab your pencil or pen and start sketching. Make these sketches exploratory and loose.

Here are my sketches starting with the hero and ending with the hook:

Step #3: Have some Photoshop manners, will ya!

The next step is implementing some of these blocks in Photoshop. Make sure to use smart objects when needed. As well, anything that is a vector will eventually be an SVG so make sure to prep that as smart objects that connect to illustrator. Time is of the essence, but that doesn’t mean work should ever be sloppy. Assume others will review your PSDs, so etiquette is a must. Name your layers and group stuff in folders, etc.

We are going to use 320 pixels as our baseline number. To create the different sizes (width) of the blocks, we will be using 320px as a multiple. For example, 1280 / 4 = 320, which means the hero will be 1280 x 960. I created a document and called it “hero.” Let’s set up a twelve column, 960 grid. Give twenty pixels of gutter.

The hero will have a main message “Hello, I am CMB2,” and secondary supporting copy. We’ll use what’s already in the repo as the supporting copy, which is “CMB2 is a metabox, custom fields, and forms library for WordPress that will blow your mind.” Also, I was thinking about creating a droid character called CMB2 as an homage to R2D2 of Star Wars fame.

In total, we are going to create four blocks. I am creating a hero, download stats, features, and the call to action. Take your time on the hero. While all blocks are critical, the hero starts it all–and is the very first impression you make on a visitor.

Step #4: Connect the PSD dots the right way.

I created a new Photoshop document called “CMB2-lander.” I made this document 1600 pixels wide and a to-be-determined height depending on the sum of all blocks. You will be placing linked blocks in this page–smart objects only, please! Label your layers–always. This is where your header and footer smart objects will go. Here’s all the blocks, in context, in the comp:

Step #5: Design what you can build.

If you are the unicorn I know you are, you design like a boss and can build it yourself. But, before we go further, it’s important to make sure that you can, in fact, build what you design. Don’t go rogue and design something that you (or someone else) can’t create. That doesn’t mean play it safe; that means know your craft well enough create things that can be executed. It will force you to level up–both by upping your awareness and expanding your skill set.

Here’s my toolset.

The tools I use to build a website are a pencil, a pad, Terminal, Sublime, MAMP Pro, SourceTree, using a starter theme like WD_S, and, finally, life. Day to day life is the most inspirational place I know, and I tap into it for ideas more than anything else. Look up at the sky. Look at the stars…we are surrounded by things both good and bad–by things that are empty and full of wonder. Tap into your creative center and design something wonderful, even if it is just a landing page. If you do it right, it’s not just a landing page; it’s art.

Pay attention grasshopper!

“Don’t concentrate on the finger or you will miss all that heavenly glory!”

Creating a product landing page can be easy when you have a system that you go back to–over and over again. Just like a corporation or small business, systems are critical. Over time, I came to understand that value drives visuals in the most successful landing pages. A landing page’s beauty is purposeful and there is no dissonance between message and design. This isn’t about design just for the sake of design! You’re telling a story by tapping into your skill and your surroundings. This is about knowing your craft in order to stimulate the behavior you want from users–conversion.

May your users convert the heck out of your next beautiful landing page!

A quick note from your resident editor: This post was created and written by Simon before he moved on to greener pastures, but it was so good we still wanted to share it. That said, please take a moment to follow Simon @SimonWebDesign and check out his website. He’s an incredible designer and colleague, and if you like this post, you’ll probably like his other work too. 

The post 5 Steps to Creating a Better Landing Page appeared first on WebDevStudios.

There were some caveats though…browser support was just okay. To make @font-face work across Chrome, Safari, Firefox, IE, and mobile, you had to enqueue a bunch of different font file types…then do things like, “Bulletproof the @font-face syntax.” All of this introduced a bunch of extra HTTP requests and overhead.

Soon after, Google Fonts and TypeKit came along. Developers once again rejoiced because these services made it super easy to use custom fonts; without all the “@font-face overhead”. Those services are still relevant today, and a GREAT way to serve custom fonts. But…

…what if a client needs a custom font not listed on Google Fonts or Typekit?

In 2010, developers would have needed to enqueue five different fonts files, e.g.;.eot, .svg, .ttf, .woff, and maybe .otf.

In 2016, I will show you how to enqueue–and use–a single font file type: the .woff.

Introduction

For this demonstration, I’ll be using Fenton. It’s a free font from Fatih Güneş, licensed under CC v4.0. Which means I’m free to use however I want (as long as I give reference). This is important, because not all fonts are licensed this way! Make sure that fonts ARE ALLOWED to be used on the web!

Here are all the available Fenton fonts:

For the rest of this demonstration, I’ll be using Fenton Light, Regular, and Bold.

Generate Web Fonts

Font Squirrel is the go to @font-face generator. It can take any (normal) desktop font file, and convert it to a web ready “@font-face” font.

Generally, I just select “optimal” and let Font Squirrel do its thing. Font Squirrel will give us those five familiar font file types: .eot, .svg, .ttf, .woff, and the new .woff2

Define Browser Requirements

Now that we have our web-friendly fonts, what are the browser requirements? For this demonstration, we only need to support IE9+. Let’s look at the browser support for each font file type:

Source: caniuse.com

By this logic alone, you can see that the .woff file type will work in all browsers, including IE 9.

Note: Opera Mini doesn’t support @font-face. Like, at all. So make sure you declare a backup font like “sans-serif” or “serif” in your font stack!

woff vs woff2

According to the W3C, .woff is the “Web Open Font Format” and as you can see from the graphic above, has excellent browser support. According to Wikipedia, .woff2 has a “30% reduction in file size…” In other words, .woff2 has better compression, but according to caniuse.com, browsers like IE  11 wont and Safari only supports it on El Capitan and above.

All this aside, you will be just fine using .woff!

Enqueue The Custom Font

Now it’s time to enqueue our fonts. Let’s take a cue from Google; this is how they enqueue Open Sans:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

They’re declaring a font-family, the style, the weight, and specifying the source. But what’s really going on?

Basically, the @font-face declaration is looking for the font on the user’s computer first. If it’s not there, it will download that font. What about the “different spelling thing?” Let’s look at how FontBook displays Fenton:

Notice how it’s “Fenton Regular.” Sometimes this might read, “Fenton-Regular” or “fentonregular.” By checking for different variations in spelling, we’re just covering all the bases. Moving on…

Awesome, we’ve knocked our custom font down to only three HTTP requests, once for each variation. Furthermore, if the user already has this font installed, then there won’t be any extra HTTP requests! Boom!

Finally, Using A Custom Font

Let’s move each font with the .woff file extension into our theme:

/cool-theme
  /assets
    /fonts
      fenton-bold-webfont.woff
      fenton-light-webfont.woff
      fenton-regular-webfont.woff
style.css

Then in style.css, we’ll declare our @font-face:

// Fenton Light - 300
@font-face {
 font-family: 'Fenton';
 font-style: normal;
 font-weight: 300;
 src: local('Fenton Light'), local('Fenton-Light'), url(assets/fonts/fenton-light-webfont.woff) format('woff');
}

// Fenton Regular - 400
@font-face {
 font-family: 'Fenton';
 font-style: normal;
 font-weight: 400;
 src: local('Fenton Regular'), local('Fenton-Regular'), url(assets/fonts/fenton-regular-webfont.woff) format('woff');
}

// Fenton Bold - 700
@font-face {
 font-family: 'Fenton';
 font-style: normal;
 font-weight: 700;
 src: local('Fenton Bold'), local('Fenton-Bold'), url(assets/fonts/fenton-bold-webfont.woff) format('woff');
}

Now, we can actually start using our font:

body {
  font-family: Fenton, sans-serif;   // Try to load Fenton, if all else fails, load the operating systems default sans-serif font.
  font-weight: 400;   // This will load "Fenton Regular".
}

h1 {
  font-weight: 700;   // This will load "Fenton Bold".
}

p {
  font-weight: 300;   // This will load "Fenton Light"
}

By declaring the font-weight, we’re telling the browser to use a different font. That’s it!

No need to mess with font stacks! What’s better is, no more “bulletproofing” or expensive HTTP requests.

Conclusion

I’ve shown you an updated way to work with custom fonts. If you don’t need to support IE8 or older Android browsers, this method will speed up your website by reducing HTTP requests and serving an optimized font file (.woff).

If you’ve got any tips or tricks to expand on this, please leave a comment below.

The post CSS @font-face: 2016 Edition appeared first on WebDevStudios.

I’ve known for awhile that I wanted to make Sketch3 part of my toolkit, but also that I will have to deliver PSDs for the foreseeable future. Creating a Sketch file concurrently with a PSD makes me hunch my shoulders in despair – I hate duplicating work (who doesn’t?). And I don’t really have a lot of time to spend on training myself on yet another product (who does?). Yet here are a few ways I’ve found that Sketch makes my life easier while also saving me time when I’m working with Photoshop.

START WITH PLUGINS

When I first tried Sketch I was dubious about using another vector program when I already had Illustrator available. Thanks to the work of designers before me, I quickly learned that the power of Sketch lies in its extensibility, and through the magic of plugins I created my own Sketch3 app that works the way I need it to – and is much more than a vector drawing app.

The master list of Sketch3 plugins available on GitHub.

The thing I like best about Sketch is that it doesn’t get in my way when I want to…sketch. Part of why I have clung to Photoshop for so long instead of moving to Illustrator or using another vector program for my interface sketches is that I have a lot of muscle memory invested in that old clunky PS interface and when I want to jot an idea down quickly, I do it in a random PSD file. It’s a bad habit, but it’s still a habit, and I wanted Sketch to replace it.

Now when I have an idea, I can draw shapes that pre-fill with random images. I can create a style guide artboard for typography and color palettes. I can export my color palettes and typography styles as Sass variables that plug right into my theme stylesheets. I can import text data from an existing WordPress-based site using JSON (so handy for redesigns!). I can group symbols so that editing one button modifies all of them, and I can create buttons that dynamically resize based on the amount of text they contain.

This has the power of turning my quick sketches into living designs that I can use as the foundation for a web or app interface project.

CREATE IN SKETCH, ASSEMBLE IN PHOTOSHOP

Sketch can export layers to EPS or SVG format, and Photoshop can link to EPS files as Smart Objects, so when I’m sketching, I try to think in terms of creating objects in Sketch that I can link to as Smart Objects in Photoshop.

If I’m drawing shapes and icons, I export SVG versions for immediate use in a theme, and export EPS versions for immediate use in a PSD.

My Sketch files look pretty close to the final Photoshop version, and the only work I duplicate is copy/pasting text from Sketch into editable Photoshop layers, using my Sketch style guide to quickly set up text styles in PS. I create icons, buttons, and gradients in Sketch and export them for final layout and alignment in Photoshop.

CHANGE YOUR THINKING

Instead of opening up Sketch with the goal of creating a final deliverable design, I use Sketch as my style guide creator with an eye toward quickly developing layouts, color palettes, typography styles and symbols that can be used to create a beautiful Photoshop file quickly, with the amazing benefit of having color and typography data immediately available for use in my theme stylesheet. Sketch becomes the glue between my PSD deliverable and the final product, and I’m saving time instead of spending hours in Photoshop creating bitmap data that I have to recreate in a stylesheet later.

If you want to use Sketch (or are already using Sketch!) but are required to deliver designs in PSD format, I hope this glimpse into my workflow helps you tailor Sketch with plugins to be the design tool you’ve always wanted.

The post Integrating Sketch3 Into Your Photoshop Workflow appeared first on WebDevStudios.

Because of a hard launch date, this project had a super short timeline and we decided a smaller team would keep us agile. Jaimie would be our Project Manager, Simon would handle the designs/PSD, Damon would deal with the front-end development, and I oversaw the back-end development, as well as serving as a lead for the project as a whole.

I’d like to share our teams experience through building a new website for a pretty well known client.

Designs

Part of the scope, was a custom design, which featured five different templates. Skype wanted something similar to their current production site, but freshened up a bit for the new product launch. Simon also had brand guidelines and some direction from our point of contact at Skype. I spoke with Simon who told me, “All design research starts with listening. One of the issues Skype had was [that] Skype TX was buried.”

Simon took some time to research the product and find the business value within brand guidelines. This process is called “business proposition.” During the design phase, Simon also had to make the case for a few features.

“Behind good design, there’s a reason for everything. Form follows function since we’re designing not only for the client, but the client’s client…” (AKA the user!)

Thanks to software like Invision, communication between the Simon and the client went smoothly and after a few revisions, both Damon and I had PSDs to work with.

Choosing the theme and plugins

Almost all of our projects include our starter theme, wd_s. This build was no exception! Wd_s enables developers to spin-up a starter themes quickly and develop with modern build tools like Sass and Gulp. We didn’t install too many plugins; we used a select few to manage content via point-and-click, ensure everything had a featured image, rearranging page order, and more. We also used a few custom plugins as well.

The Hero

By far the most complicated part of this build was the Hero.

Take a look at the requirements:

• Every post and page must have a hero
• Use post title, excerpt, and featured image as the content, but can add additional content can be added in a control panel
• By adding additional images/content, the hero turns into carousel
• Each carousel slide can have a modal
• Modal must support oEmbeds
• Customizable headline
• Customizable paragraph
• Support for two different buttons, one of which opens a modal

If your head is spinning, don’t worry. So was mine! After speaking with Chris for a bit, we put together a development roadmap and I got to work. Because this hero had to be on every post and page, we decided to use CMB2 to create repeatable group metaboxes. These would serve as the optional “control panel.”

I also used Slick to power the carousel and custom Javascript and CSS to power the modal.

In the end, I really like how the Hero turned out. Some of the functionality developed here, will make its way into our Hero Widget plugin on Github.

The Footer

While it may not appear to be complicated, the footer was indeed difficult. Microsoft requires footers on all their web properties to be visually similar. We were instructed to “copy” the footer assets, markup, and functionality from production.

This proved to be a bit of a struggle as Damon describes, “They had some toggling in footer that worked on desktop, but didn’t have a great mobile experience. So we updated the code by rewriting the Javascript around the toggling altogether…”

In the end, Damon did a fantastic job creating a footer that works beautifully at any viewport.

Accessibility

Microsoft takes accessibility very seriously, and this was part of scope from the beginning (as well as a general practice here at WebDevStudios). We had to design and develop to meet WCAG 2.0AA standards. As you can imagine, since Microsoft is such a large company, failure to meet these standards could cost them tens of thousands of dollars in fines. Fines aside, making websites accessible for everyone is just the right thing to do.

We put this site through some rigorous testing to ensure things like, the color contrast and HTML markup passed 2.0AA specs using both Total Validator and ContrastChecker.

Data Migration

Ah yes, the final part of this project was moving the content from their proprietary CMS into WordPress. Normally, this would be handled by our migration team using our custom migration plugin. However given that the site only had about fifty posts, and the time necessary to interface our plugin into that CMS, we instead opted to migrate the data by hand. This process went fairly quickly, and in no time we had all of their content in place.

Hosting

We’ve been working with Microsoft and their WordPress properties for a couple years, so we’re familiar with the unique challenges and benefits of running WordPress on Azure.

We introduced Microsoft to WPEngine and provided the technical guidance to get Skype in Media on WPE! It’s pretty cool that this project will be the first web property owned by Microsoft on WPEngine!

Conclusion

Even though this was a custom built site for an enterprise level client, we had a short timeline and a few development hurdles. In the end, it was a fun project. I believe we were able to successfully help rebrand Skype TX, and hopefully this will help them sell a few more pieces of hardware–which at the end of the day, is why we’re here.

The post How We Built Skype in Media on WordPress appeared first on WebDevStudios.

Watch the tone

Don’t use negative or condescending language in your 404 message. You may think you’re being witty, but a user with limited time has just landed on the wrong thing and the last thing they want is your sass.

Don’t blame the user

Messages that try to make it sound like the user made the mistake (even if they did) aren’t helpful to anyone. So instead of messages that make assumptions like “Looks like you spelled something wrong,” try using a more positive and helpful approach, with something like, “Looks like we couldn’t find page–try searching again or contact support.”

Don’t give the user information that doesn’t help them

Not much needs to be said here–server error names and codes don’t help the average user.

What is the average user going to be able to do with that information?

So now that we know what not to do, let’s look at some positive steps we can take towards a better UX for our 404 pages.

Provide more than just a message

Having good tone and a helpful message is a great start, but what about giving the user some options? We can give the user more options and thus more chances of finding what they were looking for. Try including a search box and some links to helpful or popular pages. Also, don’t forget that there’s no reason you can’t make a 404 page look nice, too! Which of these pages do you think users would rather encounter?

Add a little humor (when appropriate)

Adding a dash of humor to a normally frustrating situation can often be enough to encourage the user to stay on your site and give it another try. Be sure to use your best judgement, though; a humorous 404 message is probably not the best idea for a mortuary website.

Track your 404s

If you’re already using some kind of analytics on your site (as you probably should), why not track your 404 pages? If you notice a lot of people coming to it from another page specifically, that can give you an idea that you need to check that page out as there may be a bad link or some other UX hurdle to address on that page.

Those are my tips for sprucing up your 404 pages! Please let me know if you have any tips I didn’t cover by posting in the comments section below, and hey, what are your favorite 404 pages out there? Link us up!

The post Creating Better 404 Pages appeared first on WebDevStudios.