How we built Skype in Media on WordPress – WebDevStudios.com

Last quarter, we were hired by Skype and tasked with building a smaller site, featuring Skype TX. Skype TX is “studio-grade hardware for the broadcast industry, which features peerless integration with Skype.” In other words, Skype Tx is powerful hardware and software for professionals in live broadcast situations.

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

skype-in-media-showcasePart 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

skype-in-media-hero-single

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.”

Read full post

Source: How we built Skype in Media on WordPress – WebDevStudios.com

Leave a Reply

Your email address will not be published. Required fields are marked *