A Preview of the Gutenberg WordPress Editor


There were two hot topics at WordCamp US in Nashville this past weekend: hot chicken and Gutenberg. Hopefully the former needs no further explanation, but the latter might be new to you.

Gutenberg is the code name for the longest-running feature release that the WordPress team and community has ever worked on. Development on Gutenberg began in January of 2017 and the production-ready release (WordPress 5.0) is targeted for April 2018 (fingers crossed).

While there was plenty of chatter about Gutenberg in the halls of the Music City Convention Center, there were only two talks about the project during WordCamp US. The first was at the end of day one and the second was the closing keynote, State of the Word (given annually by WordPress founding developer Matt Mullenweg) on the final day of the conference. This year’s State of the Word included a demo of Gutenberg.

WYSI-NOT-WYG

Before we get to the future of WordPress, let’s take a step back. Twelve years ago, WordPress released its current WordPress Visual Editor, which was just about when I started working with the software. Unless your site is using a plugin or has been customized, the WordPress visual content editor is a big empty text box with a toolbar that can be used to add/style text and upload/insert media. There are very few options to alter the layout of content unless you know HTML and CSS.

Since the WordPress visual editor was released in 2006, many elegant and user-friendly editors have been released by competitors including Medium, Squarespace, Wix, and Tumblr. And while WordPress currently powers 29.1% of all websites, and has sparked a multi-million dollar industry focused on extending the software through themes, plugins, and services, Gutenberg is WordPress’s attempt at catching up with — and hopefully moving past — the competition.

Content Blocks

In short, Gutenberg is going to fundamentally change the way users assemble and manage content in WordPress. It’s designed to simplify WordPress content, including custom post types, shortcodes, widgets, menus, and more, into one concept: content blocks. Content blocks are like digital legos that you can move and stack on a page to create a variety of layouts that are unachievable within the current WordPress editor. These digital legos can be made up of any type of content — image galleries, text areas, section headers, event listings, video — making the possibilities for page layouts limitless.

Gutenberg

Gutenberg

At Storyware, we’ve been building all of our WordPress sites with our own content block system for the last two years, so the Gutenberg concept is not new to us. However, Gutenberg will provide us with a brand new solution to work from and extend as part of the WordPress core platform, ultimately introducing significant changes to the websites and applications that we will build on top of WordPress in the future.

Not surprisingly, Gutenberg has a lot of developers, small business owners, and companies worried. This was evident after Matt’s talk when he fielded questions from the audience. Change is never easy and we all want to know how the introduction of Gutenberg will affect existing WordPress sites, themes, plugins, and other customizations. The best way to find out is to get involved. Help the WordPress community test Gutenberg: install the Gutenberg plugin and provide feedback. Read the documentation (when it’s available). If you are still not ready for Gutenberg when it’s released, WordPress has already introduced a classic content editor plugin that will override Gutenberg.

While you won’t need to adopt Gutenberg immediately, I wouldn’t recommend waiting. Much like the visual editor has impacted content management within WordPress for the last 12 years, Gutenberg is likely to have the same impact on WordPress for the next 12 years. In fact, its impact may be even greater. With a plan is to extend the block concept to other elements of the page, such as the header, footer, or a sidebar, WordPress may eventually move beyond the modern desktop and mobile viewport, implementing a content block system to manage content and layout within VR applications.

Clearly, the organizers of WordCamp US were saving the best for last with the State of the Word. We left WordCamp US after Matt’s keynote with a lot of optimism about Gutenberg and how Storyware can build upon it to improve the WordPress user experience. There was really only one thing that could top it — a trip to Hattie B’s for some hot chicken.

Watch the 2017 State of the Word

Gutenberg Resources


Originally published at Storyware.

Improving the Web Design Process Through Style Tiles


As a veteran (translation, old man) of the web design business, I can confidently say that one of the most stressful points in any project is when new design concepts are revealed to stakeholders. Back in the old days, web design projects would begin with a kickoff meeting that would focus on gathering design direction from your stakeholders. They would show you some websites they liked and didn’t like. And then the designer would go off and bury her or himself in Photoshop for weeks until the big reveal — all with very little stakeholder interaction. (Note, content was rarely, if ever discussed at these kickoffs, another issue with the old school web design process).

After basically being invisible to our stakeholders for weeks, we would reconnect at the largest and most anticipated meeting of the project to reveal our webpage concepts. While the feedback might be positive (thanks mainly to our talented designers), the list of changes was usually long. Often times, the stakeholders would want to mix the elements between concepts, taking the header from Option A, the footer from Option C, and the typography from Option B to create Option Hell No. Hopefully, this does not describe your current web design process. But if it does, don’t fret. You can change it.

Several years ago, designer (and all-around great person) Samantha Warren created a new web design deliverable, style tiles. Style tiles are intended to show stakeholders specific elements of a web design before any webpage mockups are designed. These elements are typically fonts, colors, and certain interface elements. The purpose is to get feedback sooner, crucially before spending long hours creating a pixel perfect website or application. As Samantha puts it …

Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room.

An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups?

Teachstone Style Tile

Style tile for teachstone.com

We started using style tiles at the beginning of 2015 and it has significantly improved our web design process. Here’s how:

  • Style tiles help form a common visual language with our clients, which is then used throughout the rest of the project.
  • Because they are less time intensive than full website mockups, style tiles enable designers to share their ideas with stakeholders fast.
  • Style tiles can be modified quickly based on stakeholder feedback.
  • Style tiles set clear expectations and eliminate surprises, minimizing the risks and decreasing time associated with the webpage mockup reveal.
  • Last, but not least, style tiles are easy for stakeholders to understand and process.

Tera Think style tile

Style tile for terathink.com

Adding style tiles to your web design process is not entirely without its complications. Here are a few tips we’ve learned along the way:

  1. Style tiles should not be used to define page layout. Leave that to wireframes.
  2. Once a style tile has been approved, it should lead to only one webpage design concept. One of the goals of style tiles is to decrease time spent on webpage mockups. With an approved style tile (coupled ideally with a wireframe), you should be able to put together one solid home page design concept that contains very little surprises.
  3. Stakeholders might like what they see so much that they want to see more. Remember, stakeholders are used to webpage mockups. Remind them that those will be coming, but the scope of style tiles is limited to specific elements.

Style tile for Stop Texts Stop Wrecks

Style tile for stoptextsstopwrecks.org

Once you and your client are fully up to speed with what a style tile offers a project, these issues are easy to avoid, especially when you combine style tiles with other UX deliverables, including wireframes and webpage mockups.

Once this happens, style tiles will help you decrease time, minimize confusion, and clearly set expectations with your stakeholders during the web design process.


Originally published at Storyware.

It’s Tom Tom Week!

It’s the week of Thomas Jefferson’s birthday, which means the Tom Tom Founders Festival is back. Tom Tom is a week-long celebration and collision of music, art, innovation, and food in Charlottesville, Virginia, which is just a few miles from where Jefferson was born in Shadwell, Virginia.

Enough about history though. We are excited about the future, specifically the immediate future. Today is the first day of Tom Tom, and the festival continues through Sunday, April 16th.

There is so much that goes on at Tom Tom: it’s like SXSW before it jumped the shark. In order to get a full picture of everything that’s going on, spend some time on their website in the next day or two. Shameless plug: Storyware designed and built it. In the meantime, here are our can’t miss events:

Future Forum, Wed 4/12 (6–8pm), The Paramount Theater


For anyone passionate about the Future of Charlottesville — its economy, culture, and community — this forum is for you. The region’s most visionary leaders share what they see for the future of the city and how to encourage creativity and entrepreneurship for the decades to come.

RSVP on Facebook


Modern Web Design Using Sketch and InVision, Th 4/13 (4–5 pm), Studio IX


Learn tips and tricks to save time and create better designs with Sketch and InVision. Page Wood and Todd Wickersty from Storyware will walk you through the modern web design process, starting with content and ending with clickable prototypes.

This is a workshop aimed at UI designers or graphic designers who want to work more on the web and mobile.

More Info + Tickets


Founders Summit, 4/13–15, The Paramount Theater


Hear from over fifty inspiring speakers at Innovations in Energy, Innovations in Democracy, all day at the Founders Summit and the keynote workshops.

Use our exclusive code STRYWRE to take $80 off tickets.


Design + Branding Luncheon, Fr 4/14 (12–1:45pm), Commonwealth Restaurant & Skybar


Craig Dubitsky, founder of eos Lip Balm and Hello Products, was such a great speaker at last year’s Tom Tom that he had to be brought back. Join Craig, graphic novelist, Roye Okupe, and Storyware co-founder, Todd Wickersty, over lunch at the Commonwealth Restaurant & Skybar. We will be chatting about the art of delighting (not disrupting) an industry from the friendliest founders and firm believers of beauty in the mundane.

More Info + Tickets


Tech Mixer, Fr 4/14 (5–8pm), Lee Park


Have a beer with Storyware at the Tech Mixer in Lee Park. It’s the perfect way to start your Tom Tom weekend. Meet up with our entire team at our tent, and did I mention beer?

More Info


Originally published at Storyware.

It’s the end of the laptop as I know it (and I feel fine)


About one month ago, I purchased my 4th iPad. The first 3 didn’t go so well. I still own the first 2 (1st Gen iPad and the 1st Gen iPad mini), but they belong to my kids and have for years. About a year ago, I thought I could use an iPad Air for work to go along with my MacBook. That didn’t work out too well either. I stopped using it after a couple weeks. I sold it after a couple months.

Why the hell would I buy another iPad?

One reason and probably the main one is that I’m a sucker for gadgets, specifically Apple devices. I’ve owned at least a half dozen iPhones and Apple TVs over the years. I also own an Apple Watch (at least I waited over 6 months after its release to purchase it). I wanted to try the iPad Pro.

The other reason is I wanted to try to replace my laptop with a tablet. That was never my motivation when purchasing the previous iPads. Regardless, I was fully aware that I could be returning it within the 30 day policy. I was hopeful, but realistic.

Before I dive into the result of my first 30 days, I should explain what I do for a living, which will explain what I use a computer for. I’m the co-owner of the digital and branding company, Storyware, in charge of Sales & Operations. Our team currently consists of 5 people, so we all wear a lot of hats. Occasionally I would roll my sleeves up for some very basic front-end development or use PhotoShop.

During the last 6 months though, my business partner and I decided that I won’t be writing code or pushing pixels around anymore unless it’s an absolute emergency. I need to focus on my day job — selling and running the non-technical side of our business. Thus, I use a lot of communication, documentation, and productivity applications. So when the time came for a new laptop, I decided to take the plunge and buy the 9.7 inch iPad Pro with the Apple keyboard and Pencil.


Now I don’t plan to use the iPad Pro as my only computing device. I still have a Mac, in fact two, but they are rather old machines. I will be using a 2010 Mac mini at the office. It’s getting a new hard drive, which will be nice. I also have a 2010 11 inch MacBook Air at home. However, I am giving it to my kids. I only plan on using it in case of an emergency.

When I purchased the tablet I envisioned using the desktop as my primary device at the office and the iPad Pro as my primary device away from the office. This is no small change. As a small business owner, I used my laptop a lot away from the office — including almost every night.

What has happened though is more than I expected. When given the choice of the desktop or tablet at the office, I prefer the iPad Pro. I do use both at the office, but I expected the tablet would be in the bag in favor of the desktop. Now it’s the first device I boot up each morning. The iPad Pro has become my primary computing device, rather quickly.

Why now though? How is the 4th time a charm?

It’s the keyboard and the pencil, without a doubt. I was very skeptical when I bought the Apple keyboard. In fact, I almost didn’t buy it, but I figured I could return it. The exact opposite has happened. I love it. The iPad Pro keyboard just feels natural to me, which was a surprising development. I made a lot more fat-finger mistakes on my last laptop, a 12 inch MacBook, than I do with the iPad Pro keyboard.

The Apple Pencil definitely lives up to the hype. I was more excited about that purchase than the keyboard and it has not let me down. I have only used it with one app on a regular basis (GoodNotes), but it has been flawless.

So, my 30-day trial has ended and I am fully committed to using the iPad Pro as my primary computing device. It feels different, fun, and odd at the same time. Most of all, it feels powerful. It is the first device that meets my computing and entertainment needs. I like that feeling a lot.


Originally published at Storyware.