What’s Gutenberg?

Gutenberg is the name of the new editor that’s now part of the WordPress core beginning in version 5.0, released in early December 2018. Before, when you created a new page or post, you used what’s now being called the “Classic Editor”, a kind of lightweight word-processor, similar to a bare-bones version of MS Word. It’s been pretty much unchanged for the last decade or so.

Gutenberg, on the other hand, is more than a content field. It’s a being touted as a modern editing experience and will be the foundation for building with WordPress from now on. If you’ve ever used a third-party page builder like Beaver Builder or the Genesis platform, then Gutenberg will look familiar to you because it uses a similar “block” approach for creating.

Gutenberg will be rolled-out in three phases. The first is the inclusion in WordPress 5.0, and that phase focuses on implementing “blocks” for a “content-first” approach. This will clear the way for the next two phases that will go beyond creating “posts” to actual page templates, then finally into full site customization.

The editor will create a new page- and post-building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. — Matt Mullenweg

The Blocks

Blocks, in my opinion, are a welcome addition because they get rid of some of the clunkiness that I hated about WordPress. By that I mean blocks replace much of the need to use other formatting tools such as theme options, meta-boxes, shortcodes, embeds, widgets, post formats, custom post types, and others. Blocks are used to organize and compose content. They allow WordPress to be as functional as ever but without all the hacking and add-ons. It always felt like I was using some sort of Frankenstein approach when I was creating a page, and if you know code and appreciate its purity, you understand what I mean. Creating with WordPress wasn’t a clean way of creating at all. Blocks completely change this and it completely streamlines the user experience. I welcome that.

Blocks actually unify multiple interfaces. This streamlines the whole writing, editing, and publishing experience by way of simplicity. And developers can create their own blocks which means way less piecing together of shortcode, widgets, hacks, and plug-ins. To me, that implies a potentially faster, lightweight site with fewer elements that need updating or that could potentially break your site.

Blocks can be static or dynamic and each one contains configuration settings. They are hierarchical, so they can be a child or a parent to another block. They contain rich formatting tools for composing content instead of using text plus inserted media, embeds and shortcodes (although there IS a shortcode block). With one block you can do what a boatload of plug-ins would do, and I found blocks to be quite intuitive. I like that. Blocks focus on how the content will look without needing to use other configuration options, and this approach means that bloggers and developers can present content in a more engaging, direct, and visual manner.

The new Gutenberg editor is designed specifically for creating content-rich and flexible website designs. Paragraphs, headings, media, and embeds now become the content that’s stored in the WordPress database.

I should tell you at this point that when WordPress announced the coming of Gutenberg, I was not a happy camper. I was angry and I didn’t want to be forced to learn a new way of using WordPress because the current way was difficult enough, what with having to click around so many areas of the dashboard to find where to change this, or modify that and requiring the downloading of widgets and such. We end up literally piecing together a functioning site. It was often confusing and frustrating and it felt like a primitive and hodge-podge way of “developing”. And it felt risky at best. I thought Gutenberg would just add another level of unnecessary complexity and I resented that. I resented what felt like having no say and no choice if I wanted to keep creating sites in WordPress.

So here’s what I did. I decided that the best thing to do, for me, was to see how it worked and so I installed the beta plugin of Gutenberg.

I have to say that using Gutenberg was a little confusing at first, after being so used to the previous editor. Putting no pressure on myself, I just started playing with it on a test-site, to see what it could do. First, I found within a few minutes that it was kind of fun. I should also tell you at this point that I went ahead and installed the Atomic Blocks plug-in and Atomic Blocks theme (atomicblocks.com) to extend Gutenberg’s functionality and it made a big difference to me. Now there were even more cool things I could do with the blocks. Second, within just a few minutes, I had created a pretty nice looking page, designed totally from scratch from a blank page, using only blocks. It seriously would have taken 2-3 times as long to do that in code. And because you can see your changes live, as you go, there’s no clicking back and forth to the browser to see your changes take effect, like there is when you’re writing in code. So there’s that.

Compatibility

I was concerned about compatibility, and I’m pretty sure there are lots of us out there still dealing with the anxiety that the Gutenberg roll-out has caused. For those of us who have highly-tailored existing sites, it’s good to know that our posts are totally backwards compatible, and our shortcodes still work. WordPress is exploring how to accommodate highly-tailored metaboxes, and is looking at other desired solutions such as a plugin that disables Gutenberg altogether, or possibly auto-detecting whether Gutenberg should even be installed/activated or not.

Not saying it’s better in any way than writing in code. I’m still a code girl. But it’s a nice alternative.

Here’s the Gutenberg Handbook for Designers and Developers in case you’re interested.

What’s Next

If you don’t want to use Gutenberg just yet, there is a way to keep the “Classic Editor” as the default. Go to “Plug-ins” and “Add New”. In the search box, input the keywords “Classic Editor”. Once it appears as a choice, install it and then activate it. IF YOU’VE ALREADY USED GUTENBERG to create a page or post, your formatting and CSS will be wiped out. So be careful.

Also, you know to make a backup of your full site before updating to WordPress version 5.0 and installing/activating/using Gutenberg, right? Just sayin’. Look in your C-Panel to find any backup utilities you could use. There are several WordPress backup plug-ins available as well. Go to Plugins>Add New>and search for keyword “backup”. Of course, you could also have me do it. I’d be happy to download a copy of your entire site, databases and all, for you to keep somewhere safe and sound, to restore your site in a jiffy if need be.

WordPress will continue to find ways of ensuring that a page’s existing functionality continues to work while allowing us developers the necessary time and tools to make a smooth transition. And I think that Gutenberg will certainly create desirable opportunities for plugin and theme developers to begin designing even more visually engaging user experiences.

In the meantime, if Gutenberg’s got you down, give me a holler. I can help with that. I’ve been using Gutenberg since it was available in the beta version as a plug-in and I’ve developed a couple of live sites with it.

Diane

Email me at [email protected]

More contact information is on my site Imageandaspect.com.

 

Questions? 

[email protected]

My Contact Page

Other articles you might like:

-10 Things to Do After Creating Your Website

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

 

About the author

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Keep it simple

Use images that complement the text, but are lightweight and will download faster. Images that have lots of patterns, textures, and colors are often large in size. (For those less experienced: I’m not talking about the dimensions of the picture, but the file size or “how much it weighs” as in how many KB or MB it is.) When you use images in this way, it can actually help you to improve SEO rankings.

Images with words superimposed on them will tend to weigh more than images that don’t have words on them. If you absolutely have to have words superimposed on the image, save that image as a PNG file rather than a JPEG. Illustrations with words superimposed on them work better than photos with words. You could also save the photo as a GIF, but experiment with that. Sometimes GIFS are treated as animation and will have a “play” button on top of them.

Keep in mind that using other types of features in your images can also make them larger. For example, adding drop shadows and gradients will increase file size.

Remember: images need to load quickly, and very quickly on smaller mobile devices.

Compression

Make your image smaller but don’t use HTML or CSS to do this because you won’t save any weight. The image will render at a smaller appearing size (the number of pixels) but the weight will stay the same.

Instead, use an app like Irfanview to compress image files and maintain their quality. Irfanview (www.irfanview.com) is free, and resizing an image takes literally just a few clicks. The image will weigh less but will retain its original quality, all within seconds. Upload the compressed image to your site to improve SEO rankings.

Relevance

Ensure that your images make sense and are relevant to the content. Don’t use them solely to make the page interesting-looking or attractive. Doing that would add weight for no good reason and your page would load slower, giving your visitors a sub-par experience.

Accessibility

Make sure all of the page photos and images are accessible to seriously-visually-impaired and blind people. Always use the “alt image” field to describe the photo, rather than using it as an opportunity for keyword stuffing.

Also within the realm of accessibility, you may want to limit the use of emoji’s and GIFS and to consider using color-contrasted text and buttons so that visually impaired people will be able to enjoy using the site.

Don’t forget to add “alt text” and captions, so that screen readers will be able to inform the visually impaired user of what’s on the screen.

With a little forethought and planning, your site could rank a little higher because of your images, and how you used them to improve SEO rankings.

Questions? 

[email protected]

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-5 Tips to Stay Sane when Working from Home

-Use a customer thank-you page to avoid missed opportunities

 

About the author

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

6 common image formats: how to use them

JPEG, JPG (Joint Photographic Experts Graphics)

JPG’s are the most common of the six common iamge file formats out there. Digital cameras use the JPG file format, and internet images are displayed using this format as well. This file format is based on “Lossy Compression”, meaning that it keeps only the visible information and discards any information that our eyes can’t actually see. JPG’s popularity comes from its ability to load fast on any platform while maintaining good quality, and because it can be viewed on any type of device. The downside is that any time a JPG image is saved, (basically re-compressing it each time), it loses quality and becomes grainy or pixelated.

PRO’s: lightweight and view-able on almost any device without special programs or viewers.
CONS: loses quality when saved repeatedly.
Best for: web design, social platforms, and portfolios.

PNG (Portable Network Graphics)

A PNG is a high-quality image file format, based on “lossless compression”. PNG has the ability to retain the original sharpness and color of the saved image, and it supports transparent backgrounds, which is great for displaying logos or when using an image on a patterned or colored background. They’re a larger file format and use more storage space then JPG’s, so they take more time to load.

PROS: high-quality, support transparent backgrounds.
CONS: heavyweight, longer loading time, takes up more storage.
Best For: logos, websites photos, profile pics, posts, covers.

GIF (Graphics Interchange Format)

GIF, for many of us, means animation. GIF’s are made of pixels, just like JPEG’s and PNG format types, but GIF’s are based on the “LZW (Lempel-Ziv-Welch) compression”, which is also a type of lossless compression. GIF is best for images that contain fewer colors, like diagrams, and shapes. GIF’s also support transparent backgrounds.

PROS: basic animation, transparency.
CONS: poor gradient color display. Not good for multi-color images.
Best For: short animations on social media.

PDF (Portable Document Format)

PDF’s are used for online documents. The PDF format was created by Adobe so that files could be opened and displayed without losing their original formatting or design. Photos, images, videos, audio files, interactive elements like forms or buttons, as well as text, can all be included inside a PDF file. PDF’s can be created in Adobe products like Acrobat, Photoshop, Illustrator, and Indesign, as well as with Google Docs, Microsoft Word and many others. To view PDF’s, you need to have a reader program (special software) installed.

PROS: keeps formatting and design of the original document.
CONS: need PDF Reader to view.
Best For: online forms, documents and printing them.

SVG (Scalable Vector Graphics)

SVG is a format for saving and displaying “vectors”, which are digital illustrations made with geometric shapes and created with “vector illustration software”. SVG’s look very clean and professional and can be displayed on all web browsers. They’re a good format for printing because they maintain their high quality when resized. It’s a good idea to save logos and other visual business resources as an SVG file as well as other formats like PNG and JPEG.

PROS: doesn’t lose quality when resized.
CONS: SVG’s aren’t supported by social media.
Best For: web design, illustrated business resources like logos, icons, diagrams.

MP4 (Moving Picture Experts Group)

Of the six common image file formats, MP4 files are video files that may also contain audio data and/or text subtitles. MP4’s are lightweight and can be uploaded quickly to websites or social media networks. They can be played on media players or streamed over the Internet, without the need to use a special application or program.

PROS: lightweight, plays on all common media players, streams online.
CONS: none.
Best For: websites and social media.

---

Questions? 

[email protected]

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-10 Things to Do After Creating Your Website

 

About the author

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Social Media by itself

Right now, you might be relying on just social media to showcase your talent, work, experience and ability. By using social media, you can definitely grow an audience and relationships within it. Your followers can learn more about you and what you do, and connect with you. These platforms are a great way to do this.

There is a downside to using only social media to promote yourself, and that would be the “algorithms” that they use. Algorithms are basically a set of mathematical calculations that determine how your content gets displayed. They are changed and updated frequently, and that affects the way users see your content. Sometimes “paid” content has priority over un-paid posts. Entrepreneurs’ solopreneurs and creatives sometimes pay for sponsored posts or social media advertising, just to stay visible and relevant. This is one reason why professionals need their own web presence.

Why Social Media isn’t enough

If social media is the primary way you nurture an audience, there are a few things you need to know. Social media platforms, like Facebook, use a time based news feed, so photos that you post will be seen lower in your feed, as you post newer content. To be able to see older posts and content, your followers have to scroll for them or visually search for specific content or photos, and possibly search your albums. As you can imagine, this is frustrating, and they may never find that week-old post they were looking for. Not good.

You don’t need to stop using social media altogether, because it’s still important for connecting. It’s just not the best way for promoting your work, skills, abilities or brand.

Owning your own space

When you buy your own piece of internet “real estate”, you now have your own dedicated space to present your work, share your story, and provide a place for interacting and connecting. You’re the one who gets to decide how to use that space.

You’re no longer relying on a platform that you can’t control, and your current and new audience members will be able to find your new space if you continue to engage on social media and let them know your new address. Another reason why professionals need to focus on getting their own web presence!

Owning your own domain name (“something.com”) is an important part of establishing your web presence. It helps build online credibility and a personal and professional reputation.

If people can find you on the Web, they’ll be able to do business with you.

Your domain name and a web platform are the first steps towards a stable, credible web presence. A well designed and professional looking platform translates into credibility for you. It provides a sense that you’re serious about what you do and that you’re serious enough to invest time and money into the thing that you’re passionate about. It doesn’t have to be expensive at all. There are many options. I’ll continue to write about them, and for now, here’s a handy downloadable, free guide.

To have your own dedicated web presence, you need three things:

1. your own your domain name (“xyz.com”)
2. a reliable hosting provider
3. content to share.

When you have your own web presence, on your own platform, you can decide how to present your work and give yourself priceless opportunities, like being able to reach the larger global community, provide value, help others, and establish a following….all without buying social media ads or paying to “promote” posts.

A harsh reality of owning your own web space is that people won’t find it overnight. It can take a long time to establish an optimal search engine ranking. One particular reason for this is that Google ranks websites and domains higher the longer they’ve been around. Your web space and brand will grow over time, and your traffic will increase organically. So, learning some basic SEO, or hiring some help, and creating a stable web presence on your own platform sooner rather than later, are always good ideas.

GREAT REASONS TO OWN YOUR WEB PRESENCE:

 

Your work

A website is a place of business. It’s where you communicate with people, grow a fan base, and sell or promote products and services.
Your own web space, in the form of a dynamic, visually engaging, content-rich website, has the power to create a web presence that:

• represents YOU: your personality, work, voice, brand, and values.
• gives you the power to connect and influence.
• puts you out there as an expert and an authority in your area of expertise.
• sets you apart from the hundreds of others who solely use social media.

Making yourself available to the world like this can lead to unbelievable personal and professional growth.

A noteworthy point to make here is that your web space will be accessible by all kinds of devices; phones, tablets and laptops, just to name a few. You site will truly be available to anyone, anywhere, who has a device that can assess the Web.

Content Marketing

Creatives create because we enjoy it. “Creating” is part of who we are. Wouldn’t it be nice if someone appreciated our creations enough to pay us money for them? It happens all the time, with content marketing.

Content marketing is a type of marketing that focuses on creating, publishing and distributing subject matter to a specific audience.
When people go online to research products or services that you provide, you need to have your own web presence on your own web space, if you want them to find you and learn about what you do and provide.

Having your own web platform also means that you can find out what your audience is looking for, and then publish content that’s relevant for them. When you publish content that your audience wants, and make it available on your site, they will come. You can use social media to spread the word.

Content marketing draws visitors to your web space and gives them an opportunity to find out who you are and what you do. It’s a type of “inbound” marketing, and it’s the opposite of “pushing” ads out to people. Inbound marketing is very cost effective: online marketing researcher, Hubspot, found that inbound marketing-leads cost 61% less than outbound leads do.

Using Analytics

Using analytics tools (like Google Analytics) allows you to learn about your visitors and how they interact with your site. Google Analytics is free, and easy to set-up. Some things you’ll learn about your visitors are:

• whether they accessed your site by mobile, laptop, or tablet
• the pages they visit on your site
• where they are geographically located when they come to your site
• how long they look at your content
• whether they’re a first time or repeat visitor
• If they’ve read more than one page on the site
• whether they’ve made a purchase (if you provide that ability)

All of this information is useful when you’re planning a marketing strategy.

Sales

A web platform can be the place where you sell your work or products, and the great thing is that sales can happen 24/7.

You can test and experiment with products and pricing, and by introducing new products or services to see how they’re received.

Your voice

When you own your web space, you’re no longer limited by geographic location. Your place of business is anywhere in the world people can find your web presence.

Owning your web presence allows you to share your values, thoughts and ideas with the world. Blogging gives you a forum to create thoughtful and valuable content and a way to share your story and journey. These give you a voice, and the capacity to influence.

Your reach

There are nearly 4 billion Google searches every day. At any time, a potential new customer or fan could discover you!

Owning your web platform means that your content is always available, all over the world, and allows people from anywhere and everywhere to find you and discover what you’re about.

Your credibility

Having your own web platform helps to build your credibility and reputation as a professional.

People expect to be able to find a dedicated web-space for any well-known Creator: artist, author, designer, photographer, producer, musician etc. If someone looks for you on the web and can’t find you, it could send the wrong message.

When your followers can find you online, it tells them you are serious about what you do.

Your credibility and reputation grow as your web space gets more visitors. Visitors may get to your site directly from other sites that share your audience and choose to link back to your web space. This is called “back-linking”, and it’s a valuable practice. It’s like getting massive approval or a meaningful positive reference from these other places that have a common connection to your audience.

You can grow your credibility by engaging on social media and with relevant “event” websites, bloggers, galleries and any others who share your audience. Share links to your content. Chime in. Provide value. They may love it that you provide value to their audience and want to link back to your website.

Questions? 

[email protected]

My Contact Page

Other articles you might like:

-6 Tips to Make Your Blog Post SEO Friendly

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

 

About the author

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.