Iterative development offers a flexible solution for clients who need to stretch their budgets while still achieving their web development goals. By prioritizing essential features first and gradually adding more complex functionalities, you can ensure that your website evolves alongside your business needs without compromising quality or breaking the bank. Let’s take a look behind the curtain at several of the day-to-day approaches that allow WebDevStudios to help our clients reimagine their websites iteratively.

What is iterative web development?

You may have heard the terms ‘iterative’ or ‘iterate’ used quite frequently. To some degree, they’ve become buzzwords in our modern vernacular. I think that’s in part because the term can apply to so many aspects of our lives.

Part of my inspiration for writing this article is to take a moment and appreciate the types of technology and processes we humans have developed over many generations. We should also slow down to appreciate all of the great technology we have today, which enables even more productive iteration.

I’d argue that iteration is nothing new. You can find evidence of iteration all over if you look hard enough. From Leonardo Di Vinci refining his ideas through sketchbooks to ancient cave paintings repeated on walls as humans improved their ability to express their ideas.

An excellent definition of the “iterative process” can be found in Julia Martins’ article “Understanding the iterative process, with examples” for Asana.

The iterative process is the practice of building, refining, and improving a project, product, or initiative. Teams that use the iterative development process create, test, and revise until they’re satisfied with the end result.

Who is iterative development for?

Iterative development is great for teams or individuals who want a flexible,  budget-friendly web development process that allows for adaptability as time goes on. The beauty of this is that assessments can be made in real-time as to the effectiveness of the work being done, and adjustments can be made if and when needed. Things are not set in stone, which would be antithetical to a proper iterative process.

Who isn’t iterative development for?

While iterative development offers many benefits, it may not suit every project or team. Projects with strict deadlines or fixed budgets that require a definitive scope may not thrive under an iterative approach.

If a client or project manager expects a fully completed product on a tight timeline without room for adjustments, then a traditional development process might be more appropriate. Additionally, projects with very clear and unchanging requirements might not benefit as much from the flexibility that iterative development offers.

Speed of Iterative Design

Consider the process of sharpening a pencil. You don’t aim to get it perfect in one go; instead, you refine the point gradually, making adjustments as needed until it’s just right.

The same applies to iterative development. Each phase of the project sharpens the final product a bit more, allowing for flexibility and ongoing improvements without starting from scratch.

Versatility of Iterative Development

Imagine drawing up a blueprint. The initial sketch provides a rough outline, but as the design progresses, details are filled in, and modifications are made. Iterative development allows for that same kind of versatility. It’s not about creating a rigid plan but about refining and enhancing the design over time, ensuring the final product meets the evolving needs of the client.

Technology Enables Iteration

Modern technology has made iterative development more accessible and efficient. Tools like Git for version control, Figma for design collaboration, and Jira for project management allow teams to work in tandem, making continuous improvements throughout the project’s lifecycle. The ability to iterate quickly and effectively is a direct result of these technologies.

At each stage of a project—planning, design, development, QA, and even post-launch—iteration plays a crucial role. Whether it’s refining ideas during initial meetings or tweaking the design based on client feedback, the iterative process ensures that the project evolves to meet its objectives.

Planning, Strategy, Discovery

At the beginning of a project, many people may be involved in the initial planning work. Usually, over the course of multiple meetings, stakeholders begin to shape the requirements for a project.

This can be thought of as a form of iteration. Ideas are refined as time goes on, and eventually, a project plan is arrived at. Ideally, input has been gathered from many people, including company owners and CEOs, various directors, team leads, and project managers.

Technologies that aid in this part of the process are team workspaces such as Confluence by Atlassian, Slack, and Google Docs. All of these products offer the ability to refine and improve ideas over time.

Design

Designers have many iterative tools at their disposal. Even knowledge from past projects and experiences can influence decisions for the current project.

If a designer creates a starting template for websites or components, that could be thought of as iterative since the templates themselves were generalized and planned to provide a well-informed starting point.

In some ways, iteration is all around us. Tools such as Figma and Adobe Illustrator allow for back-and-forth communication, as well as incremental adjustments to the various elements of a project, from layouts to logos.

Development

Most developers work in teams of specializations. A frontend engineer may begin working on HTML, JavaScript, and CSS, while a backend engineer may begin working on data migration and structuring the data for the site.

Version control systems such as Git allow for a relatively seamless development process. Engineers with different intentions can collaborate with each other, moving the project forward.

Git: The Ultimate Iterative Process

Git is the epitome of an iterative process in development. By enabling multiple branches and version control, developers can work on various parts of a project simultaneously, making adjustments and refinements without affecting the entire codebase. As each iteration is tested and improved, it gets merged back into the main project, ensuring that every improvement is carefully integrated into the final product.

QA Testing

It’s important to confirm that the work being done is correct. Quality assessment (QA) is an opportunity to spot potential issues and fix them. Fortunately, because this is an iterative process, these changes can be applied to the project, further improving the final outcome.

Tasks can be created in a project and issue tracking tool like Jira. Those individual tasks can be further investigated.

Client QA and Feedback

Now, it’s the client’s turn to review the website. Does the development work as expected based on the designs and the acceptance criteria? Is all functionality in place? Is anything missing?

It’s an important gut-check moment when the client reviews a site for the first time. If a client creates a QA ticket, the same process will be used that was done during internal QA testing.

Development Based on Client Feedback

Developers will fix issues mentioned through client feedback and prepare for launch. Everything should be buttoned up by this point. Any iteration that is done should focus on the small details.

Launch

It’s all come down to this moment. But of course, this is an iterative process, so we won’t stop here.

The launch is an opportunity to celebrate Version 1 of the website. Along the way, conversations may have occurred about additional functionality that was not scoped out in the original project. It won’t be long before we can start developing these ‘nice-to-have’ features.

Post-Launch Support

Typically, there’s a window of time where any issues related to the project can be resolved. This is considered the post-launch support window. Clients have an opportunity to log problems with the project managers, who can then assign tasks to the appropriate engineers. Engineers will then use their version control system to create a new ‘branch’ based on the need.

Maintenance

This is an opportunity for the client to develop features that may not have made sense during initial development or were considered too late in the project. The development cycle will continue again.

Depending on the size of the feature, it may start with planning, discovery, strategy, or design. If it’s a smaller feature, project managers can consult with engineers and develop a plan for it.

Using a Retainer to Achieve the Budget-Friendly Benefits of Iterative Web Development

WordPress development lends itself very well to iterative design, allowing for ongoing improvements, flexibility, and adaptability. Whether you’re refining an idea, adjusting a design, or responding to client feedback, iterative development ensures that your project evolves in line with your goals, delivering a polished product without breaking the bank.

At WebDevStudios, we achieve this through our retainer services for ongoing WordPress support. Whether it’s a full website build accomplished over time or feature improvements, we can use an iterative approach for budget-friendly web development that meets your requirements. Contact WebDevStudios when you’re interested in using this approach on your next WordPress project.

The post Reimagine Your Website Over Time: The Budget-Friendly Benefits of Iterative Web Development appeared first on WebDevStudios.

However, before you sign that contract, I encourage you to consider the following list of potentially critical things you should insist on including in your development process. If all of these standards are not included in your estimate, it would probably explain the disparity in pricing between the cheaper agency and one that is more reputable but, therefore, more expensive. Before we delve into these crucial considerations, it’s essential to understand the potential repercussions of opting for the cheapest WordPress development agency. Here’s what you need to know.

But wait. Most WordPress agencies are the same, right?

Choosing a WordPress agency to develop your website is an important decision that could impact your company in many ways. It may be tempting to go with the company offering the lowest estimate, but let’s explore some ways in which the cheapest WordPress development isn’t always the best option.

Lack of WordPress Experience

I encourage you to look at the length of time your chosen agency has worked in the WordPress industry. For instance, WebDevStudios has been developing WordPress sites for over 15 years. That’s more than 15 years of watching industry standards evolve. That’s 15+ years of continually striving to offer our clients a better end product.

Poor Website Performance

Believe it or not, your website acts as a reflection of your brand. You want it to reflect your values. It should be performant, and the metrics should prove it.

Lack of Security & Poor Accessibility

Your WordPress site should be secure, and the industry’s best practices should back that promise up. It should also be accessible to everyone, not only because your SEO will thrive but because it’s the right thing to do, and it’s even the law in many cases.

No Documentation

A good WordPress agency will deliver clean code that is well-documented. Cheap agencies may skimp on this deliverable, leaving you with countless future problems. Don’t just think of what you need today, think about the future of your company’s website.

Cheap code can be riddled with hidden and compounding problems, making future enhancements more expensive than their quality code counterpart. If you’re not careful, the hidden problems, much like black mold hiding behind a wall, can accumulate and cause additional expenses for years. Invest in quality code if you want a website you can continue believing in for years.

Not Future-Proofed, Impersonal Service

Lastly, the cheapest WordPress development can come in several forms. The first is obviously the agency that is too small and who believes they can do it for less. These agencies may be skilled in many ways but can’t hold a candle to experienced agencies.

The second is the agency that is too large and has so many clients that you risk becoming just a number. On the contrary, choosing an agency with decades of experience developing enterprise-grade WordPress sites and a reputation for treating clients as individuals is choosing the best of both worlds.

Good, Cheap, or Fast. Which two would you like?

It’s understandable that people want quality, but it’s also important to temper expectations with reality. If you’re limiting your choices to the cheapest WordPress development, doing so may come with a hidden cost.

I’ve always heard the mantra:

Good, cheap, and fast: pick two.

I think this is apt here, as cheap usually seems to be the Achilles heel. Choose good and cheap; it won’t be fast. Choose cheap and fast; it won’t be good. If you expect your WordPress website to be good, cheap, and fast, perhaps it’s a sign that more research is required.

Usually, corners get cut when the focus is cheap. It’s important to know the makeup of the team that will be building your site. Will you be onboarding with what seems like a well-rounded team, only to be left with the most junior developers after the welcoming committee has left?

A well-rounded team will include strategists, account managers, project managers, designers, frontend engineers, and backend engineers. A good agency will be diversified in its skills and will not try to put all of these responsibilities on only a few people, or even worse, one person.

Who is paying for WordPress development mistakes?

To begin, I’m going to quote WebDevStudios Account Manager Laura Byrne:

If you needed a brain surgeon, you wouldn’t choose the cheapest one.

When you hire a WordPress agency, we hope you are considering the level of experience such a company brings to the table, not just the cost. Experienced agencies are not exempt from mistakes over the years, but those mistakes are now part of the depth of experience and precisely what qualifies them to be experts.

If the cheap WordPress development agency you hire makes a serious mistake, ask yourself who will carry that burden. Was that mistake preventable in the first place? Will the cheaper agency quickly bounce back, or will this lead to even more problems? Our guess is that something will have to give, and it will probably affect you where it counts most: your budget and your time.

Does your agency use best practices in WordPress development?

Your agency should be developing a secure WordPress site. They should be willing to offer additional future services, such as regular updates and backups. This means that their development processes are well-defined, and they have a trusted partner for hosting.

It should perform well when you run a Google Lighthouse report on your website. This means that it has been optimized for various devices, as well as accessibility and SEO.

As the development agency is building out your website, are they also developing feature documentation? As the new owner of your website, you’ll need to know how to use it. That’s standard practice for WebDevStudios, and you should demand that. Is the data sanitized, and the code escaped? You should be sure that you’re not vulnerable to hackers who love to use SQL injection and cross-site scripting (XSS).

How cookie-cutter will your new site be?

Design is a huge factor in brand perception. Who will be designing your site? Is it someone with expertise in UI/UX design or someone who is winging it?

We recommend you begin by having early conversations that consider the overall intention of your site. A good designer can solve many of the problems in the early stages of the process. You should discuss your project’s needs with someone who can actively listen and then turn your dream into a reality.

When there’s a critical failure, can they fix it? How can you be sure?

Whoever you go with, they should be available anytime. You should feel comfortable knowing that if there’s a problem with your site, you can reach out and begin the process of fixing your site.

Does your chosen WordPress development agency offer a tier of service that includes 24/7 response and service? Lastly, have they dealt with a vast number of potential problems in the past? These are the benefits of choosing a company that can back you up, not just in the beginning but at all stages of your company’s evolution.

How scaleable is your cheap WordPress site?

Assuming your website does well in the future, you’re eventually going to want to expand your offering. You should feel confident knowing that the company you choose can handle the development of new features.

A major flaw of cheap WordPress developers is that they’ll sometimes fall into the trap of using plugins as bandaids for features. To be clear, plugins are not bad, but they should be used judiciously.

If your website has functionality that hinges on plugins, ask what that could mean for additional development in the future. Plugins often have quickly found limitations, and if you’ve sunken a considerable amount of cost into a direction that ends up in a dead end, you’ll be on the hook to spend much more money in the long run.

There are many details to consider. For example, is your new site set up to be properly translated? Is the code configured in a way such that content can be created in a second language? Again, the lack of features like this is another potential hidden flaw of a cheaper agency.

Where will your development company be in 3-5 years?

I mentioned this briefly before, but you should think about the future of your relationship with an agency, not just what can be delivered in the short term. As relationships grow, so do processes.

A positive and familiar working relationship can improve the turnaround time of new feature development. Finding a new and reliable agency after discovering problematic issues is not the best use of your time. Onboarding costs can be expensive, and the new agency will need to begin the process of reading and understanding your existing code base. Assuming it’s in perfect shape, that can still take a bit of time. Ask yourself if you’ll be stuck looking for another WordPress developer in a few months, and consider how painful that process will be.

How will your new site perform?

Accessibility is massively important. Don’t let anyone tell you that you can worry about accessibility later. Remember that if your site falls under ADA Title III, it is considered a public accommodation. This includes restaurants, retail stores, and more.

Again, many websites are legally considered public spaces. Examples of companies that have been sued for lack of website accessibility even include Nike, Amazon, and Domino’s Pizza. Imagine trying to save money on your site, only to be sued because it’s not ADA compliant.

Finally, this leads to WordPress performance. What are your expectations for Google Lighthouse scores? This isn’t the only important metric, but it’s a decent benchmark to know how you’re going to rate on Google’s search engine.

Ask your agency how they plan to handle Least Contentful Paint, First Contentful Paint, and Cumulative Layout Shift. If they look like a deer in the headlights, that’s probably a red flag for finding a better agency.

How it all fits together.

Even if all of these things come together, the ‘how’ is something that can’t live purely in the realm of theory but must come from years of hands-on experience. Critical elements of your WordPress website, such as performance, accessibility, and code quality, should be a requirement, not a nice-to-have.

Set your project scope with these deliverables in mind. Invest in quality code, and remember that you’re investing in the future of your website. Don’t be tempted to just ship it because the clock is ticking; time will always be of the essence.

By hiring vetted professionals, prevent compounding problems now by creating the proper foundation for your website to thrive. I hope you can use the questions we explored today to inform better your final choice of which agency you should hire.

If you are working on a tight budget, WebDevStudios has a process that can help you achieve your website’s goals over time with the use of WordPress development sprints. This can stretch out the costs and allow for a strategic approach, prioritizing the most important aspects first. Contact us to learn more about how you can build the ultimate WordPress website based on a timeline and budget that works for you.

The post Why the Cheapest WordPress Development Isn’t Always the Best WordPress Development appeared first on WebDevStudios.

And for several years in a row, I had total FOMO from seeing photos and reading about the sessions. Of course, Covid interrupted everyone’s hopes for a few more years. My plan this year was to get to WordCamp US (WCUS) no matter what, so I was elated to see the chosen location was National Harbor, Maryland. With just a six-hour drive, I had very few excuses.

Not only was this my first WCUS, but it was also my first WordCamp event! It was everything I hoped for, but just telling you that doesn’t make for a very interesting post. So, I’ll give you a few more details about the extended weekend. I met people who I only knew virtually, I sat in on awesome sessions, and I met interesting new people who I can’t wait to see again in the future.

First, I grouped up with four other engineers and we split an Airbnb in the Old Town district of Alexandria, VA. Staying in Old Town was a great recommendation from my colleague and WebDevStudios Employee Experience Coordinator Julie Sarnik.

For our group of five, it was all WordPress all the time. When we weren’t at the conference talking WordPress, we were at the house talking WordPress. When we weren’t at the house talking WordPress, we were at a party talking WordPress.

Every day, we’d catch a Lyft across the Potomac River and arrive at the Gaylord National Resort & Convention Center, the home of WordCamp US 2023. If you haven’t seen the Gaylord before, it’s an incredible experience. Hundreds of hotel rooms overlook a gorgeous (and gigantic) glass atrium. I spent a considerable amount of time just daydreaming in the sunlight next to an indoor waterfall as I took it all in. There was a buzz in the air as people got together and hatched business plans and, of course, talked WordPress.

Contributor Day

Running on just a few hours of sleep, my crew and I arrived bright and early for Contributor Day. Almost immediately, I saw two former coworkers whom I had worked with for several years. Until then, I only knew them virtually.

By the end of the day, I was feeling incredible from having met at least ten other people in person for the first time. There were none of the classic awkward Zoom moments, such as, “No, no, you go first,” or, “You’re on mute.”

It was just human-to-human interaction, and after all these years, it was incredible! I spotted new facets of everyone’s personality that I had never seen on the internet. That experience alone was worth the price of admission, which was an unbelievable $50. Participating in a world-class community like this and downloading knowledge directly from so many industry leaders is a dream come true. The accessible cost is an aspect of WordCamp that I hope remains for years to come.

Friday Morning Sessions

Everyone was excited to see the first talk by Abby Bowman and J.J. Toothman called For All Userkind: NASA Web Modernization and WordPress. In it, they discussed the process for redesigning NASA’s official website and the process they went through to land (gently) on WordPress as their CMS of choice.

The aim was to create a cohesive website across the organization, and their success at that shows the power and flexibility of the platform we all love so much. There were so many great sessions, but a favorite of mine was Modern WordPress Development with Gary McPherson. I loved having an opportunity to delve into another expert’s development process and the detailed explanation that came along with that. All said and done, I came away from WordCamp more knowledgeable and inspired than when I arrived.

Finally, the social interactions at WordCamp are worth mentioning. Sitting down for lunch every day offered an opportunity to meet new people and discuss the inside baseball of WordPress. I also attended a few parties, including the Pride Party and the WCUS Social event, which left me energized and upbeat. Seeing so many people who can come together around the same topic gives me hope that we’re all moving in the right direction together.

If you have the chance to attend any of the WordCamp events, whether local or beyond, I’d say do it. I’m sure you’ll have an experience that is as positive as mine.

If you’re a WordCamp first-timer like I was, keep some things in mind:

• Remember to save space in your suitcase for swag, especially if you’re flying. Vendor swag is abundant, and it’s really good stuff, too.
• Give yourself some time to decompress. Remember that you can participate in sessions when you want to and step away when you need to.
• If you’re excited about a session, get there early in order to grab a good seat. It can really improve the experience when you’re closer to the presenter.
• Don’t be shy. I feel like most people (especially while exploring the vendor area) are open to an introduction and some discussion. On the other hand, know when it’s time to let someone go about their day.
• Many of the talks are recorded and published online, so you can always go back and review the details later. Bring your laptop if you plan to use it for a workshop, but perhaps consider leaving it behind if you don’t want to be weighed down.
• Remember to have fun!

The post A Dispatch from My First WordCamp appeared first on WebDevStudios.

With so many resources available today, learning software development can still be a challenge. The anxiety of constantly changing technologies, along with having to sort through vast amounts of content, all while committing hours of your life to complete courses and books can be daunting.

Software development courses and content can also quickly become outdated. To top it all off, there are just way too many distractions in the Information Age.

We all need a strategy to filter out the noise and to keep us focused and on track for mastering the really important ideas. Regardless of your level of experience, this is my call to action for all developers.

I want to get my thoughts down before I forget, and practice what I preach by utilizing the same process that I’m advocating for here in this post. I’ve used the same MVP method I’ll be discussing in this blog post in order to write what you’re reading here. I’m focused more specifically on code and engineering, but in theory, these ideas are applicable to most creative projects.

Learning versus Doing

It only takes one Google search to realize that we’re living in a great time to learn software development. There are obviously more choices now than ever before, but generally you can study via courses, classes, tutorials, etc., or you can learn by doing and building something.

An approach that many of my co-workers at WebDevStudios utilize is a hybrid of learning and doing. The approach basically works like this. First, take a course, read a book, or dig into some documentation for something you’re interested in learning.

Spend some dedicated time to study and do exercises in order to learn the basics of the new concept. However, it’s important to not stop there. This is the stage where too many people feel they’ve grasped the material. After a few months, their understanding will probably diminish significantly.

Instead of moving on to the next shiny new idea that competes for your attention online, take an equal amount of time to build something with that new knowledge. Studying to learn is absolutely important; it’s what helps us grow as developers.

If you want the knowledge to stick around, you need to put it to use. Building (practice) is equally as important as studying. You need to test your knowledge and confirm that you’re really able to put the ideas to use.

MVP Method—Your Loyal Friend

The hybrid approach of learning and building pairs itself well with the MVP method. MVP stands for Minimum Viable Product. According to Wikipedia:

A minimum viable product (MVP) is a version of a product with just enough features to be usable by early customers who can then provide feedback for future product development.

Someone who I’ve been fortunate enough to work alongside and learn from is Sal Farrarello, Principal Engineer at WebDevStudios. He describes the MVP like this:

Building with a MVP mindset helps avoid the classic pitfall of not finishing a project. With an MVP, you get something out the door fast. It may not have everything you want but it does something for you. Even if you never touch it again, you’ve got something.

Stick to the plan.

Before you even get started, put some upfront time into planning your project. Ask yourself what features it should have and what a completed project looks like.

If you’re following the MVP method, you’ll want to set the scope of your project to be as small as possible. The aim is to set realistic goals that you know you’ll be able to chip away at, then ultimately be satisfied enough to call it done.

Lastly, it’s really important to stick to your plan. From my experience, one of the quickest ways to enter the danger zone is get distracted from the original plan and to start adding features that you think would be “cool.”

The beauty of working in a minimalistic and iterative manner is that you can always make a new Git branch for version 1.1 later. For now, FOCUS on the plan you’ve agreed to with yourself.

Make the repository now!

In the spirit of the MVP method, don’t wait until you’re well into coding before making a repo for your project. The status can remain private until you feel like it’s ready to share, but there’s no better time than the present.

A way to keep yourself inspired and motivated is to put some care into the README file. It’s ultimately the first thing people will see when they visit your repository, and it puts a flag in the ground in terms of inspiration to finish your project.

I personally think GitHub is an incredible place for documenting your ideas while you put them into practice, and it provides a great channel for other developers to find your code and learn from it. One instant benefit of doing this is that instead of digging through random folders on your hard drive months from now, you’ll always know exactly where to go in order to find that code.

Add a twist to make it interesting for yourself.

Doing a personal project doesn’t have to be a dull task. Consider incorporating something you’re interested in.

It’s a chance to express yourself, and to add something unique. If you to like birdwatching on the weekend, create a project related to that. If you’re into a particular sport, maybe find a way to display data in a unique way related to the sport.

Set yourself up to remain interested, so that when things get tough, which they usually will at some point, you’ll have the inspiration to push through and finish.

I was recently studying a course on React. When I finished with the course material, and while it was still top of mind, I started brainstorming for ways to put the major concepts into practice.

Because I love playing video games on console, I felt that doing something with a gaming twist might give me the motivation I needed. I incorporated my newly learned material with a very simple implementation of the JavaScript Gamepad API.

The project is small and does only one thing. But, I feel like I’ve done the most important thing for the moment. I’ve built something with what I just learned. I can now call it complete and move on to a different project with ideas that I thought about along the way.

Standing on the shoulders of giants.

From my personal experience, I’ve found that about halfway through a personal project, self-doubt can start to creep in. It becomes easy to start comparing myself to others with thoughts like, “Is this really worth sharing?” or “What’s so original about this anyway?”

As part of my personal growth, I’ve found it helpful to remember that we’re all standing on the shoulders of giants. Perhaps someone scouring GitHub for a working code example will come across your incredibly simple, easy to grok repo (with awesome README) and stand on YOUR shoulders.

Next Steps

Giving yourself a framework like the MVP method and a project with an intentionally small scope, you’ll achieve several things. You’ll have less impostor syndrome because you’ll be too busy working to compare yourself to others. You’ll stop worrying about what others think, because you’re doing the best you can in this moment.

In my opinion, a small finished project gives much more pride than a lingering monster of an unfinished project. With this newfound inspiration, perhaps I’ll go back and reframe some incomplete projects with a new, more realistic scope. I know in the future, I’ll start small and finish small.

The post Finish Your Coding Projects with the MVP Method appeared first on WebDevStudios.

The goal of this blog post is to dive into the existing Gutenberg content blocks and document some useful examples for all skill levels. Let’s see what’s possible by simply configuring existing blocks to make clean, quick, functional layouts and spicing up your WordPress site with Gutenberg content block recipes. No code required.

Who benefits from Gutenberg Content Block Recipes?

Chances are, if you’re a WordPress developer, you’ve experimented with Gutenberg content blocks to some degree. However, if you’re like me, you’ve spent a good amount of time rolling your own custom blocks via JavaScript or ACF’s Gutenberg block-building features.

Anyone with a basic understanding of WordPress can build the following examples now. I hope that everyone from non-coders to engineers will appreciate how easy it is to build clean, simple layouts with these exciting features. Seasoned developers may come to realize that they can save time by opting for a solution that’s already baked in, or at least glean some inspiration for making your own custom block that functions in a similar fashion.

The Details

I’m using the Twenty Twenty theme for the remainder of this article. If you’re using Gutenberg content blocks on a different theme, the functionality should be the same, but the appearance will probably change. At the time of writing this, I’m using WordPress 5.3.2.

How to Add Gutenberg Content Blocks to Your Page

Content blocks can be found under the plus symbol on your post or page. Blocks are organized by categories.

Currently, the default categories in this order are:

• Most Used
• Common Blocks
• Formatting
• Layout Elements
• Widgets
• Embeds.

There’s a large selection of useful blocks, but these recipes below should give you a good starting point for exploring the possibilities.

Here’s a list of the Gutenberg content blocks we’ll be using, and where to find them in the WordPress Editor:

Button: Layout Elements → Button

Cover: Common Blocks → Cover

Gallery: Common Blocks → Gallery

Group: Layout Elements → Group

Heading: Common Blocks → Heading

Media & Text: Layout Elements → Media & Text

Paragraph: Common Blocks → Paragraph

Pullquote: Formatting → Pullquote

Latest Posts: Widgets → Latest Posts

Separator: Layout Elements → Separator

Hero Block with Headline, Text, and Background Image

Description

Build a classic Hero Block. This technique can be used anywhere emphasis is needed on a page. The Heading Block can be changed to accommodate context H2, H3, etc. Or, just use a paragraph and add some text.

Ingredients (Blocks)

1. Cover
2. Heading
3. Paragraph

Recipe

Begin with a Cover Block. Set the background image to your liking. Insert a Heading Block and a Paragraph Block.

Details: Experiment with Background Opacity and Overlay Color Options in the sidebar. If you select the Fixed Background option, you can create an instant Parallax scrolling style for your block. The focal point picker option allows you to drag the image around, or you can manually set the image positioning with horizontal and vertical positioning fields.

Alternate Version 1 — Divider with Image

Description

Need something less indulgent? Refactor this block to be a narrow divider with image.

Ingredients (Blocks)

1. Cover
2. Heading

Recipe

Leave only the Heading Block and adjust overall height. In the sidebar under dimensions, set a minimum height in pixels.

Details: I’m using 175px as the minimum height in pixels, but you’re the chef!

Alternate Version 2 — Divider with Pullquote

Description

This is a great block for highlighting a quote from someone. Use sparingly.

Ingredients (Blocks)

1. Cover
2. Pullquote

Recipe

Add a Pullquote to the Cover Block.

Details: I find the author attribution color by default to be a bit faint. Be careful with legibility contrast here.

Gallery Block with Headline and Background Color

Description

This is a nice way to add some flavor and color with custom adjustments to your photo gallery.

Ingredients (Blocks)

1. Group
2. Spacer
3. Separator
4. Heading
5. Gallery

Recipe

Start with a Group Block. Add a Gallery Block. Add a Heading Block and a Three Dot Separator Block. Use Spacer Blocks at the top and bottom to create desired negative space.

Details: The number of columns can be set in the sidebar options. You can opt to crop images, which I’ve done here. Or, you can let them scale into the available space. Click on each image in your gallery to add a caption. You’ll see an option to add a link to the caption as well.

Media & Text Block

Description

Create a Multi-Column Block with the image on one side and the text on the other. This built-in block works great, and with a few tweaks, something very expressive can emerge.

Ingredients (Blocks)

1. Media & Text
2. Heading
3. Paragraph

Recipe

Add a Media & Text Block to your page. Adjust text content area to suit.

Details: Remember that you can nest blocks. Try adding a button or even a gallery, if it makes sense! Select the outer containing block and set the background color for more emphasis. You can drag the vertical bar left to right, in order to set the ratio between image and text. I would recommend using the “stack on mobile” setting to allow for a nice layout when the block is viewed on mobile devices.

Alternate Version — Full Width

Description

Utilize the full-width option to make a bolder impact.

Recipe

Click and select the outermost container. Select the Full Width setting from the toolbar for a more dramatic look.

Recent Posts Block

Description

This is great if you want to alert your readers to other recent posts on your site.

Ingredients (Blocks)

1. Recent Posts Block

Recipe

This one requires only the Recent Posts Block, which looks great right out of the box. There’s a lot of customization possible here; so, read the details below.

Details: The settings for this allow the user to limit the amount of content, show only the excerpt (we’re doing that in this example), or show the full post. You can toggle the date, set filtering order, category, number of items, and columns. In our example, we’ve chosen two columns.

Call-to-Action Block

Description

Create a call-to-action using the Cover and Button Blocks.

Ingredients (Blocks)

1. Cover
2. Button

Recipe

It’s super-simple to create a nice call-to-action using existing content blocks. Embed a button in the Cover Block.

Details: Experiment with the button settings. Click directly on your button, then adjust settings in the sidebar. Border Settings will allow you to set the Border Radius for a more rounded appearance. You’ll also find the option to open the linked page in a new tab.

Now It’s Your Turn

I hope these have been inspirational for you, or at least have whet your appetite for what can be done with this useful tool. I encourage you to go see what you can make with what’s already available in WordPress.

The post Spice Up Your WordPress Site with These Built-In Gutenberg Content Block Recipes appeared first on WebDevStudios.

1. Parent Selector

Select a parent from within the child selector.

SCSS

View the code on Gist.

Instead of having to make a new selector for .container .text outside of the .text block, you can just write your selector inside of .text, followed by the &.

Compiled CSS

View the code on Gist.

HTML

View the code on Gist.

View on CodePen.

2. Suffixes

Here’s a cool way to generate suffixes based on a particular class. Use &- followed by the desired suffix. In this case, &-pink will create .container-pink when it’s used inside of .container.

SCSS

View the code on Gist.

Compiled CSS

View the code on Gist.

HTML

View the code on Gist.

View on CodePen

3. String Interpolation

String interpolation will render the result of a SassScript expression as compiled CSS. In this basic example, we’re setting color variables, then rendering them out as CSS comments.

SCSS

Notice how we use string interpolation directly in the comment.

View the code on Gist.

Compiled CSS

View the code on Gist.

View on CodePen

4. Placeholders

Placeholders are similar to variables in that they aren’t compiled in the actual CSS. The benefit of this is that they keep your code clean by rendering only the output of the placeholder. They can be extended anywhere in your code. Placeholders can be useful when you want to extend some particular properties across multiple selectors. Start your placeholder with a percentage sign %, so for example you could write %my-placeholder, and extend it inside your selector with @extend.

SCSS

View the code on Gist.

Compiled CSS

View the code on Gist.

HTML

View the code on Gist.

View on CodePen

5. Default value in mixins

When using a mixin, you normally need to pass in every argument that will be required. The advantage of using a default value is that you aren’t required to pass an argument in, but you can always override the default you’ve set. In this Sass tip example, I’m overriding the defaults for the second h1 as I pass in an argument of darkcyan.

SCSS

View the code on Gist.

Compiled CSS

View the code on Gist.

HTML

View the code on Gist.

View on CodePen

6. Null

Let’s expand on what we just did with using a default value, except this time, we’ll use null as a default value. If no arguments are passed in, nothing will be compiled in the CSS for opacity, but if an argument is passed in, it will be compiled in the CSS. This is a nice trick because your CSS won’t be bloated with unused styles.

SCSS

View the code on Gist.

Compiled CSS

View the code on Gist.

HTML

View the code on Gist.

View on CodePen

7. Color Functions

Color functions open a world of options for manipulating colors. They are built into Sass and can be used to dynamically generate CSS based on your needs. Here, we instantiate our scale-color function, passing in a color, and a saturation percentage. There are many color functions, and I encourage you to experiment with them.

SCSS

View the code on Gist.

Compiled CSS

When compiled, the hexidecimal color here is the result of the expression.

View the code on Gist.

HTML

View the code on Gist.

View on CodePen

8. @if to Change Contrast

Here’s a great Sass tip: Sass has control flow built into it. There are four types of control available to use: @if, @each, @for, and @while. Here, we use an @if conditional to determine if our colors meet the desired threshold for contrast; we then render the text color based on the outcome.

SCSS

View the code on Gist.

Compiled CSS

View the code on Gist.

HTML

View the code on Gist.

View on CodePen

9. @debug

When using Sass, there may be times when you need to know the value of an expression. If you use JavaScript, you have probably used console.log() to print the results of an expression to the console. The good news is that Sass has something similar. For example, it might be more work than it’s worth to figure out the saturation of #e1d7d2 yourself, but @debug is happy to do the math for you, right in the console!

SCSS

View the code on Gist.

Compiled CSS

View the code on Gist.

View on CodePen

10. Use @for to Build Your Own Utility Classes

You can even use loops in Sass. @for is one of the four types of control flow currently in Sass. Here, we’re going to generate some utility classes. We’re using the unquote function to return a string of "px", but without quotes. As you might be wondering, there’s also a quote function, which will return the same thing, but with quotes, of course. Note the use of string interpolation.

SCSS

View the code on Gist.

Compiled CSS

View the code on Gist.

HTML

View the code on Gist.

View on CodePen

Here’s a full list of all the CodePen examples for you to explore:

1. Parent Selector
2. Suffixes
3. String Interpolation
4. Placeholders
5. Default value in mixins
6. Null
7. Color Functions
8. @if To Change Contrast
9. @debug
10. Use @for To Build Your Own Utility Classes

Thank you!

Thanks for taking the time to read these Sass tips. I hope you’ve found some of these items that I’ve picked up over the years to be useful for your daily Sass workflow.

The post Sass Tips to Take Your Skills to the Next Level appeared first on WebDevStudios.

It’s the Friday before a major holiday and an urgent email hits your inbox. Your client, who has been a dream to work with over the past few months, has a problem.

Two seconds ago you were thinking about kicking your feet back and relaxing, but now your adrenaline is surging. The CEO (who has never been mentioned before now) is finally taking a look at the new site you’ve developed, and the menu is “completely broken.”

Did you actually think the corporate executives were going to look at the new site with a Mac? A dizzying array of questions zip through your mind. “How could this happen? I checked the site on all of the major browsers!” you say to yourself as the world around you spirals.

After some deep breathing exercises and a bit of inquiry, it becomes apparent that the browser in question is Microsoft Edge on Windows 10. To make matters worse, the site wasn’t actually tested on any browsers beyond the boundaries of your Mac devices. You’ve been loyal to Apple for as long as you can remember, but that won’t help now.

Although this story is anecdotal, it’s based on real events that happen to developers every day. Perhaps you will get lucky and only people with the most up-to-date browsers will see your work, but eventually, this approach will catch up with you. Let’s take a look at some ways to mitigate this problem, and perhaps help you sleep a little better at night by knowing that your websites look great for everyone.

But first, one more quick story.

I recently worked on a WebDevStudios (WDS) client project where a date-picker was specified in the design mock-up. I was excited to use an HTML5 input for this and thought it was working pretty well, with the only obvious downside being that I couldn’t add custom styles to every aspect of it. This solution seemed to work great along the way as I developed the site using Chrome on my (ahem) Mac.

But, funny things started happening as I tested other browsers. I found that the date-picker was not displaying correctly in Safari. This came as a surprise to me. As of July 2019, an HTML5 input that I assumed was pretty common is not actually supported by the newest version of Safari, and it was not behaving as expected in a few other browsers, as well.

I expected to see a date picker similar to this:

But instead, this is what I saw in Safari—just a cursor:

If I hadn’t tested with Safari and the other platforms, I wouldn’t have caught this problem. Safari has a 13.5% market share of browsers, so there’s a pretty significant chance someone would have been affected. Ultimately, I used a jQuery library to help supplement the date-picker, and it solved my problem, but without cross-browser testing, this lurking problem may have affected the functionality of the page.

Enter Cross Browser Testing

Situations like the one above can be significantly curtailed with the proper approach. There are two common methods for cross-browser compatibility testing.

The first is to purchase all of the computers and devices required to test applicable browsers. Note that you can use a virtual machine to fill in the gaps if you don’t have all of the operating systems available. One of the major advantages of this approach is speed. If you need to test something, just open up the device and test. But that also means having to obtain and store many tablets, phones, and computers in your work space. It also means keeping them charged and maintained. You’ll probably need to document your tests too, and managing screenshots and videos can be time-consuming.

The second is cloud-based testing. These are testing services, such as CrossBrowserTesting by SmartBear, and BrowserStack, which allow you to enter your site’s URL; then tests are run on actual browsers hosted by the service provider.

There are many pros to this approach. For instance, you don’t need to stockpile computers and devices. You can also automate tests on many browsers at once, saving tons of valuable time. Results of these tests can be shared as links.

Some of the cons include the fact that you’re testing across the internet, so there may be considerable delays compared to having an actual device. Cost is also another factor, but buying all of those necessary devices could quickly eclipse the yearly price of a cloud-based testing service.

Automated testing saves massive amounts of time. Here, I’ve run a quick test of Google. A full-page rendering of the site is now available, as well as a description of layout differences between each type of browser. They’ve even run the site through Google’s own Lighthouse for performance, accessibility and SEO ratings. This set of tests can now be shared through a link.

Live testing allows you to run an actual browser and test out aspects of your page in real time. As you can see, the browser choices are practically endless:

If you’re new to all of this, perhaps start with an online service, and add devices as you feel you need them. Most developers benefit from a hybrid of the two approaches.

At WDS, we emphasize delivering consistent, beautiful experiences for all of our client’s target browsers. To help maintain this quality standard, we use a combination of both cloud-based cross-browser testing and actual devices.

In general, a good philosophy for testing is to test early and test often. If you can catch bugs and issues earlier in your process, then you’ll feel more relaxed and confident about the product you’re delivering. You’ll know that everyone’s experience will be a great one, and you’ll also have a course of action if and when issues do arise. It’s a big world with many browsers, so get out there and make sure they’re all able to display your site in its best light.

The post Cross Browser Compatibility Testing appeared first on WebDevStudios.

If you’re a data nerd, you won’t be disappointed with today’s options for processing payments. Dashboards give online store owners insights into customer data in new and exciting ways. Do you have an idea for a product you’d like to sell or a side-hustle you know would take off? Then you should definitely keep reading for some eCommerce tips and information on processing payments.

Payment Gateway vs Payment Service Provider

When most people think of PayPal, they may not consider how many steps go into a successful online transaction. Many verifications need to take place before money changes hands, and that’s a good thing for everyone. Those who run an online store want to be certain all transactions are secure and encrypted, and that’s where payment gateways come in.

A payment gateway is a service that handles the authorization of payments for online merchants. This is typically done through a third-party company, who specializes in these types of transactions.

In this article, we’ll mostly discuss payment service providers (PSP). PSPs utilize payment gateways, but often add a layer of useful services for the merchant site owner. Services can include fraud protection, credit card processing, label printing, data analytics, invoicing and more.

Stripe, PayPal, and Authorize.net are but a few of the dozens of PSPs to chose from. You’ll really want to dig in and see what fits your company’s business model best. Forms of payment range from credit/debit cards to bank transfers and even Bitcoin.

It goes without saying that when it comes to your company’s reputation, it’s critical that you minimize your exposure to financial liability when processing payments. There’s probably nothing that will enrage a customer more quickly than the loss, or perceived loss, of money. If, for some reason, there are problems in a transaction (and lots of things can go wrong), you can turn to your trusty dashboard and root out the problem. Personally, I believe having that level of control and peace of mind is worth the service fee alone.

How are Payments Accepted Through a Payment Gateway?

This is a general overview, but when a customer is ready to place an order, their data is encrypted and sent. Data is usually sent directly to the PSP, altogether bypassing the merchant’s site. Once the customer’s order data is received, an authorization process is carried out with the relevant credit card company or bank. After the financial institution has authorized the purchase to the payment gateway provider, your online store portal will receive an update letting you know that the payment has been authorized.

The merchant (you in this case), will then complete any remaining requirements including preparation of goods for shipment or delivery of the product if it’s a digital item. After all of this has taken place, your PSP will confirm that the required steps have been verified. You can then mark the transaction for completion. Behind the scenes, final steps are taken to exchange funds, and the whole process is usually completed within three days. Rinse and repeat.

How Much Are Service Fees?

The rates are competitive, but service providers will often charge a percentage and a set transaction fee. At the time of publishing this, Stripe, for example, charges 2.9% plus $0.30 per successful transaction. PayPal’s fee is similar. International rates will vary and may increase considerably in cost.

Do You Have a WordPress site?

There’s a reason why WordPress sites account for 33% of the internet. WordPress has a loyal following, to say the least. It’s easy, powerful, and highly customizable. WordPress plugins are famous because they’re easy to install and they’re usually kept up-to-date by their developers. Updating your plugins is as easy as pressing a button, and can be scheduled for automatic updates. And, if you don’t want to handle updates yourself, you can always turn to our maintenance and support team at Maintainn. Want to get your online store off the ground fast with the payment service provider that’s perfect for you? We think WordPress is the way to go.

Is Your Product Digital or Physical?

Digital Products

Easy Digital Downloads (EDD) is a great way to manage your sales. Whether you’re a writer, musician or videographer, Easy Digital Downloads has you covered. Almost any digital file type or format can be sold through EDD, but generally speaking, if you can upload it to WordPress’ Media Library, you can sell it through this plugin. If WordPress restricts your file type, there are third-party hosting options available via Amazon S3 and Dropbox. Here’s a list of file types that WordPress supports. As you can see, the options are almost limitless.

Physical Products

If you’re offering physical products at your eCommerce, then you may want to consider WooCommerce. “Woo” is the go-to WordPress plugin for physical sales. It integrates with many major players in the payment service provider space and can be quickly configured to your needs. Highly customizable, it will be there for you as you scale up your company and rake in the big bucks.

Let’s Do This Together

Have big eCommerce plans but think you’re going to need some expert help? As you may know, at WebDevStudios, we’re huge fans of WordPress and eCommerce. Our clients love them, too. WebDevStudios provides end-to-end WordPress opportunities from strategy and planning to website design and development, as well as full data migration, extensive API integrations, scalability, performance, and long-term guidance and maintenance.  Contact us and let’s discuss your eCommerce project and which payment processing solution is best for your business.

The post Take My Money! eCommerce Tips for Processing Payments appeared first on WebDevStudios.