rethink.fm

John Locke is back on Rethink.fm and this time we are talking about SEO and specifically Local SEO, what it is, who needs it and how to approach it. Whether you are just starting with SEO or have been struggling with it, this episode is sure to provide some valuable insight. John was my guest on Episode 1 of Rethink.fm where we talked about developing a content first strategy.

John Locke is an SEO consultant from Sacramento, CA. He helps established businesses rank higher through his agency, Lockedown Design.

Website: Locke Down Design

DIY SEO Courses by Rebecca Gill

In this episode, I’m chatting with Cathi Bosco and Joe Dooley about a large project we did together. We talk about our roles and how we worked together. One of the challenges we tackled was incorporating a flexible animated icon system using SVGs — and what was involved in building that.

Creative Director, Digital Consultant, Web Designer, Artist, Illustrator, Children’s Book Author, trail runner, dog lover & free thinker…

My specialty is creating beautiful and cohesive web presence packages for clients that can convert audiences and present content elegantly (think modern and clean presentation). Our sites are built on The Genesis Framework and they function exceptionally well for a wide range of programs, communities, organizations, and companies.

If you have an unusual challenge – we are all ears… tell us about your project and ideas! We don’t take on each and every proposal that comes along, but if we feel we can add value to your plans or programs, we’ll gladly get you a quote and get to work for you.

I also think CSS transitions and CSS + SVG animations are very effective slightly below the surface. Designed to feed the human reward system. Always leaving the end user ‘in control’ of the navigation but royally rewarded aesthetically. This is for upper-end projects and can also help to differentiate sites from low-end, non-custom work… when done well. We all love this stuff… transitions and animations that are so subtle they beautifully and intriguingly enhance end-user experiences. Along with collaboration, they are key to forward momentum for Genesis developers and designers

Joe Dooley often describes himself as largely driven by analytics and a keen passion for SEO. His Tampa SEO company implements cutting edge practices to boost website conversion and meet his client’s marketing goals. Working as a front-end web developer and leading Developing Designs allows Joe to nurture the business aspirations of his clients as he works with them to advance their marketing platforms in exciting directions leading to success.

Don’t let the name confuse you. This is the comprehensive resource that we used to build our SVG animations for the project mentioned in this episode. Petr Tichy is passionate about front-end development and offers three free introductory courses — React 101, Greensock 101 and ScrollMagic 101 — and when you are ready to take your front-end dev skills to the next level, he has affordable online workshops in React, web animations. High quality video tutorials that show you step by step how to accomplish some very amazing things.

Master front-end development and take your React, GreenSock and ScrollMagic knowledge to the next level.

Check out IHateTomatoes.net today.

Website: C and D Studios

Twitter: Cathi Bosco

Greensock

In this episode, I’m chatting with Bob Dunn of bobwp.com. Bob is a master at producing content and building an audience.

We’re talking about eCommerce, and what’s involved in selling products online. And the conversation doesn’t stop there. Bob shares his experience with podcasting, page builders, managing affiliates, sponsors and more.

So if you are thinking about starting an online business, this episode covers a lot of ground.

With a background in marketing Bob and his wife Judy grew a marketing company into what today is a content marketing machine centered around eCommerce.

“In 2007 I began to dabble in WordPress and by 2008, I knew it was the perfect solution for me and my clients. We dove back into eCommerce a bit more by starting a membership site in 2008 as well, a time before membership sites really were catching on. And obviously, with the technology nowhere at where it is today, it took us a good 9 months to develop the site.”

Today, Bob produces several podcasts and writes a ton of useful content for his growing audience. The rest is history, as they say.

In a nutshell, it’s all about eCommerce with a frosting of WordPress.

Website: bobwp.com

WooCommerce

In this episode, I am chatting with Kim Shivler about Learning Management Systems, what are they and how easy it is to create a membership site of online courses. If you are thinking about selling courses or have clients that want to, this episode is for you.

Speaker, Teacher, Strategist – Kim Shivler, M.Ed. has worked as a writer, instructor, developer and serial entrepreneur for over 20 years. Her business experience includes computer network and database administration, technical training and writing, project management, web development, and work as an aesthetician and spa owner. She also worked for large corporations including Tivoli, an IBM company, where she was part of the worldwide technical sales and marketing team.

Kim learned HTML in 1995 building help files as a UNIX system administrator and opened her first web development company in 1996. Since then, Kim has worked as a business owner and employee in a variety of fields including a few years as part of an IBM worldwide team. Between 2008 and 2012, she worked with a variety of Content Management Systems and ran an online membership site for skin care professionals using Drupal. In 2012, Kim found WordPress and never looked back at any other CMS. She has been creating online courses in WordPress since 2013 and currently combines her background in education, years of business experience, and WordPress experience to teach others how to build online courses, their first WordPress site, and learning platforms.

As a writer, Kim has worked in a variety of fields including software documentation and instruction, manuals for aesthetic and medical devices, and general health articles.

She holds a Bachelor of Arts in English and Master of Education degree in secondary English education from the University of Florida.

This episode is sponsored by LearnDash – WordPress LMS… Made EASY!

Check out LearnDash. Easily transform your WordPress site into a powerful learning management system using LearnDash.

Sell e-learning courses, track user progress, deliver certificates, and much more!

The #1 choice of Fortune 500 companies, major universities, training organizations, and entrepreneurs worldwide for creating (and selling) their online courses.

Discover more at LearnDash.com

Message from Kim: Ready to Learn More about Membership Sites and Online Courses? Thanks for listening to me on the Rethink.fm Podcast. Checkout these special offers for Rethink.fm listeners.

Website: White Glove Web Training

LearnDash – https://www.learndash.com/

Sensei – https://woocommerce.com/products/sensei/

In this episode, I am chatting with Melissa Eggleston about UX, what it is and why it is a crucial component in creating a successful web project. I first met Melissa at WordCamp, Asheville in 2015 and had a chance to visit with her at the happiness bar and see her presentation Website Design with UX in Mind.

Melissa Eggleston is a User Experience Specialist and Content Strategist based in Raleigh / Durham, North Carolina. She helps businesses, non-profits, and universities find, attract, and help their target audiences. She often works for agencies and design/development teams. She’s able to see the big picture while also digging into the details. She’s worked on projects for both tiny tech startups and big organizations such as the Bill & Melinda Gates Foundation.

Melissa’s is the co-author of The Zombie Business Cure – How to refocus your company’s identity for more authentic communication.

Website: Melissa Eggleston

Don’t Make Me Think by Steve Krug

In this episode, I am chatting with Robin Cornett about her journey into plugin development. Robin started as a photographer who built her own website. Since those early days, she has created some very useful plugins, and is a contributor to the Genesis Framework.

Robin’s journey into code started when a friend called her with a problem. Her company website was built with a custom CMS (content management system), and it was very difficult and costly for them to make any changes. She asked if Robin would be willing to help her figure out how to build a WordPress website. The rest is history.

Today, Robin builds websites for nonprofits, bloggers, and small businesses. She is also a plugin developer and has written some very useful plugins both free and premium.

Robin Cornett

Robin’s plugins

Also of note, yes I can confirm, namespacing in PHP was introduced in 5.3.

In this episode, I am chatting with Nick Davis about his own workflow journey and why he started GenesisWP.guide.

Nick’s been building websites for fun and profit since 1997, doing everything from working as one of the first online journalists at the BBC; managing the website of one of the UK’s largest airports; to running a large team of web developers and designers for a publishing company in Dubai.

Since going out on his own and discovering WordPress in 2010, he’s worked as a WordPress developer and consultant helping business owners and agencies launch better websites for their businesses or clients, obsessing about making everything on their websites as easy to manage as possible.

I Am Nick Davis

KnowtheCode.io

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

Jackie

Nick

In this episode, I am chatting with Lee Jackson of AngledCrown all about agency workflows. What’s life like running an agency across the pond? Tune in and find out.

Lee is the founder of Angled Crown, a digital agency in the UK. They primarily build WordPress site and plugins for design agencies.

Lee is also the host of the WPInnovator Podcast – The podcast for designers, we talk agency life, strategy, marketing and WordPress.

This episode of Rethink.fm is sponsored by Beaver Builder. If you are looking to reduce design and development time, Beaver Builder is your answer. It’s the only page builder I recommend and with over 375,000 WordPress websites built with Beaver Builder – you’ll be in great company.

Stop reinventing the wheel. With dozens of gorgeous page templates, you’ll be able to spin up an amazing landing page in minutes.

Looking for a template for your site’s inner pages? Don’t worry, they’ve got you covered there too.

You can even save your own designs as templates and reuse them throughout your site, or export them to use on a different site.

Build your website in minutes, not months!

An now, take Beaver Builder even further. Bridge the Gap Between Pages and Your Theme. Beaver Themer lets you create layouts for archive pages, a template for an entire post type, 404 and search pages, and create parts like headers and footers.

Beaver Builder, Awesome Software, Great Support, and a Helpful Community.

Get all the details at WPBeaverBuilder.com

Finally got some time to try this out. I bought a copy of Beaver Builder for a recent project. I created a gorgeous custom landing page in just a few hours. This is quickly becoming a favorite in my digital toolbox. —Jackie D’Elia

Angled Crown

Ganttify

In this episode, I am chatting with Morten Rand-Hendriksen. As someone who has taken most, if not all his courses on Lynda.com – all I can say is WOW – this is awesome. Let’s get started!

Instructor, educator, speaker at LinkedIn Learning, helping people master WordPress, the web, and online communication.

Since joining forces with Lynda.com (now LinkedIn Learning) in 2010, Morten has 60+ published courses on WordPress, front-end web design and development, and web standards, reaching hundreds of thousands of viewers from all over the world. He also contributes to the web community as a public speaker, author, educator, web developer, and design philosopher.

Or, check out their blog at deliciousbrains.com. (Developers really like it)

This is one of the plugins I renew every year. It speeds up development time. It’s keeps my local and remote database synced during development, keeps my media files synced and is built by a team that I trust. —Jackie D’Elia

(Limited time offer – Coupon expires June 30, 2017)

Morten’s Website

Twentyseventeen

A takeaway worth noting:

You need to learn how to build things without WordPress. WordPress is a tool in your toolkit but it cannot be the tool you stand on when you do all your work. WordPress is literally a content management system that uses PHP, HTML, CSS and Javascript to create front-end content. —Morten Rand-Hendriksen

Jackie

Open PDF transcript in a new window.

Jackie

Morten

Jackie

Morten

Jackie

Morten

Jackie

Morten

Then at the event, they were handing out these little business cards with an activation code from new software that no one had tried before. It was an alpha, so it was very buggy. They said, “This is our new web design and development suite, it’s called Expression. We want you to try it.” Then I took one of the cards. I said, “Sure. I’m starting a new project right now, so I’ll try. I’ll just build the project on this new platform so I can really beta test it for me.” I started doing that and immediately ran into some pretty significant problems because it was an alpha application, so hardly worked at all. I was like, “I should really document what I’m doing here so that they know what I’m doing.”

I made a blog that was called, at the time, just Blog.PinkAndYellow.com because Pink and Yellow is my company. I started just blogging about this Expression Web and Expression Design application. I was literally like, “I try to do this, everything explodes.” The funny part was it was you color pick inside the application. Instead of color picking what’s on the screen, it would color pick based on the screen settings for your computers, it was these random colors. It was very odd. I was documenting all these things and just putting it in blog posts everyday. Then after a while, I started getting a lot of comments back. The comments were very odd because they were super specific.

They were like, “So when you experience the screen picking issue, exactly what are you doing? Where are you screen picking, inside the application or outside the application?” I’m like, “That’s a really specific question from some random person to ask.” I went in and looked at the IP address and then I noticed that almost all the comments on my blog had IP addresses in Redmond which is where the Microsoft headquarters is. I answered back to one of them and I’m like, “Well, maybe you should just call me instead of us having this ridiculous conversation on my blog.”

They called me and then I went down there to just show them what I was doing. That got me … Because of that, I became a official beta tester for Expression Web which was their front end publishing platform. From that, I started writing articles for them about Expression Web in addition to my blog. Then Pearson Publishing contacted the Microsoft team and said, “Hey, we want someone to write a book.” Then they pointed Pearson at me, so then I wrote a book. Then I wrote another book, and then another book. We released four or five editions of that book. Then finally, I made a video tutorial for Pearson under the Inform It Labels.

If you go to Amazon and search for my name, you’ll find all four books. The crazy thing is you can still buy these books even though the software doesn’t exist anymore. I keep getting royalties for it and I’m like, “You really shouldn’t sell this. This is not something …” I don’t think it’s even Pearson, I think Amazon acquired a bunch of these books. They just sit at a warehouse. They will just keep selling them until they’re gone. It literally started with a blog. It’s funny, if you go to my blog at Mor10.com and you go to the first blog post, that’s a blog post about me testing out Microsoft Expression Web.

You can actually read the whole thing, see all these comments back and forth, and see when I realize, “Oh, these are people from the team.” I think I even left a comment at some point going like, “Oh, you’re the actual development team for this software? Maybe we should have a chat.” It’s somewhere in my blog. You can still see it. It was, like I said, totally random. It all stemmed from my blog. Once I started actually writing proper documentation that wasn’t just me ranting about what I was doing in the blog but thinking very carefully about why am I doing these things, how does this actually work, I’ve just realized that this is actually way more interesting to me than building things is understanding why they are done a certain way and then figuring out how to explain it to other people.

Then from that, I went out to do a course. They asked me to do a course on Expression Web. When they asked me, I already knew that Microsoft was going to shelve it. I’m like, “Yeah. We shouldn’t invest any money in this. Just trust me on this. This is not worth your investment. I can’t say why but it will not be worth your investment so we should do something else.” Then they randomly were like, “Well, you seem to know a lot about WordPress. We have a WordPress course that’s outdated. Maybe you should do this because not a lot of people watch these WordPress courses so it’s not a big risk for us to let you do that as a first course.”

Then I recorded the WordPress essential training course. It was released in the second week of October 2010 I think. Then I got a call three weeks later that said that’s the first course to ever earn back its full advance within three weeks or within the first month of release. Since then, it’s always been one of the top two or top three courses on Lynda.com.

Jackie

Morten

Jackie

Morten

You have an idea. You want to somehow convey that idea to other people in a way that they can access and understand whatever method they want to and then they should be able to communicate back to you and using web technologies to facilitate that communication. That’s what I’m interested in. A lot of that is just front-end development. Some of it is communication theory and user experience design.

My field of focus is all of that. It’s not just WordPress. For the last few years, I’ve focused quite heavily on WordPress just to build out our library. Now, I think this year, my split is probably something like 60-40. I do 40% WordPress and 60% other things. I’m doing some big things on Java Script. I’m doing some emerging technologies. There is a bunch of other things happening. I’m shifting focus very much to either the leading edge or just past leading edge mark-ups, ES6, Javascript, HTML, see where things are going, how to use things now before they become the next standard, things like that.

Jackie

Morten

Jackie

You had done a course using social icons for a menu system instead of maybe using a plugin widget or something. I’m just curious what you thought about 2017 theme as a whole. I know you had one course where you actually pulled out some code out of there for navigation menu that you were swapping out from underscores. I’m just curious what your thoughts are on that.

Morten

You can say, “This icon needs a PNG fallback, so I’m going to provide a PNG fallback. And this icon, if it doesn’t display, it doesn’t matter, so I’m not going to make a fallback for it. This icon needs a text fallback so I’m going to create a text fallback for it.” It’s a really well-wired system which solves one of the main concerns that a lot of people have around icons which is what happens if people have old browsers because SVG isn’t fully supported, which is a whole other topic which is really odd.

There are people in our community that are doing great work, that goes well beyond just WordPress because the solution that Sami created can be ported into anything else. As long as it runs PHP, you can use that same solution. You can also rewire the solution to use other languages if you want to. If you were making some front end Java Script, single page application thing, you could actually use the majority of his code and just convert it into Javascript and still use it. For me, that component of 2017 is really well-built and probably the best example of how to use existing technologies to push modern technologies forward. There are some other things in the 2017 theme that I don’t agree with like the inclusion of a video header, which is probably the, pardon my French, but one of the worst things we’re doing on the web right now.

If you go into the track tickets and you go into the chats and everything, you’ll see me very very aggressively trying to convince them not to do it because it’s bad practice. It’s honestly something we shouldn’t do. The argument that was made against it made for adding video headers in was everyone is doing it already. A lot of themes are doing it so we want to show people how to do it. My constant argument against it was simply, “I don’t care if people are doing something that is bad. It’s still bad. But this is still something we shouldn’t do.” There are a myriad of reasons why you shouldn’t have a video header, most importantly, just performance.

My concern is when we do things in WordPress we set a best practice standard. WordPress is big enough that when we make a decision like for instance, switch two SVG Icons, number of switching SVG Icons on 27% of the web. Then all of a sudden, that becomes a thing. When WordPress shifts responsive images, that basically … You can watch the graph of websites using ICG mark-up. It was pretty flat. Then WordPress shifts it and then it eventually had this super sharp line that went up because all of a sudden, it’s being used all the time. Then the browser manufacturers go, “We need to handle this stuff right away.” Right?

When we then jam video headers into WordPress, we’re basically telling people, “Video headers is a good thing to do.” It’s not. It will never be. It’s a bad … It’s blingy. It looks fancy but it goes against accessibility principles. It goes against UX principles. It goes against performance. It’s just a bad idea overall. The good thing is the original implementation of it was scrapped for something that’s far lighter.

YouTube backing was introduced to ensure that people can use an external video service to serve up the videos instead of just hosting them on your self-hosted site — which would be terrible and very foolish to do. Still, it shouldn’t be there. Now, it’s there. Now, it’s built into core so now everyone can do it. It’s an open source project. You can’t win all battles.

Jackie

Morten

Then you have to make a decision, is this something that’s important enough for the experience that I should force it one everyone who visits or should this be something that only loads if the visitor actively engages with it? You’ll see a lot of news websites for instance now. When they embed a YouTube video into their page, you see a screenshot of the YouTube video with a play button. Then you click on the play button and then it loads. Then you get the video container from YouTube. Then you have to click play again. People go, “Why are they doing that?” Well, the reason is if you put a video container from YouTube on your page, you’re downloading the video onto that page the second it loads.

They know that so they’re like, “No. We’re not going to impose on you the download from YouTube because you don’t need to buffer the first 30 seconds of that video unless you’re going to watch it. So we’re going to put a wall in front of it and say you need to interact with that wall to be able to open the video even if it increases the number of clicks necessary.” A video background is the opposite of that. You’re introducing a video component which is a heavy download and a heavy bandwidth component into the experience even though it has no communicative value. If you’re going to do that, you would have to then say, “What is the bandwidth connection of the person who is visiting currently on?” Which we can’t do because there is no system for it yet.

You’d have to ask, “Is the person able to choose whether or not to load this video?” They can’t. Are we going to defer the loading of the video until every other piece of content on the page is loaded so that it doesn’t slow things down? Well, that defeats the purpose of a video header because it needs to be there up the top. There are all these strategic and technical questions that come into play that need to be addressed properly. The team that we’re building 2017 took all these things into consideration and implemented it in a responsible way, that’s fine.

The problem is when we establish a standard like this, hand it over to other people who will not ask all these questions, will just do this without considering the implications of it. Unlike the team that we’re working on, 2017, someone might upload a 50-megabyte video, right, and make it play in the background or make it take over the whole page or force it to play with audio. There is a bunch of problematic things.

Jackie

Morten

Jackie

Some really valid points you made were that most of the people that are making decisions about what we’re going to do next and what we’re going to add to WordPress aren’t necessarily the people that are using WordPress every day. Why you read that article and what do you think this means for WordPress going forward?

Morten

It’s a weird conversation because there is a lot of theory going on. People are proposing or not even theory, there is a lot of hypothesizing going on where people are just throwing out ideas and saying, “Well, I think that most people would use it like that,” or “In my experience, this is how people use it.”

There is no concrete data to refer to. Then some user testing is done but the user testing is typically done internally in the active WordPress contributor community. User testing is announced on the Make Blogs which are only accessed by people who really care about WordPress core development. The people that things are being tested on skewer heavily towards advanced users who are involved in the process of building WordPress itself.

As a result, we don’t really know much about the people who use WordPress every day for things like publishing content because we’re not reaching out to them. We don’t have any way of talking to them. They don’t have any simple way of providing feedback back.

There is no button inside WordPress that says, “Provide Feedback,” right? You see that in a lot of applications. You have a little fly out, your click button and then you go to user voice or whatever. There is no such thing in WordPress. There is no easy way of providing feedback back to WordPress unless you know how the system works. It all came to a head during the conversation about whether or not to remove the underline button in the WYSIWYG editor. There was a proposal to simplify the WYSIWYG editor so all the buttons that are up in the kitchen sink at the top of your editor, which I am 182,000% for because the structure of the WYSIWYG editor made no sense.

For instance, the drop down that gives you hierarchical content order was underneath the kitchen sink so you have to know how to click the button and then know how to use it. That should really be the first item. The WYSIWYG toolbar got scrambled. I mean, moved things around and reorganized. In that process, questions were asked about each individual button which is justifiable to say, “What is this? What does it do? Should it be there? What should we do instead?” In some cases, we looked at a button and said, “Well, this button follows HTML standards so that should be there. This button injects some garbage CSS into the page itself. That should go, right?”

Then there were conversations about what are these buttons doing? We got to this underline button. The argument that came up was underline is too similar to link underline. Therefore, it’s confusing for user experience. To which I responded, “That’s a developer problem? That’s a problem of the theme developer not accounting for underline being different from the link underline?”

While that is the case, it is not because of the underline functionality itself. It’s because of theme developers not accounting for this or not providing best practices. The solution, if that is the issue, the solution is probably to create some packaged style that comes with WordPress that distinctly differentiates it from the regular link underlines. Then theme developers can overwrite that style with their own class. Right?

That would be the way to solve a problem. That’s not really on its own, a reason to remove the button. The response to that was, “Well, no one uses the button.” At which point, I and other people asked, “Based on what data are you saying this?” Then they’re like, “Well, no one used it. I’ve never seen it used.” I kept asking, “Where is the data to support this claim?” Then eventually, you come to this 80-20 rule. Well, 80% of the users need to use this before it’s valid. Otherwise, we shouldn’t have it in core, which ties back to the WordPress philosophy which is it wasn’t designed for 80% of the user base.

The 80-20 rule is a lie because we don’t have data on 80% of the users. We don’t even have data on 1% of the users. We can’t use that as a rule. Yet every single major decision that has been made in WordPress ties to the 80-20 rule and is used by everyone all the time. That’s when I said, “Well, if we’re going to do this, we need data. What we should do is collect anonymized telemetry about how WordPress is being used. Anonymized telemetry literally means track how many times people click on a certain button or whether or not people click on a button at all or how many themes are being installed and how many plugins are installed but not activated, just things like that.

Then build a system that truly anonymizes the information. The information that’s sent from your site doesn’t have any information about your IP address or anything else. It just has the core data about clicking. Then it goes into a system that further anonymizes it so that there is no way for anyone to see that behavior and then tie it to you. It would also include things like preventing the system from collecting actual keyboard input so you can’t store what people are actually writing. You can just see that they are writing something.

I made a huge proposal about how this could be done to fully anonymize it, how to make it opt in rather than opt out, how to secure it so that if people don’t want it, they can jut uninstall the entire feature and then it won’t be sitting inside WordPress core. It will actually be removed from the platform entirely, and how to handle the data when it comes in on the back end. Who should have access to it? Who can decide what to collect? The whole menagerie, just full coverage everywhere because I really think we need data.

It’s irresponsible to not have this data at this point because when we make changes to WordPress, we’re making changes for millions of people, millions, probably 10s or 20 or 30 million people will be directly impacted by any change we make. We can’t make those changes without knowing how those people are using the tools. The proposal was made and got shut down by Matt Mullenweg because his argument was it doesn’t fit in under the current three focus areas which are the editor, REST API, and Customizer, I think.

Jackie

Morten

Until we get sign off from someone higher up that says, “This needs to be done now,” it simply will never happen. That means WordPress development moving forward will distance itself further and further from the real user because the WordPress user base continues to increase. The increase in user base in WordPress is not an increase in people heavily involved in WordPress core development.

It’s an increase in people who use WordPress and will never interface with the WordPress community at large. They will never go to a Word Camp. They’ll never go to WordPress.org for anything other than to download WordPress. They might never go there at all. They will have no interface with the community. We have zero information about them. They are an entirely black box to us. Unless we have telemetry, that data will never be available.

It’s something that needs to be done. I don’t have the time or skills to actually build it. I have talked to a bunch of people who are very interested in building it, but at the same time, are weary of starting the project without sign off from someone higher up because this is a huge project that requires … It can’t be shipped in bits and pieces.

It has to be done right off. It could easily be something you spend a year on and then it just gets shelved in which case, you’ve just wasted your time, right. It’s really tricky and at the same time, extremely important. Come June in Paris, I’m going to make this a conversation topic with a lot of people to make sure that at least people have considered it in a more careful way and not just written it off as this is something that sounds like it’s too much work.

Jackie

Morten

Jackie

Morten

Jackie

You don’t load all of this other code that isn’t even really being used while you’re publishing. You don’t need all of that other stuff loaded up in the dashboard. I’m just wondering, I mean if the goal is to compete with Square Space and other platforms that their goal is to make it easier for people to publish content as well, this seems like this is more of an obstacle than it is making things easier.

Morten

It’s all powered by Javascript. It’s super complicated, the way it works. Whenever I see it, you should just go, “Open the Customizer. Then open your developer tools.” Just look at the HTML mark-up that the Customizer produces for that pane. It’s nuts because there are so many things going on. It’s all being manipulated by a Javascript on the fly. It’s a very fancy piece of technology that’s running there.

I think that the reason why a front-end editing, which is basically what we’re talking about, the idea that you can go into a post or page and edit content is being injected into the Customizer is simply because that is already a path that’s open. I know that what people want is true front-end editing, meaning you open the front page of your site, you go to a post or page. You can just start editing the content right there on the page. There are solutions in existence already that can do that. I’ve built some very simple demos of how to do it. One of them is making its way into Linkedin Library right now. There are ways of doing this.

A lot of the ways of doing this are actually tied to the REST API. The Customizer existed way before the REST API. There is still a reluctance to use the REST API for a lot of things, for various reasons. I believe that much of the reason for trying to push all this editing stuff into the Customizer is simply that it’s an existing modality people are familiar with or the developers are familiar with. They don’t have to build something new. That said, I am firmly in agreement with you that there is a separation of concerns here that needs to be established, which is the Customizer is for customization of the application. That would be the customization of the look and feel of WordPress on the front end.

Whereas content creation and editing is a separate thing altogether. That conversation I’ve been part of. Generally, people just choose to make the umbrella that is customization broader and say that customization includes customizing the content itself. To be fair, there are actual very clear crossovers there. For instance, let’s say you’re setting up a new site. You just downloaded WordPress. You set it up. You installed it. You’re going to start customizing your theme. Then you go, “Well, I want to have these four pages.” Then you go into the Customizer. You start building out your menu. Then you realize, “I don’t have the pages.”

You have to go to the back in the WordPress and create the pages. Then go back to the Customizer. With 2017 and 4.7, a feature was introduced that allows you to create a new page directly from the Customizer so that you can add it into a menu. Then you can go onto the back end and edit it. The next step of that would obviously be you create the page and then you edit the page. Right now, that editing happens in the Customizer pull out menus. Then it updates on the page. Then that confines it to the Customizer space, which justifies the argument that this is still in the Customizer.

Once you move that functionality over into the preview, so you’re not editing the content on the page itself, not in a little panel, the separation of concerns becomes very obvious. At that point, you’re like, “That specific editing functionality should exist on the front end.” Now, you could, in my opinion, do both. You could do it so that you can create content and manage content from the Customizer. That should be an extension of the front end editing capability. You build front end editing first. Then you migrate front end editing into the Customizer to allow people to continue it in the Customizer rather than forcing people to boot up the Customizer to do the front end editing.

That is a philosophical conversation that has to do with literal design philosophy, “What is customization? What does customization encompass? Is content editing part of customization? Is content creation part of customization? Where is the line between customization and just actual content editing? Who should have access to it? Who should not have access to it?” There is a bunch of very interesting conversations around that. Right?

Jackie

Morten

It’s an interesting user experience idea. It has pros and cons. I’m not going to get deep into that. What’s important is part of the conversation that happened around the Gutenberg Editor was this conversation around what happens when you hit the return key on your keyboard as you’re writing content. This was one of those places where I go, “If there was ever a reason if there was ever a proof of why telemetry is necessary, this would be a good example of that proof,” which was a conversation around what happens when you hit the return key.

Where the majority of respondents said, “A Return key creates a line break.” Everyone who has worked with a content editor is just like, “Under no circumstances are you ever allowed to make the content editor in WordPress have returned a line break.” That goes against all standard conventions for content editing. That is only the case in a text editor. The text editor is the only place where hitting the return key just returns you to the next line in all content editors. Microsoft Work or Word Perfect or Office 365 or God knows what, everything, a Return key creates a new paragraph. Shift return creates a line break. This is the standard.

Then you got a ton of push back. People who said, “No, it’s not.” Then we have to actively prove it, literally go into Word and tape ourselves hitting enter just to see how paragraphs are created when they hit enter here. This is not new. This is not something people are making up. This is an industry standard. Then they were like, “What industry? I don’t think so. People can learn.” It’s like, no, no, no. You cannot design WordPress like this. If you ship a content editor in WordPress where enter is a line break, the ramifications will be so disastrous, right, because people would literally just go, “Oh, WordPress is broken now.” Then they would just abandon the platform.

It’s such an arbitrary decision. It just proves that the distance between a lot of the people who contribute to WordPress and the people who actually use WordPress on a day-to-day basis is so long and so vast that there is a complete disconnect about how things work, right. Then when you realize, “Oh my god, these conversations are happening.” Then you wonder, “What other unsaid things are being assumed about how people are using content editors?”

The crazy part is the people who were very adamant about return returning a line break had every reason to be. They’re not crazy people. They’re not stupid. They’re not misinformed. They have every intention of doing the best thing possible for the people who use the application. They simply work in an environment that doesn’t have the return key creating a new paragraph because they don’t create content.

If they do create content, they write it in Markdown where that isn’t the case. Their experience of how WordPress works is fundamentally different from that of other people and because they have no data to cross-correlate their experience, they just don’t know that it’s … When I say don’t know, people go, “Well, that’s ignorance.” It’s not. The world is too complicated. There are too many different people. There are too many different ways of doing things that a single person can’t have full knowledge of everything. You have to actively seek out other people that don’t fit into your particular bubble and then figure out how they do things and then take their disclosure of behavior as a true statement about the world as they see it rather than some misunderstanding of how things work.

Then see how, “Okay, so I know that I do things a certain way. I know other people do things a completely different way. How can we solve the issue for both of them or is one way more prevalent than the other? Should we then make fallbacks for the other one?” That’s where telemetry comes in. This is why telemetry is so important because if we had telemetry, you would very quickly see that the frequency of people hitting return twice to create … It would be astronomically high, right. You would have billions of double clicks on return. Whereas in reality, you don’t because the only place people would do that was if they were trying to make double lines and then it would just collapse on itself and they would stop doing that.

Jackie

Morten

Technically speaking, WordPress works no differently from any other content management system. Your job as a content developer, designer, whatever you are, is to facilitate the communication between your client, WordPress and the person who visits the client’s website. WordPress itself is a box you use as an interface between humans and a database. Your main job is to handle the stuff that happens on the client end. How the data that gets put into the database then gets returned out to the end user, that is where all the work is happening. Now that we have the REST API, you no longer have the bounds of WordPress and what WordPress can do to deal with. Right? The limits that WordPress itself imposed on us as WordPress developers have effectively been removed.

What I mean by that is if you wanted to do something crazy in WordPress, let’s say you wanted to mix content from the WordPress database with content from some other source, you’d have to go into your theme or make a plugin that would hook into the theme. Then you would have to make some sort of PHP functionality that would then take the contents like it was returned from WordPress and the WordPress query. Then you would have to intermix it with content from a different source. Then sort out how that mixing should occur and then display in an HTML document that’s shipped from the server to the browser.

Once you have the REST API, WordPress is just one of those data sources. With the REST API, you don’t have to think in terms of a WordPress theme or WordPress plugins or anything else. You think, “I have an application that I built,” in whatever language you choose. It can be PHP or ASP.net or RUBY or NODE or God knows what. You build that application. The application sends requests to the WordPress REST API and gets that in return. Then you can take that data and co-mingle it with whatever other data you get from any other source.

Smash it together, display it in any way you want. The REST API throws out WordPress essentially. WordPress becomes a tool that you just reference for data. The reason why we don’t want to use it is for the backend because it’s easy. It has a good user interface for people who are managing the content itself. They don’t have to worry about anything. You can configure the REST API to give you the data you want, in the order you want, in the structure you want. Then you just display it however you want.

What I’m doing at Linkedin Learning right now is building a new path for people because up until this point, we’ve been building WordPress content that focuses on WordPress development within WordPress proper. How WordPress itself works, how you extend WordPress with plugins and themes, how you build your own themes and plugins to get it to work the way you want to and how you do things further with it. Now, I’m building another path that says, “Let’s treat WordPress as a REST source.”

Understand how the REST API works meaning how you get the information you want from WordPress through the REST API and how you capture information and format that data. Once you have the REST API information, you then step up to the next step which is to send authenticator request into WordPress for the REST API meaning you can alter the contents of the database from outside WordPress.

You can build a standalone application that lives outside WordPress and then you can say edit the title or edit the content or add a new user or do whatever you want. That data then gets sent through the REST API back into WordPress in a secure way so that it’s still only available to the people with the right authentication level and the right user role. But it’s not happening inside WordPress admin anymore.

Once you have those two pieces, you don’t need to work with WordPress at all. WordPress just becomes a source for your JSON data and it can do whatever you want. That opens up this whole new world of development that the WordPress community has basically been shielded from which is now you can build standalone applications that live either on the web or on mobile devices or pretty much anywhere else you want.

You’re not confined by how the WordPress loop works or how the WordPress meta data works or anything. You could literally use the data in any way you want and mix it in any way you want and display it in any way you want and make whatever requests you think are rational to the REST API. Once you have a good handle on the REST API, you can just learn whatever you want. That means you need to then migrate away from building WordPress themes and plugins into how do I build phone applications or watch applications or audio only applications or whatever it is, or Internet of things. It just opens the world to all these other opportunities.

You very quickly realize that once WordPress is a REST API, the things you can do with it are no different from what you can do with any other REST source. The majority of data sources on the web are REST based. All the things you now learn are applicable to anything else, right. Twitter has a REST API. Amazon has a REST API. Google has a REST API. Everything has a REST API. All that data is now on par with any WordPress site in the world. Where do people want to go? That’s where you want to go.

You need to learn the REST API not as an extension of WordPress but as a portal into a standard REST API. Then you need to learn how to use REST data sources to build resilient web applications. Throw the whole WordPress … Think of it as two different things. WordPress is the source so you learn how to work with that thing. Then you learn front-end different around REST API which is something else that is not connected to WordPress. Then WordPress happens to be one of your sources of information.

Jackie

Morten

Now, you say it’s very basic. This is the funny part. The REST API is basic. That’s the thing. Because once you make a request, you just get a JSON object. The second you understand what a JSON object is, I can give you a simple demo as like, “Here is how you display the title, the featured image, and the content.” Right? Then if you want to display something else, the process is exactly the same. There is no difference. There is nothing complicated here. It’s not like you need to have extra knowledge to understand how to get categories. It’s just in the JSON data. The REST API is very well-built so for every single piece … Every returned item within an object that has further information, so it links to something, the link to that REST route is provided inside the REST response.

If you say, “Give me a post.” In the post, there is an attachment, so an image. Then there is a REST URL route to that attachment post so you can go to the attachment post and get that data and return it back in. Once you understand the communication from WordPress to your application, you can do whatever you want. Then you understand how to add in new endpoints. No, sorry. New routes, and also how to augment the data that comes out of existing routes to make its structure the way you want. Then you can get WordPress to basically cough up anything you desire. Then you can extend it into your custom post types and custom fields of whatever you want.

The next course that is currently in editing and will come out soon is on authentication where I cover different methods for authenticating requests into the REST API. Both cookie authentication that happens inside the REST API itself, sorry, inside the context of WordPress. You’re basically piggy backing off the authentication methods into WordPress and how to use OAF too and a bunch of other authentication methods to send requests from outside WordPress in. That’s coming out. Then the third part of that course is a larger course that looks at how to build a standalone app that does something that WordPress does not do.

Basically, you build the thing on its own that uses the REST API to both send and receive data in an authenticated way to do something totally different that falls outside the scope of anything that you would think of doing with WordPress and simply uses WordPress as a good interface that is secure because you just use WordPress because it’s a secure database. It’s a secure management system. You build something that sits next to WordPress that does a bunch of stuff.

From there, what I hope is that people realize once you understand these pieces and you see how it all sticks together, all these other courses in our library and all this other information on the web in general about how to build pretty much anything you want, become applicable to WordPress because we’re no longer using WordPress. We’re just using the data from WordPress. You don’t really need to know anything about how WordPress works to get that to work.

Having said all that, what I’m seeing in the community now, which is not surprising and makes total sense is a lot of the people that are working with the REST API are still thinking about WordPress inside the context of WordPress. Sorry, they’re thinking about the REST API inside the context of WordPress. They look at how to build REST-based themes which are really cool because you can build these super snappy themes that load content almost immediately, that just have new ways of interacting with them that are very very fancy, right. You’re still confined by how WordPress works. The consequence of that is you often see themes that require you to have specific permalink structures to work or themes that will try to use the permalink that’s returned from WordPress. That would be the human readable permalink that’s set in permalink settings.

Use that to figure out what type of content this is and then provide the correct template based on that, right. That comes from thinking about the REST API as if it’s an extension of how WordPress already works. If instead of doing that, you say, “Forget about all that WordPress stuff. The REST API itself returns to you all this information.” When you request a post, one of the elements, one of the properties inside the object for that post is the permalink generated by WordPress.

Another property inside that post is the type of content you got returned. Another property is the link to the REST route, right. You can use that information if you treat the return from the REST API as an actual proper data point. You can create the same functionality without having to do any kind of weird stuff with forcing WordPress to behave a certain way or trying to use rejects to decipher what the URL is or anything like that.

It all sits there but you have to think about it as this is the primary source of information. It’s not WordPress. It’s not how the theme works. The primary source of information is the JSON object itself. Then everything changes. Then you’re like, “I need to learn proper Javascript because I can build all new things with it.” Not Javascript in the context of WordPress, just Javascript. I need to learn how to build apps for other applications.

I need to maybe extend into other languages that I previously didn’t touch because there are things that you can do in other language that you can’t do with PHP. It just opens the door to all these other things. I can see how if we do this right in our community, we can evolve our community away from just thinking about WordPress as this little box or an island separate from the rest of the world and extend it into just a tool on the web that’s extremely powerful that we use as a data source.

Jackie

People who are considering themselves WordPress developers might want to be rethinking their approach to that and saying they are a developer that’s using WordPress. They’re using the REST API. They’re using a lot of these other tools to create and distribute content, help people do that. I think that’s the message.

Morten

Learning REST APIs in general and how you build things with REST APIs and then coming to WordPress and treating WordPress as the source of REST APIs, you’ll have a huge advantage over old geezers who have been working with WordPress in the confines of PHPs this entire time because if you come at it from the outside in, you’ll see exactly what you can do and how far you can go.

You won’t be limited by the way that WordPress used to be. You won’t be limited by how WordPress themes work or how WordPress plugins work. You’re starting out by saying, “I can do anything I want. Now, I want WordPress to give me that data.” That’s my recommendation if you’re starting out. Start with REST APIs and work your way back into WordPress rather than start with WordPress and work your way out. Now, that means you’re going to go into a much more advanced field than what WordPress is because REST APIs are much more complex than WordPress on its own. But that’s what our industry is now.

You can’t go into the web design industry or the web development industry treating it as an easy thing to do. It is not. It’s extremely complicated. You need to learn all these things that have nothing to do with what you want. You need to dive into performance. You need to dive into house servers, render images.

You need to know all these things that go well beyond development into content strategy and how teams work together and how content is produced and edited and parsed online and how you link into different types of content and then pull that content out. Then change it and then just hand it over to other applications. Think about WordPress just as a tool in your toolkit, just like anything else and you’ll go far with this.

Jackie

Morten

Jackie

Morten

Jackie

Morten

I also write stuff for the … What’s it’s called? The Linkedin Learning blog, which is more general, about learning and the industry. I’m speaking about CSS Grids in the context of WordPress at Word Camp Europe in June. If you happen to be traveling to Europe in June …

Jackie

Morten

Jackie

Morten

There is an article that I’m writing that’s going to come along with it that will be published at an undisclosed location in the near future which is huge. I really want anyone listening here to just throw away everything you know about web layouts and just invest all your time in CSS Grid. I’ll show you how to do it so everyone can actually get it done.

Jackie

Morten

Jackie

Morten

Jackie

Morten

Jackie

Morten

Jackie

Morten

In this episode, I’m chatting with Rachel Andrew – an authority on CSS Grid Layout, the new specification that is redefining how we approach layout for the web. We’ll cover what you need to know to get started with CSS Grid and how this will change the way you think about the web design grid.

Rachel Andrew is a front and back-end web developer, author and speaker. Her books include the recent Get Ready for CSS Grid Layout and she is a regular contributor to a number of publications both on and offline. Rachel is co-founder of the CMS Perch, a Google Developer Expert and an Invited Expert to the CSS Working Group. She writes about business and technology on her own site at rachelandrew.co.uk.

Rachel’s website:  https://rachelandrew.co.uk/

Open PDF version of this transcript in new window

JackieHey everybody. This is Jackie with another episode of Rethink.fm for you. Today, I have a very special guest, Rachel Andrew, who many of you may have heard is an expert in the new CSS Grid and is also a co-founder of Perch, which is a simple CMS application. Hi Rachel.

RachelHi, good to be here.

JackieThanks for joining me. If I’ve left anything out and for anybody who doesn’t know you, if you want to introduce yourself that would be awesome.

RachelSure. Yes, I’m Rachel. I’ve been a web developer for, well, a very long time. I’ve been running my own business since 2001 as a developer and now, as mentioned, what we mainly do is Perch CMS. That’s our product. I’m an Invited Expert to the W3C CSS Working Group, so my interest in CSS and the open web goes back a long way. I’m just back from Tokyo where I was at the CSS Working Group meeting talking about all things CSS. That’s really what I do. It’s mainly Perch, and then quite a bit of speaking and writing about CSS.

JackieStarting off with the CSS Grid, how did you get involved with that and what role have you played?

RachelI just spotted it really. In fact, it all started, I was speaking at a conference and I can’t remember what about. There was workshops as part of the conference. Bert Bos, from the W3C, was doing a workshop in French, my French isn’t great, but he was doing a workshop in French and showing some kind of experimental layout stuff. One of those things was a forerunner to CSS Grid. I saw this and thought, this is something we want. Then I realized that actually there was a spec had come through from Microsoft, and there was this early version of the Grid spec was developed by a team at Microsoft. It was implemented into IE10. I got my hands on that and I started building things and saying, “Yeah. This is a really good thing. This is something we want.”

Really it just started from there, that I was very keen to promote it and to write about it and to get people talking about it, to make sure that it was something that got implemented into other browsers and didn’t just end up being something that … Some sort of IE experiment. That’s really where it all came from is I was just very keen … I’m very aware of the fact that web developers have got quite a lot of power in terms of what ends up in browsers, if we talk and write about it and make some noise. I just wanted to start doing that, to champion this spec that I thought really was interesting and was going to solve a lot of problems.

JackieCSS Grid had its beginnings with Internet Explorer?

RachelThat’s right, yeah.

JackieWow. That is very … It’s not something I would have thought given the history with Internet Explorer.

RachelIt’s surprising. I mean the team now with Edge and really going quite a long way back, there’s been some great stuff coming out of Microsoft and coming out of that team. There are various things that we can only test in IE or Edge. It wasn’t just Grid. For a long time, they were the only people who had any kind of implementation of Grid layout in production browser. Yeah, you maybe surprised. There’s all sorts of stuff that shows up, and they do some great work over there.

JackieWow, okay. How does CSS Flexbox relate to this?

RachelRight. Flexbox is designed for a slightly different thing. The main difference is that Flexbox is for one dimensional layout. That means that you’re laying things out as a row or as a column, but not both at the same time although you can wrap flex items. If you’re working in rows, each row essentially becomes its own flex container, so space distribution. If you try and line things up, it’s only going to happen across that row.

It’s not going to happen in columns as well, which is why if you’ve got an odd number of items on a row, they’re just going to stretch out right across the row. They’re not going to line up. Grid was designed to be two dimensional, which means that you can line things up in rows and columns and also do things like have negative space in your design, because you don’t have to fill every cell on the grid. Whereas Flexbox is just going to fill up all the area.

JackieFor developers and designers that haven’t used either yet, and most likely many of them probably have not used CSS Grid yet but may have started experimenting with Flexbox, what design elements are best solved by each? For somebody who is thinking, okay, where would I want to use Flexbox in a design? Where would I want to take a look at using CSS Grid?

RachelRight. With Flexbox, if you’ve got some things that you just want to, say, space out, navigation is a good example of that. You’ve got a navigation list and you just want there to be equal space between all of the items. You want to let the content control how big it is, and you want some nice bits of space between the items that’s all even, so it all looks nice and tidy. That’s a good Flexbox use case.

With Grid, what you’re doing is you’re defining a grid and then you’re putting the items into that grid. In the case of your navigation, if you had a very long navigation point, what it would get put inside maybe a smaller grid track which might mean it wraps onto two lines, for example. Whereas Flexbox would let that one take as much space as it needed, and then just manage the space distribution. It’s the other way around. Grid works from the outside in. You define a grid, you put stuff into the grid. Whereas Flexbox, you’re working from the content out. You’re saying, “I’ve got some items here. I just want them to manage their space in between each other and stretch out,” or whatever.

JackieOkay. You have a website that you created called GridbyExample.com.

RachelYeah.

JackieYou have some great videos on there, so if anybody’s interested in learning more about CSS Grid and how to implement it, those videos, I found them very helpful. I watched them last month, I think, that was the first time that I’ve actually started to look at it.

RachelYeah. I think actually seeing this stuff, and I’ve also got a whole load of small worked examples that link to CodePens. You can go and fork those and have a play around. It’s a really big spec, but the actual, individual elements of it are quite simple. It’s really just starting with the small parts of the spec and playing around with it and seeing how it works, and then seeing what other things you need to know to solve the problems you’ve got. Yeah, working with small examples rather than trying to learn the whole thing at once is definitely the way to go.

JackieHow does this fit in with frameworks like Bootstrap and Foundation and transitioning from using those for your grid to using something like CSS Grid as browser support fills all out?

RachelI think the first thing really is that there’s a real mindset change between using a framework or, in fact, even using your own framework that you’ve developed, that maybe a float based kind of framework, and then using Grid. Everything that comes before Grid, you have to target the item itself. You have to say, “Right. This block is going to take up five columns,” in this grid that you’ve imagined. You don’t actually have a grid with previous layout methods. You’re faking that by adding rules to items in the design to say, “The grid is this big. A grid column is this big and you take up five of them. I’m going to give you a width that is the amount that five columns would be.”

Whereas with Grid, you define a grid and you don’t have to define anything on the item at all or you might just say how many it’s going to span. You don’t put any widths on the item, because that’s managed by the grid track itself and the sizing applied to the grid. I think there’s quite a shift in thinking, to start with, to get away from thinking, I need to be targeting the item in my layout and saying, “How big are you?” When actually with Grid, you’re saying, “Well here’s a space. The item’s going to go in it and it’s going to be as big as that space.”

JackieThat seems like it would make it much easier to work with responsive designs and getting things to adjust automatically without having to specifically go in and change widths.

RachelYeah, exactly. Because you can do it all on the container, so if something … If a track is a certain size at your wider layout, well it can be much smaller at your narrow one without you having to go and fiddle around with the item itself. It certainly makes it a lot easier to redefine at different break points and to redefine parts of your design based on different break points.

JackieHow do you think it might help with UX for design components? Is there any difference there?

RachelI think, I mean it certainly works very nicely with a pattern based and a component based approach, because you can look at each of these things, each thing in your design might be a small grid essentially. You’ve got different design elements that fit nicely into a little grid. I mean we’ve been using Fractal as a pattern library for our own stuff. I mean that’s working with Flexbox at the moment mainly for the Perch UI.

We find that these modern techniques are much easier to work in this component based way, because you don’t have to worry about the whole thing. You’re not having to try and manage this grid structure which doesn’t even exist, which is what you’re doing when you’re using float based layouts or whatever. I think there’s lots of ways in which this can work quite nicely with that kind of component based, pattern library based approach which is becoming very popular.

JackieOne of the things I heard you mention on a recent podcast you were on, WP-Tonic, was just talking about how designers and developers can experiment with designs on their own sites specifically, and how things have changed over time with a lot of social media outlets and ways to publish content where we may not have an active playground that we use all the time for experimenting with design. I’m asking this because when I first watched a video about CSS Grid last year on a course I saw on lynda.com, I was thinking, okay well there’s really no browser support for this yet.

It’s not something that I need to have on my radar right at the moment, because it’s not going to help me solve any of the current projects that I was working on. I really liked what you had talked about is having a playground to work that may not work in all scenarios, in that it’s perfectly fine to build something out as a playground test site and start experimenting with new ways to design things. It seems like CSS Grid is a perfect opportunity to break the mold and try new things and experiment with layouts. I think it’s really good to encourage people to do that.

RachelYeah, absolutely. I think, at some point, the web got very grown up and professional and we’re just doing our jobs. Perhaps we lost a little bit of the playfulness that we certainly had in the early days because it was all new. There wasn’t really a right or a wrong way to do anything. We were just trying to do things and try and see what we could actually achieve with very, very limited technology. Now, we’ve got so many opportunities just within CSS. Even if you don’t even think about JavaScript and all the other things that you could be doing, just within CSS, we’ve got so much opportunity to do interesting things. It’s such a shame if everyone just replicates Bootstrap, you know?

I think on your own site, on your own project, you get the chance to do that. I’ve been encouraging people to look at things like look at magazine design. Say, “Well can I reproduce this?” It’s not necessarily ideal for the web. It’s not necessarily something you’re going to put onto the next client project. It teaches you how to look at things in a different way and say, “Well can we actually build this with our new technology? Would we want to? How do we make it into a web design that has a bit of the feel of this magazine layout?” That’s all quite interesting.

JackieI think that’s very helpful because it seems like most of the website designs are pretty basic in how we lay them out now. I mean typically you have a logo, you have a menu at the top. You have a hero image, you have some content blocks and a footer and that’s pretty much the layout that you’re going to go with. It doesn’t leave a lot of room for creativity other than maybe doing some animations and, like you said, things in JavaScript that can change your layout and how it works. I don’t think it goes far enough to really open it up and to start experimenting with new ways to do things on design. Some may work, some may not but it is really nice to encourage people to try new things and to have a place to do that.

RachelYeah, because we have the opportunity to do so. There’s so much stuff that we could be using. It doesn’t need to be in huge waves, you know? You can add little bits of delight and interest of designs using, say, something like CSS Shapes, for example. Wrapping text around things that aren’t square. It’s something we’ve wanted for a very long time and now we’ve got it, and very few people are using it. Part of that is because it’s not supported in all browsers. You can use this stuff for little touches and let it fall back for the browsers. That’s okay. Yeah, it’s just playing with this stuff and just seeing what there is there.

JackieThat’s a really good point about just embracing progressive enhancements and getting out of the mindset that it has to look the same in every browser.

RachelYeah.

JackieI think many of us struggle with okay, I need to find the common denominator that will work in all browsers for a design, and don’t really want to add any other elements in that may not work in some browsers. Typically many of us have struggled with supporting Internet Explorer layouts and even in Edge, with some CSS animations and things like that. I think thinking about it in a different way that yeah, it doesn’t have to look the same on every browser as long as it’s usable and it meets the needs of the person visiting the site.

RachelYeah. Look at the actual browsers that you’re having to support and how many people are using them. Base this stuff around your own requirements and the sort of people that are coming to your site. Don’t just assume oh well, this isn’t going to work very well in IE9 or IE10. How many people are actually using that browser on your site? Could you be creating a far better experience for the 90% of people, and just allowing it to be slightly less designed for a smaller number. Every site’s going to be different. Certainly on your own stuff, you really should be able to play and not worry too much if the design looks pretty plain perhaps in older browsers. You need to have these places because if you don’t experiment, you don’t learn how to use these things. You don’t learn where the edges are.

JackieThe current browser support for CSS Grid right now … And I think it was just February or March where the current versions of Chrome and Firefox and Safari supports CSS Grid?

RachelThat’s right. It was March, yeah. All of those browsers got CSS Grid pretty much at the same time, within weeks of each other. That’s never really happened before. This shows how much browser vendors care about interoperability these days. They want us to have all of the stuff in all of the browsers and be able to use it. Obviously each browser has a business behind it. They have things which they believe are more important than another thing that fits into the where they’re going as a business.

Generally, they do not want to leave us with something that’s broken in one browser over another particularly. They’d generally rather not implement something at all than give you something broken, because it’s easier to check if something isn’t supported than look for buggy support. Generally, there’s a lot of effort to make browsers interoperable and to make so if you can do something in one browser, it’s going to work in the same way in another. That’s something people do care about.

JackieHow do standards evolve and then get adopted by browser manufacturers? How does that work?

RachelIt happens in all different kinds of ways. Sometimes things come from a browser vendor themselves. For instance, Grid, it really started life in Microsoft. The first edits to that spec were from Microsoft. There’s still one spec editor who is from Microsoft, and then there’s someone who is an Invited Expert and then someone from Google and editors of that spec. A lot of stuff will come from a browser vendor themselves. Other people too, so the Shapes spec came from Adobe. Also then some stuff is just developed by the CSS Working Group because it solves problems, you know?

We can see that developers are trying to do a certain thing, and so there needs to be a CSS spec that does that thing. It’ll actually just come out of the CSS Working Group itself. A lot of stuff actually starts life with either a browser vendor or there’s an awful lot of people using CSS who are essentially in the print world. An awful lot of books these days are printed using CSS. There are very specific user agents that basically create print and PDF documents out of CSS and HTML. Things come from those areas as well but yeah.

Then it all ends up in the CSS Working Group and is worked on to try and make something that doesn’t just solve the specific problem that maybe the person who first thought up this spec was trying to solve, but solves some general problems. You can see that evolution, if you look at the Grid spec as went into IE and what we’ve got now, you can see this evolution and how the set of problems it was trying to solve has been extended and improved and considering lots of different areas before it’s been shipped.

JackieOkay. One question I did want to ask you was adaptive versus responsive design and the ability to reorder content now seems to be much easier. Even in Flexbox as well, you have that ability to reorder content. How can that help somebody create some really interesting adaptive designs that change based on the device that it’s being viewed on?

RachelRight. This ability to reorder stuff, we have that in Flexbox. We have it a lot in Grid. You can quite literally move anything around and put it into any area of the grid you want. You still really do need to take a great deal of care, because it’s very, very easy if you start reordering content to make something inaccessible particularly for, say, someone who is keyboard navigating. If you’re tabbing around, if you’ve moved an item that is in the DOM, at the top of the DOM and you move that down to the bottom, then what happens to their order as they try and move around the document? Both specs say that you shouldn’t reorder the visual display over the source. You need to take great care if you start reordering at different break points, because you can quite easily make it very difficult to use the site which is not what you want to do.

JackieThat would be containers that maybe have elements in there that require some interactivity?

RachelYes, yeah.

JackieWith a user, right? If you just had a layout that just had images or just blog content to read, would that also affect your accessibility if you reordered that? If they were tabbing through?

RachelNot necessarily. I think what you’ve got to do is take each of these cases as an individual thing and test it and say, “Well how does this behave?” I think there’s so many conversations to be had around that. Essentially browsers will follow the source order. It’s really, really important that you keep your source in a logical, sensible order rather than thinking, oh now I can use Grid just to move things around. Keep your source logical because that’s going to be the order that the browser follows for anyone who is tabbing around or is using if that’s being read out, for instance. Then that’s going to follow the source and not the visual display. You just need to be careful not to disconnect the two completely if it matters what order things are in.

JackieOkay. What browser do you use for your development? What’s your favorite browser?

RachelI use Firefox a lot for Grid work, because they’ve got a Grid inspector and no other browser has. I often use Firefox. I use Chrome a fair bit, but I’m fairly agnostic to be honest. I tend to switch around which one I’m using. As I say, I’m using Firefox a lot just because they ship the Grid inspector and it’s really good. If you’re playing around with Grid, just the dev tools in Firefox has, if you select a grid container, so the thing you’ve said display grid on, and you open your dev tools, there’s a little icon that looks like a little waffle. If you click the little waffle, you can see all your grid column tracks so you can actually see where the grid is on your page and on your element, which is really useful. That’s definitely … If you’re using Grid, I would certainly be using Firefox just for the case of having those dev tools.

JackieAny tools you can recommend for cross-browser testing when you’re developing?

RachelI think really it’s a case of getting your hands on as many browsers as you can. I mean that’s … So if you’re on a Mac, I’m sure a lot of people are on Macs, the biggest thing is not having access then to Internet Explorer and Edge. You can get those in VMs from the Microsoft site. You can download virtual machines that have all different versions of IE and things installed. If you don’t want to install a bunch of VMs, then BrowserStack is a good place. That’s like an online site you can have a subscription there and log in and test things in different browsers.

For mobile, make sure you are actually testing on real devices, some real devices, not just emulators. How does this feel as much as what it looks like. I always say go out and get the cheapest, nastiest, smallest Android phone you can find, really low powered, and make sure you’re also testing in that as well as the nice iPhone you’ve got on your desk or whatever. An inexpensive, the cheap phone that a lot of people have is a world away from an iPhone or the latest Android device.

JackieVery good advice. The next topic I wanted to ask you about was Perch.

RachelMm-hmm (affirmative).

JackieI don’t know very much about it and I’m curious. I heard you discuss it on the WP-Tonic podcast.

RachelMm-hmm (affirmative).

JackieI know you had a great conversation about open-source versus non and sustainable business models. I’m just wondering if you can just give us some background on Perch and who is an ideal customer for Perch and how you operate it.

RachelYeah. Perch is the product we launched. I mean we launched Perch about eight years ago as a small CMS so really, at the time, as a kind of content editor. The initial idea behind Perch was that you should be able to have a site that you’ve built in HTML and CSS, you didn’t have a CMS, and then, of course, one day you’re meeting with a client. The client says, “Oh you know what? I’d really just like to be able to edit the text on the homepage there.” At the time, the only option you’d really have would be to rebuild your site into WordPress or something that would essentially mean you had to rebuild the whole thing, make a theme, take it away from being the site that was really just HTML pages.

The original version of Perch was like a drop-in CMS, the idea being you could just install Perch, stick a Perch tag on that area on the homepage where you wanted to edit … Where the clients wanted to edit that little bit of content and that would be it. That was all you needed to do. You wouldn’t have to change the whole site into a theme or really take over the whole thing with a CMS. People still use Perch very much in that way, you know? People build sites, static sites, and then just make bits of them editable. There’s an awful lot more that we can do now, and we’ve got a second product called Perch Runway which is for your larger content based sites.

We care a lot about the idea that all of your templates should be completely controllable by you. Essentially if you’re coming from a WordPress world, we’re all custom fields. There’s no concept of having a page that has to have a heading and a big area of text and so on. We’re essentially all custom fields, so you define a template with exactly the fields you want. They load that up and that appears in the admin and that’s what the client fills in with whatever kind of fields you want. That’s really the difference is that we’re very much based around the structured content idea.

JackieHow does open-source versus non-open-source … What’s your view on that? I know WordPress is open-source, so Perch is not, right? You have to pay for a license for each install.

RachelMm-hmm (affirmative).

JackieHow does that work now for the clients that want to use … What’s their advantage to using Perch, say, versus WordPress?

RachelThey have support included the license. They have support via us, the people who actually build it. If you have a Perch license, you can come and we will help you with your site which we do all day in the forum. You’ll see both Drew and myself answering people’s questions and help them out, so support’s a big thing. Having a very opinionated piece of software is useful to people. One of the things with open-source projects is they can become quite … Stretch off in various directions all over the place, because lots of people are contributing to them which can be great.

Also it can mean that things move in directions you weren’t as keen on. People are very much, when they use Perch, buy into the way that we see the world, which is very much to do with the open web platform and standards and structured content and making the product very fast, you know? We will make decisions based on how fast that content’s going to render over developer convenience, for example. We make those decisions all the time. They are things we care about. I think people buy into that. The support’s a big thing. The support for end clients knowing that there is a company behind this, and a company that’s been around for eight years and is making money doing this. It’s not just going to disappear. That’s very important to a lot of end customers.

JackieI saw you can download Perch and try it out locally and experiment with it, which is a great way to see if it would suit a need for either you or for a client that you might have where maybe WordPress wouldn’t be the best option for that.

RachelYeah. I mean that’s it. We have lots of people who use Perch alongside WordPress, who use Perch alongside Drupal. Most people aren’t using a single solution because all projects are different. Unless you’ve really hung your hat on being a WordPress shop or we have people who are essentially Perch shops, they have hundreds of licenses because they just build Perch sites, but most people aren’t doing that. Most people are getting a project and saying, “Well what’s the best tool for this?” It may well be that you get some projects and you think, well actually Perch would be a great fit for that.

That doesn’t mean that the next project’s going to be, oh well actually WordPress is good for this one. We have a lot of conversations with customers based on the fact they know these other solutions too, and they’ll say, “Oh. It seems like this feature would be really useful.” We can have discussions about why maybe we don’t do something that they like from something else. That’s all really interesting too but yeah. Most people are using multiple solutions based on different kinds of projects that they work on.

JackieI know I’m going to download it and play with it in my local development environment, because I’m very curious to see what it is and how it works.

RachelYeah. It’s going to be interesting to hear what you think. As I say, we have a certain way of looking at the world based on where we’ve come from and the sort of things that we think are important. Obviously that matches with some people and not with others, and that’s cool, you know?

JackieI definitely think the speed component is something everybody should be aware of and mindful of when … A lot of themes in WordPress have an awful lot of bloat and create a lot of obstacles for getting the site to render quickly.

RachelYeah.

JackieThat is something to be mindful of.

RachelYeah. I mean that’s something that we’ve … Because you have full control over your front end, we don’t do anything to the front end. We make sure that actually rendering the content into your site is super fast, but then you can do any optimizations you want on your front end code because we’re not going to touch it. That’s very much how we work, because we don’t have this idea of themes. It means people can really optimize their front end as much as they like. We always try and come up with ways. We were supporting things like responsive images very early and try and come up with ways that people can make their sites faster, because we care about it ourselves.

JackieVery good. We’re almost out of time. I just wanted to circle back to CSS Grid and just talk about given the current browser support, which is just the very latest versions on there, how can a designer, a developer, right now start to incorporate CSS Grid into projects? How can they provide backwards compatibility?

RachelOkay. Actually written into the spec is how Grid interacts with other layout methods. It interacts with them very well. What you can actually do is you can, say, have something which is laid out with floats, inline block, or just layout table and then also make it a grid. In an awful lot of cases, as soon as the thing becomes a grid item, all those other behaviors just stop applying. You can take advantage of the cascade and how CSS works to basically provide something for legacy browsers and then, immediately afterwards, provide something for things that support Grid, provide you the layout you really want, and that’ll just work. The things that don’t work, you need to look at feature queries which essentially is like Modernizr, if you’ve ever used it.

It’s like using a media query except instead testing for the size of a screen, what you’re doing is you’re testing for support of a property. You can basically say @support, display grid and then inside that query, write your Grid code. Browsers that don’t know about Grid, they’ll ignore it and anything that goes along with it. Browsers that do will use it. CSS is bringing us ways to do this because it’s always going to happen that there are going to be things not implemented in browsers. Yeah, on my site, I’ve got a cheat sheet of all those ways of overwriting older methods and links to stuff about feature queries and so on.

JackieI guess the first order of business for most of us is going to be to start experimenting with this on a playground site or our own personal site, and then working with these cascading @supports and seeing how these things render. That sounds like that’s a great way then to go and start incorporating some elements of that into client projects.

RachelYeah.

JackieIt doesn’t have to be an entire CSS Grid project. You can incorporate some of the CSS Grid pieces into a project that you’re working on.

RachelI think what’s going to happen is you’re going to start, as you learn the spec and you learn how to use it, you’re going to start seeing stuff in designs you’re trying to implement and say, “That is a perfect case for CSS Grid.” At that point, you can say, “Well can we use this to get the ideal layout, and then what can we do as a fallback?” I think increasingly people are going to start seeing things that can only really be done if you use Grid and doing it, and then working out what the rest of the browsers see. What’s a perfectly acceptable layout, and then use Grid as the enhancement to get the real top of the line design. I think as people get used to having Grid, we’re going to see more designers that take advantage of things that you can only do if you use Grid. We’ll start seeing real use cases for that.

JackieThen that wraps it up for us here. Thank you very much, Rachel, for joining me. If folks want to get a hold of you, visit your example website or contact you to follow up, how can they reach you?

RachelActually I’ve got gridbyexample.com is all my CSS Grid stuff and my personal site, which links to everything, is rachelandrew.co.uk. I am @rachelandrew on Twitter and pretty much everywhere else. You’ll find me, if you follow me on Twitter, you’ll see all the stuff that I do.

JackieThank you very much again for joining me. I’ll see y’all next time.