WDD LIVE 019 - Web Design Critique, Q&A, and Mini-Tutorials

Introduction and Announcements

In this section, the speaker introduces the session and announces upcoming events.

Speaker Introduces Session

• The speaker welcomes everyone to the session.

• The session will include a web design critique and a Q&A session.

• The speaker apologizes for not answering all questions in the previous week's Q&A.

Inner Circle Membership Growth

• The Inner Circle membership is growing rapidly.

• The speaker invites Inner Circle members to share their feedback with Jason.

Upcoming Events

• A new version of acss 2.5 is scheduled for release on Monday.

• A vertical header frame has been released.

• A new product add-on is coming soon.

• An exciting announcement for the Inner Circle is coming later this week.

• A new pb101 lesson on flexbox will be released tomorrow.

Web Design Critique and Q&A Session

In this section, the speaker conducts a live web design critique and answers audience questions.

Conducting Web Design Critique

• The speaker advises the audience to save their questions until after the web design critique.

• The website under review will be analyzed in-depth, including UX/UI aspects.

Answering Audience Questions

• After completing the web design critique, the speaker invites audience members to ask their questions.

• Audience members are advised not to ask their questions right away but wait until after the web design critique.

SEO and Accessibility

The speaker discusses the importance of addressing accessibility issues on a website, but notes that there are often bigger priorities to address first. They begin by evaluating a website's basic UX/UI design.

No Scroll Test

• The speaker begins with a "no scroll test" to evaluate the website's design.

• They identify an issue where an image is blending in with text, causing overlap.

• The speaker inspects the image and suggests using math calculations to set its width and protect text from overlapping it.

• Another potential solution is to put the image in a grid cell with the heading content.

Thumbnail Size

• The speaker identifies that their thumbnail appears too big on screen and suggests moving it or breaking content out of its container for better visual effect.

Understanding the Mismatch in Branding

In this section, the speaker discusses a mismatch in branding and messaging on a website. They highlight how the website claims to specialize in beautifully designed websites for small businesses in Vietnam, yet also mentions working with large global brands like Converse and Extra.

The Mismatch in Branding

• The speaker notes that there is a clear disconnect between the messaging on the website and the types of clients they claim to work with.

• They explain that many people may have worked with large brands like Converse through an agency or on a small project, but it does not mean they are actually working with those brands directly.

• The speaker questions whether the company is truly focused on helping small businesses in Vietnam or if they are trying to appeal to larger global brands.

• They emphasize that this creates a huge mismatch and confusion for potential clients visiting the website.

Wasted Opportunities on Website Copy

In this section, the speaker discusses wasted opportunities on website copy. They highlight how repeating information can be detrimental to keeping visitors engaged.

Repeating Information

• The speaker points out that repeating information is a common issue they see when reviewing websites.

• They use an example of how one sentence was repeated twice within two elements (heading and lead paragraph), which could have been used as an opportunity to provide more compelling information instead.

• The speaker encourages providing visitors with more reasons to stay engaged by giving them something new and interesting to read.

Scalability Issues with Design Effects

In this section, the speaker discusses scalability issues with design effects. They highlight how certain design effects may not be scalable and can cause issues when applied to other elements.

Underline Dark Class

• The speaker examines a design effect on the website that underlines text using an "underline dark" class.

• They note that while the effect works well on the specific word it was designed for, it may not be scalable to other elements or words on the website.

• The speaker emphasizes the importance of creating scalable design effects to avoid issues in the future.

Thinking Ahead as a Developer

In this section, the speaker emphasizes the importance of thinking ahead as a developer and considering physical limitations when designing web pages.

Importance of Considering Physical Limitations

• As a developer, it is important to think ahead and consider physical limitations when designing web pages.

• There are multiple ways to achieve the same visual effect in web design or development, but some methods are objectively better than others.

• Developers should use their experience to weigh the pros and cons of each method and choose the one with the most pros and least cons.

Copywriting for Web Pages

This section focuses on copywriting for web pages and how it can impact user experience.

Importance of Clear Copywriting

• One of the main objectives of copywriting is to let people know they're in the right place and that you work with them.

• It's important to have clear copywriting that lets users know if your website is relevant to them.

• A lack of clarity in copywriting can lead to confusion about whether your website is a good fit for users.

Accessibility Issues on Web Pages

This section discusses accessibility issues on web pages, specifically related to sliders.

Accessibility Issues with Sliders

• The slider on this website is almost certainly not accessible because there are no controls for keyboard navigation.

• Users must have a mouse to navigate through the slider, which creates accessibility issues.

• Developers should ensure that all components on their websites are accessible for all users.

Layout Issues on Web Pages

This section focuses on layout issues on web pages and how they can impact user experience.

Importance of Visual Balance

• The layout of a web page is important for creating visual balance and ensuring that users have a good experience.

• In this example, there is an issue with the layout of a slider component that creates an off-balance visual effect.

• Developers should ensure that all components on their websites are visually balanced and contribute to a positive user experience.

Introduction

In this section, the speaker talks about the importance of having a clear identity for global brands and companies.

Importance of Identity

• Global brands and companies need to have a clear identity.

• Skills, culture, and capabilities are important for establishing an identity.

Design Issues

In this section, the speaker discusses design issues related to buttons and badges on a website.

Button Design Issues

• Buttons and badges look too similar.

• There are no hover effects to indicate that some elements are clickable while others are not.

• Simple fixes can be made by changing color palettes and adding hover effects.

Scalability and Maintainability

In this section, the speaker emphasizes the importance of scalability and maintainability in website design.

Naming Conventions

• Literal color names should not be used in variables or classes.

• Brands change their colors frequently, so using literal color names can cause problems when updating websites.

Scalable Website Design

• Websites should be designed with scalability in mind.

• Identifying problems is easier when websites are scalable.

• Problems can be solved quickly when websites are scalable.

Component-Based Design

In this section, the speaker discusses component-based design principles for website development.

Repeating Elements

• Repeating elements should have consistent class names.

• This makes it easier to identify repeating elements on a website.

BEM Methodology

• The BEM methodology is useful for identifying repeating elements on a website.

Styling a Repeating Element

In this section, the speaker discusses how to style repeating elements using classes and inheritance.

Using Classes for Control

• The speaker identifies an element that needs styling and notes that it does not have a class.

• The speaker adds a class to the element and notes that all similar elements can now be styled equally.

• The speaker explains the importance of having a class for every element in a block to have unlimited control over styling.

Inspecting Elements for Custom Styling

• The speaker inspects a repeating element and identifies its classes.

• The speaker notes that there are potentially 15 elements that need custom styling, which can increase with more pages on the website.

• The speaker demonstrates changing the background color of an element using CSS variables but encounters issues with padding and border radius.

Challenges with Inheritance

• The speaker notes that changing one design decision can require changes to multiple elements.

• The speaker attempts to use inheritance but finds it difficult due to utility classes littered throughout the codebase.

• The speaker concludes by stating that this is a nightmare scenario where living in "Trumpville" feels like.

The Importance of Using Variables in Class

In this section, the speaker emphasizes the importance of using variables in class and avoiding pure utility class frameworks.

Use Variables in Class

• Using variables in a class can make life fantastic.

• Avoid using pure utility class frameworks as there are variables to consider.

Accessibility Issues on the Website

This section focuses on accessibility issues found on the website, including semantic inaccuracies and potential problems with tab navigation.

Tab Navigation Issues

• There is no visual indication that links are clickable.

• Hover effects need to be added to everything that can be interacted with.

• There is no way to know if a menu can be opened or not.

• The image and heading both link to the same place, which violates accessibility rules.

Semantic Inaccuracies

• Headings are not headings, and text is divs.

• There are many semantic inaccuracies present on the website.

Slider Accessibility Violations

This section discusses accessibility violations found within the slider component of the website.

Linking Violation

• The image and heading both link to the same place, violating accessibility rules.

General Rule for Building Websites

This section highlights an important rule when building websites - crossing T's and dotting I's.

Cross T's Dot I's

• When building websites, it is essential to cross T's and dot I's.

Clickable Parent Technique

In this section, the speaker talks about a technique called clickable parent that extends the clickable area of a heading to the entire card. The speaker also explains how to set up a unique clickable area for badges using this technique.

Extending Clickable Area

• Use clickable parent technique to extend the clickable area of headings to the entire card.

• Set heading position relative and it will elevate itself above the clickable area as its own unique clickable area.

• People can still tab through links just fine with this technique.

Learning Clickable Parent Technique

• Go to the speaker's channel and look up "clickable parent" for more information.

• There are two dedicated videos on this topic and multiple demonstrations throughout frames and cards.

• This is a key technique for doing cards correctly.

Semantic Issues in HTML

In this section, the speaker discusses semantic issues in HTML related to sections, articles, and asides. The speaker clarifies what an article means in semantic HTML and recommends keeping sections as sections instead of changing them into articles.

Sections vs Articles

• Sections represent generic standalone content without a specific semantic element to represent it.

• Articles could be standalone pieces of content that make sense in different contexts like blog articles.

• Keep sections as sections instead of changing them into articles unless they are standalone pieces of content like blog articles.

Asides

• Asides are content that is tangentially related to other content on the page.

Slider Semantics

In this section, the speaker inspects a slider's semantics and discovers some semantic issues with it. The speaker questions why every slide is considered a section when they could be considered articles instead.

Semantic Issues with Sliders

• Every slide is considered a section, but they could be articles instead.

• Articles are more appropriate than sections in this case because they are standalone pieces of content that make sense in different contexts.

• The speaker will reference the official documentation to see if there is a unique use case where sections make more sense inside of a slider than an article.

Violating HTML Spec

In this section, the speaker discusses how using sections instead of articles violates the HTML spec. The speaker recommends checking the official documentation to see if there is a unique use case where sections make more sense inside of a slider than an article.

Violating HTML Spec

• Using sections instead of articles violates the HTML spec.

• Sections represent generic standalone content without a specific semantic element to represent it.

• Articles could be standalone pieces of content that make sense in different contexts like blog articles.

• Check the official documentation to see if there is a unique use case where sections make more sense inside of a slider than an article.

Semantic HTML and Accessibility Issues

In this section, the speaker discusses the importance of using semantic HTML to maintain accessibility and scalability on a website. They highlight issues with using non-semantic elements like divs for text and explain how it downgrades the semantic value of a website.

Importance of Semantic HTML

• Using semantic HTML is crucial for maintaining accessibility and scalability on a website.

• Non-semantic elements like divs should not be used for text as they downgrade the semantic value of a website.

Accessibility Issues

• The speaker highlights major accessibility issues with an unclickable badge on the website.

• The entire card should be clickable using clickable parent technique to avoid such issues.

Scalability and Maintainability Issues

• The speaker explains that using an element like a slider without proper auditing can lead to major scalability and maintainability issues.

• It is important to check these things before adding them to your website.

Show Me Your DOM!

In this section, the speaker emphasizes the importance of inspecting the DOM of a website to ensure its semantic HTML, accessibility, scalability, and maintainability are up to par. They use an example of a visually appealing but poorly constructed website built in Bricks page builder.

Inspecting DOM

• Inspecting the DOM is crucial for ensuring that a website's semantic HTML, accessibility, scalability, and maintainability are up to par.

• A visually appealing website may have major issues under the hood.

Example Website Built in Bricks Page Builder

• The speaker uses an example of a visually appealing but poorly constructed website built in Bricks page builder to highlight the importance of inspecting the DOM.

• The website has major accessibility issues and scalability and maintainability issues despite being built in a page builder with clean HTML output.

Importance of Good UX/UI

• The speaker emphasizes that a website must have good UX/UI, good copy, and semantic HTML, accessibility, scalability, and maintainability to be successful.

• A website cannot just look good on the surface; it must also function well under the hood.

Utility Classes and Self-Defense in Web Design

In this section, the speaker discusses the importance of avoiding littering utility classes everywhere and using BEM classes instead. They also emphasize the need for good self-defense skills when dealing with clients like Bev.

Avoid Littering Utility Classes

• The speaker advises against littering utility classes everywhere.

• Using utility classes for repeating elements can make updating them a nightmare.

• The speaker recommends using BEM classes instead to avoid hating your life.

Self-Defense Skills Against Clients Like Bev

• The speaker emphasizes the need for good self-defense skills when dealing with clients like Bev.

• Dealing with clients like Bev can be a nightmare, especially when updating repeating elements.

Q&A Session

In this section, the speaker opens up a Q&A session and provides an overview of topics that can be asked about.

Topics That Can Be Asked About

• Business-related questions such as agency/freelance questions, sales/pricing/client management workflow.

• Best practices related to page building 101, content creation, automatic CSS and Frames related questions, bricks questions in general, SEO questions marketing questions.

Answering Questions

• The speaker promises to answer as many questions as possible without leaving any crumbs behind.

• The audience asks about SEO strategies for targeting a nationwide audience, and the speaker advises that it is difficult to rank for generalized terms like "web developer" as Google has already identified them as localized search terms.

Understanding Localized vs National SEO

In this section, the speaker explains how Google determines whether a search term is localized or national and how businesses can optimize their SEO strategy accordingly.

Localized vs National Search Terms

• Google identifies certain search terms as localized and others as national based on the intent of the searcher.

• For example, "roofing contractors" is a localized search term because people want to find local companies that can serve their area.

• On the other hand, "roofing shingles" is a national search term because people don't care where the shingles come from.

• Businesses need to figure out which terms they can rank for globally and which ones are only relevant in certain areas.

Importance of Service Area Pages (SAP)

• SAP strategy is valuable for businesses targeting localized terms because they need to rank for those terms in individual areas.

• By creating service area pages, businesses can optimize their SEO strategy for specific locations.

Factors Affecting National Rankings

• When trying to rank nationally or globally, competition increases significantly.

• The speaker emphasizes that domain authority plays a crucial role in ranking for national or global terms.

• Other factors such as business age and industry also affect rankings.

Utility Classes vs Tokens

In this section, the speaker discusses utility classes and tokens in CSS frameworks and why tokens are more important for scalable and maintainable sites.

Limitations of Early CSS Frameworks

• Early CSS frameworks like Oxy Ninja (now Core) lacked variables/tokens.

• Without tokens, developers were forced to use utility classes instead of styling everything at the ID level.

Importance of Tokens

• Tokens are more important than utility classes for scalable and maintainable sites.

• While utility classes can be helpful in certain situations, tokens are the most crucial element for creating a scalable and maintainable site.

Creating User-Adjustable Frameworks

In this section, the speaker talks about creating user-adjustable frameworks and scalable typography and spacing using mathematical scales.

User-Adjustable Frameworks

• Prior to the creation of user-adjustable frameworks, there were no tools available for users to adjust frameworks.

• The speaker created a tool that allows users to adjust frameworks based on their needs.

• The use of scalable typography and spacing on mathematical scales was also introduced.

Workflow Improvement

• The introduction of user-adjustable frameworks has greatly improved workflow.

• It takes one website to get the hang of it, two websites to enjoy it, and three websites to realize that you can never build a website without it again.

Increasing Website Sales

In this section, the speaker discusses how freelancers can increase their website sales by setting goals and improving their sales skills.

Setting Goals

• Freelancers should aim to increase their website sales by setting achievable goals.

• The first goal is to increase sales from $500 per website to $1500 per website.

• Once this goal is achieved, freelancers should aim for $2500 per website, then $5000 per website, then $10,000 per website.

Improving Sales Skills

• To achieve these goals, freelancers need to improve their sales skills.

• This includes being able to ask the right questions during phone calls with potential clients.

• Freelancers should also be confident in discussing prices and outlining their process.

• Effective sales calls involve pushing back in the right areas and bracketing people effectively.

Sales Call Training

In this section, the speaker talks about how to confidently lead people through a sales call and overcome mental and emotional barriers that may be holding you back from charging higher prices.

Tips for Leading a Successful Sales Call

• Use the Inner Circle training of checkpoints to guide your sales call.

• Be interactive with potential clients by discussing topics important to them.

• Practice leading sales calls with others or record yourself to improve your skills.

• Overcome mental and emotional barriers that may be holding you back from charging higher prices.

Pricing Strategies

• You can charge $2,500 for a website without learning any additional sales techniques.

• Confidence in your pricing is key to success in landing higher-paying projects.

Bi-directional Relationships and Bricks Forms

The speaker discusses the limitations of bi-directional relationships in Bricks forms and emphasizes the importance of investing in professional form plugins.

Best Practices for Bi-directional Relationships

• More clarity is needed on what specific limitations are being faced with bi-directional relationships in Bricks forms.

Importance of Professional Form Plugins

• Native form builders like Elementor's or Bricks' are limiting compared to professional form plugins like WS Form.

• Investing in a professional form plugin ensures scalability, maintainability, process efficiency, and workflow organization.

Oxygen vs. Bricks Forms Controversy

The speaker addresses the controversy surrounding Oxygen's lack of native forms and explains why investing in professional form plugins is crucial for successful web development.

Importance of Professional Form Plugins

• Oxygen made the right decision by not including native forms because they are complex and require specialized knowledge.

• Using native form builders like Elementor's or Bricks' is limiting and inefficient.

• Investing in a professional form plugin like WS Form ensures scalability, maintainability, process efficiency, and workflow organization.

Wearing Headphones While Recording

The speaker explains why they wear headphones while recording videos.

Reasons for Wearing Headphones

• Allows the speaker to hear themselves while recording.

• Enables the speaker to hear sound effects and other audio during recording.

• Avoids the need to take headphones on and off during recording.

Workflow Efficiency in Web Development

The speaker emphasizes the importance of workflow efficiency in web development and how using multiple tools can hinder scalability and maintainability.

Importance of Workflow Efficiency

• Using multiple tools for different projects leads to spaghetti-like processes that are difficult to organize and scale.

• Consistently using one tool, such as Oxygen or Bricks, improves workflow efficiency and enables successful team building.

Process and Workflow Efficiency

In this section, the speaker emphasizes the importance of having a process and workflow around tools used in web design. The speaker uses the analogy of building with bricks to explain how using a consistent form system can improve efficiency.

Importance of Consistent Form System

• Using a consistent form system improves efficiency and reduces errors.

• WS Form is the go-to form system for the speaker's team.

• WS Form integrates with various other tools such as ConvertKit or ActiveCampaign.

• Picking a tool that integrates with all necessary tools avoids inefficiencies caused by switching between different systems.

Cost of Tools

• Clients pay for plugin licenses through management fees, so it's important to use consistent tools across all clients.

• Viewing tools as costs is "poverty thinking." Instead, they should be seen as investments that enhance workflow and increase profitability.

Importance of Managing Websites

• Handing off websites to clients without proper management creates inefficiencies and errors. It's important to actively manage websites to ensure consistency and avoid mistakes.

SEO Implications of Website Changes

In this section, the speaker discusses the importance of understanding the SEO implications of website changes and who is responsible for them.

Understanding SEO Implications

• Every change made to a website, including headings, text, and images, has SEO implications.

• Clients may not understand how these changes can impact their conversion rates.

• The responsibility for SEO results should be clearly defined between the client and professional.

Responsibility for Analytics

• The professional should take responsibility for any negative impacts on analytics resulting from website changes.

• Clients need to be willing to accept this responsibility when hiring a professional.

Managing Websites

• The speaker does not advocate for handing off websites to clients or allowing them to make substantial changes.

• Clients can manage inconsequential aspects of their website, such as employee profiles.

• Professionals should advise clients on how best to approach changes and take full responsibility if things go wrong.

Professionalism in Web Design

• There is no licensing or institutionalization in web design like there is in other industries such as law or medicine.

• Professionals must set their own standards and take responsibility for their work.

Exciting Announcement Coming Soon

In this section, the speaker briefly mentions an upcoming announcement but provides no further details.

Upcoming Announcement

• The speaker has an exciting announcement coming soon but cannot provide any further details at this time.

Bricks Elements and Semantic HTML

In this section, the speaker talks about Bricks elements and semantic HTML. They discuss whether Bricks has the right Aria labels for Ari expanded and other things. The speaker also talks about how proper semantic HTML helps with SEO.

Bricks Elements

• The accordion element in Bricks is not easy to use as it cannot be opened with keyboards.

• The speaker stopped using Bricks elements because they have been working on frames elements. They are now using the frames accordion, modal, table of contents, etc.

Semantic HTML and SEO

• Proper semantic HTML helps with SEO.

• Heading tags like H1 have more value than H3 or H4 tags.

• Changing heading tags to divs can impact SEO negatively.

• Bots crawling a page look for tags of value like headings, lists, sections, articles, etc., to figure out the content.

• Accessibility is important for both SEO and accessibility purposes.

• Google prioritizes accessible websites over inaccessible ones as it wants to provide the best experience to users.

General Padding Gutter Settings

In this section, the speaker talks about general padding gutter settings that work on most websites. They discuss whether one can create a clamp for gutters and use that over and over on all websites.

General Padding Gutter Settings

• There's nothing stopping one from creating a clamp for gutters and using that over and over on all websites.

• Design determines what general padding gutter settings to use.

Balance and Automatic CSS

In this section, the speaker talks about how to change ratios in design and the benefits of using automatic CSS.

Changing Ratios in Design

• When doing your own designing, you can use the same spacing on every website.

• Automatic CSS is designed as a framework for custom-built websites with no limitations.

• You never see a clamp function when using automatic CSS.

• You just set minimums and maximums and adjust them freely however you want.

Benefits of Using Automatic CSS

• You can set overrides for things very freely.

• Minimums and maximums hit save, and you're done move on with your life.

• You just see variables on the front end so that you're just using tokens to reference everything.

• You can make changes on the fly with automatic CSS without generating a single clamp function ever again in your life.

Canvas Size for Each Breakpoint

In this section, the speaker explains how to decide what canvas size should be used in bricks for each breakpoint.

Deciding Canvas Size

• The breakpoint is most likely to break things one pixel below where it starts.

• It's most likely to break things one pixel above this breakpoint 992.

• Go into Excel and click on this breakpoint right here.

• Set the Builder width of what we're actually previewing to one pixel above the next breakpoint down.

• This would be 992.

• Then come into this breakpoint right here which is 991 but I see right there it's showing 768 one pixel above the next breakpoint.

Proper Semantic HTML

In this section, the speaker discusses proper semantic HTML.

Proper Semantic HTML

• The speaker mentions getting penalized if proper semantic HTML is not used.

• The speaker does not care what other page builder people do.

Teaching Jiu Jitsu to the Highest Standard

In this section, the speaker talks about teaching Jiu Jitsu to the highest possible standard and encourages people to do their due diligence when choosing who to learn from.

Importance of Due Diligence

• The speaker emphasizes the importance of doing due diligence when choosing who to learn from.

• People should look around and see what options are available and determine if what is being taught makes sense.

• It is important to objectively evaluate whether there are any problems with what is being taught.

Using Tailwind in Page Builders

In this section, the speaker discusses using Tailwind in page builders and why it may not be a good idea.

Problems with Using Tailwind in Page Builders

• The speaker identifies that using Tailwind in page builders can lead to problems with scalability and maintainability.

• The tools available in a code editor, such as multi-cursor editing and search capabilities, are not available in page builders which makes using Tailwind difficult.

• The article written by the speaker provides quotes from the creator of Tailwind that demonstrate why it should not be used in page builders.

Dealing with Criticism

In this section, the speaker talks about dealing with criticism regarding his opinions on certain topics.

Responding to Criticism

• Despite providing objective arguments against using Tailwind in page builders, some people still resorted to name-calling instead of refuting his points.

• The speaker clarifies that he has nothing against Elementor or the people who work for it, but rather focuses on the objective reality of the DOM.

Professional Workflow Best Practices

In this section, the speaker emphasizes the importance of professional workflow best practices and personal growth. He also discusses how content creators can learn from others and improve their techniques.

Acknowledging Knowledge Gaps

• The speaker acknowledges that he had to watch other creators to realize his knowledge gaps in accessibility.

• He uses the example of Jiu Jitsu practitioners who learn from each other's techniques to improve their skills.

• The natural progression is to incorporate what works better into one's own work and teach it to others.

Custom Post Types and Taxonomies

• The speaker provides an example of how custom post types and taxonomies are used in their documentation website.

• A shared taxonomy is needed when a website requires multiple sections with similar categories.

• Blog posts may not necessarily use the same taxonomy as other sections on a website.

Standard Blog Categories vs Custom Taxonomies

In this section, the speaker explains how standard blog categories differ from custom taxonomies and when to use them.

Determining When to Use Custom Taxonomies

• Custom taxonomies should be used when a website requires multiple sections with similar categories.

• Blog posts may not necessarily use the same taxonomy as other sections on a website.

Example of Shared Taxonomy

• The speaker provides an example of how they use shared taxonomies for their documentation website.

• Framework categories are used for both utilities and documentation pieces because they share similar categories.

Taxonomies and Architecture

In this section, the speaker discusses how taxonomies come into play in website architecture. They suggest mapping out the organization of the site using tools like Whimsical to determine if different sections should share a taxonomy or have their own.

Mapping Out Website Architecture

• Use tools like Whimsical to map out the organization of your website.

• Determine if different sections should share a taxonomy or have their own based on whether their terms overlap.

• If terms overlap, they should share a taxonomy. If they are completely different, they need their own taxonomy.

WP Code Box and CSS Variables

In this section, the speaker answers a question about using WP Code Box for custom CSS variables. They explain that while it's not necessary, it can make your life easier by providing features like automatic CSS integration and SAS functionality.

Using WP Code Box for Custom CSS Variables

• You don't need WP Code Box to create custom CSS variables in Brick settings.

• WP Code Box provides features like automatic CSS integration and SAS functionality.

• With WP Code Box, you can access internal components of automatic CSS that most other people don't have access to, such as functions and mix-ins.

• Mix-ins are important because they allow you to write media queries without needing to know the values of breakpoints.

Using Breakpoints and Custom Code with WP Code Box

In this section, the speaker explains how to use breakpoints and custom code with WP Code Box.

Breakpoints and Media Queries

• Use "breakpoint up" instead of "breakpoint" to create a Min with media query.

• Writing media queries from scratch requires knowledge of all breakpoints values.

• WP Code Box allows you to write media queries easily by just knowing your token (XL, LMS, etc.).

Fluid Text and Fallbacks

• Include fluid text in WP Code Box.

• Add raw value, Min, Max to write font sizes with fallbacks into your custom CSS.

Creating Custom Buttons

• Use "include button defaults" to include all default styling for buttons.

• Add additional styling to make it a custom button.

Advanced Helper Functions

• WP Code Box has advanced helper functions for users who want more control over their CSS.

• Users can hook into internal variables and SAS variables for more power.

Adapting Frames Exclusively with ACSS

In this section, the speaker explains that frames are adaptable exclusively with ACSS.

ACSS Scalability and Maintainability

• Frames work exclusively with ACSS because it makes them scalable and maintainable.

Sales as a Dirty Word

In this section, the speaker discusses sales as a dirty word.

Perception of Sales

• Sales can have negative connotations in some contexts.

• The speaker acknowledges that teaching sales comes with caveats due to its negative perception.

Discovery Packages for Clients

In this section, the speaker explains what a discovery package is and how it varies for each client.

Discovery Packages

• Discovery packages are tailored to each client's needs.

• Clients may require different services such as website design, PPC campaigns, analytics, and SEO.

• The speaker uses discovery packages to determine what the client needs from them.

Leading Clients Through Workbooks

In this section, the speaker discusses leading clients through workbooks.

Workbook Training

• The speaker provides training on how to lead clients through workbooks.

• Workbooks help gather valuable insights for copywriting and messaging.

• Keyword research is an important part of the discovery package.

Training for Discovery

In this section, Kevin discusses the training available for Discovery and how to determine what a client needs.

Available Trainings

• There are trainings available in the Inner Circle for various aspects of Discovery, such as copy and messaging workbook and keyword research.

• The trainings cover everything related to Discovery that can be trained on.

Determining Client Needs

• It is up to the individual to determine what kind of discovery package a client needs based on their requirements.

Microphone Setup Equipment

In this section, Kevin explains his microphone setup equipment and how it is connected to his Apple computer.

Microphone Setup Equipment

• Kevin uses a Shure sm7b microphone attached to a Canon R6 camera.

• The camera is mounted on a Manfrotto multi-arm attached to his desk.

• He has two monitors, three lights, and an Elgato HD converter thing all attached directly to his desk.

• The audio from the microphone goes into a Road Caster Pro 2 which makes switching between microphones easy.

• He also has an Elgato stream deck which he uses for switching between screens and cameras.

Recording Setup

• Kevin's recording setup takes only 30 seconds to set up due to everything being attached directly to his desk.

• He uses Ecamm Live Pro software for recording with minimal editing required.

Querying Custom Posts

In this section, the speaker discusses how to use a query for custom posts that are related to each other.

Bi-Directional Relationships

• Bi-directional relationships can be used to relate countries and coffee beans as custom post types.

• Custom field data can still be pulled when using bi-directional relationships.

• Limitations include not being able to control the order or number of things queried.

Bricks 1.8 Menu Update

The speaker talks about the current state of Bricks 1.8 menu update and how it is not implementing properly with the native WP menu editor.

Solution for Bricks 1.8 Menu Update

• Bricks actors have already solved this problem by creating something called a slide menu.

• The speaker suggests that Bricks can easily do the same thing to solve this problem.

Tutorials on WS Forum, Postmark, and Active Campaign

The speaker responds to a question about making tutorials on using WS Forum, Postmark, and Active Campaign.

Tutorial on WS Form

• The speaker will make a tutorial on WS Form but needs examples from people on what they want to see in the tutorial.

Tutorial on Postmark

• The speaker will definitely make a tutorial on Postmark.

Clamp Calculator in WS Form

In this section, the speaker demonstrates how he built a clamp calculator in WS Form.

Clamp Calculator

• A clamp calculator was built for people who need to use it because they don't have any better options.

• Users put in their minimum and maximum values and get a live clamp function generated for them.

Building the Clamp Calculator

• Radio options were used to give a value to each option.

• The speaker divided values by 16 if the user chose 100% and by 10 if the user chose 62.5%.

Creating Multi-Column Layouts with WS Form

In this section, the speaker demonstrates how to create multi-column layouts using WS form. The speaker explains that it is easy to create multi-column layouts by dragging a handle and choosing the number of columns.

Creating Multi-Column Layouts

• To create multi-column layouts in WS form, drag the handle and choose the number of columns.

• It is possible to put three fields on a line or separate forms into sections easily.

Using WS Form for Advanced Calculations

In this section, the speaker discusses how he used WS form for advanced calculations. He explains that although the UX is not beautiful, it has undeniable functionality.

Advanced Calculations with WS Form

• WS form can handle advanced calculations such as slope calculation and intercept calculation.

• The speaker copied all of his work straight out of automatic CSS when he was creating automatic CSS long ago.

• The fact that ws form calculates on-the-fly is just a feature of ws form.

Outputting Values with WS Form

In this section, the speaker talks about outputting values with WS form and how it handles calculations.

Outputting Values with WS Form

• To output values in ws form, add tokens and do some math calculations.

• Ws form calc fields automatically calculate on-the-fly without submission or anything else.

Building a Form with WS Form

In this section, the speaker explains how to build a form using WS Form. The speaker covers the consent checkbox, opt-in options, and submission actions such as saving submissions to the database, showing confirmation messages, sending emails, and adding data to Google Sheets.

Consent Checkbox and Submission Actions

• A consent checkbox is included in the form.

• Users can choose whether they want to opt-in or not.

• The date of submission is recorded and passed on.

• Submissions are saved to the database.

Confirmation Messages and Emails

• A confirmation message is shown after submission.

• The confirmation message can be edited by clicking on it.

• An email is sent after submission.

• The email is sent from the admin email address.

• The person who submitted the form receives an email notification.

Adding Data to Google Sheets

• All data from submissions are added to a Google Sheet.

• First name goes into a column called "name."

• Email addresses go into a column called "email."

• URLs go into a column called "site."

• Dates go into a column called "date."

Integrating with ConvertKit

• Email addresses can be added to ConvertKit using WS Form.

• Opt-in fields can be used for confirmation if desired.

• First names map over to first names in ConvertKit

while emails map over to emails.

Dealing with Negative Feedback Online

In this section, the speaker discusses how he deals with negative feedback online. He shares his thoughts on debate and logical arguments versus name-calling and dismissive comments.

Handling Negative Feedback Online

• Speaker enjoys hearing people's arguments for things through debate.

• Frustration arises when people call names or make up non-existent claims.

• Speaker dismisses comments that are not logical arguments.

• He likes to play with them a little bit before dismissing them.

• Speaker does not lose sleep over negative feedback.

The Importance of Using Best Practices

In this section, the speaker discusses the importance of using best practices in web development and how it can lead to better results.

Benefits of Using Best Practices

• The speaker highlights that using best practices is important because it helps to avoid problems and ensures that techniques are effective.

• He explains that he has debated various topics related to web development and found that certain techniques work better than others. Therefore, he recommends following these best practices.

• The speaker mentions that he welcomes reasoned counterarguments as they can lead to exciting discussions.

Jet Engine vs Metabox for Brix Builder

In this section, the speaker discusses whether Jet Engine or Metabox is a better option for Brix Builder.

Comparison between Jet Engine and Metabox

• The speaker admits that he has never used Jet Engine before, so he cannot provide an objective comparison between the two options.

• He does not have any preference between the two options since he has not used Jet Engine before.

Frames vs Bricks Extras

In this section, the speaker compares Frames with Bricks Extras and explains why Frames is critical to people's workflow.

Why Frames is Critical to Workflow

• The speaker acknowledges that Bricks Extras is a great product but believes that Frames is more critical to people's workflow since it speeds up website building by 50% - 60%.

• He argues that relying on Bricks Extras for individual components like sliders or menus does not make sense from a workflow standpoint. Instead, Frames should handle all these components to ensure a smooth workflow.

• The speaker notes that Frames will compete with Bricks Extras but emphasizes that he has nothing but respect for the development team behind Bricks Extras.

The Value of Time and Expenses

In this section, the speaker discusses the importance of valuing one's time and how successful people view expenses.

Valuing Time

• The speaker suggests that if someone values their time at $50 an hour, using automatic CSS on a website can pay for itself in just three hours of work.

• The speaker gives an example of paying someone to mow their lawn instead of doing it themselves. They explain that even if their time is worth $100 an hour, spending two hours mowing the lawn would result in a loss compared to paying someone else to do it.

Successful People's View on Expenses

• The speaker explains that successful people have a different way of looking at expenses. They weigh options and prioritize based on what will allow them to do more.

• The speaker emphasizes that expenses should be viewed as investments in productivity rather than just raw numbers.

Basic SEO Tips for New Niches

In this section, the speaker provides tips for doing basic SEO research when working with a new niche.

Doing Competitor Research

• The speaker suggests doing competitor research to see what successful people are doing in the industry for SEO.

• There are techniques for doing SEO research where you can say "I don't really know what I'm going to find but I know how I'm going to find it."

Investing in SEO Tools

• The speaker emphasizes investing in SEO tools such as Ahrefs, which costs $179 per month. They explain that these tools are necessary for successful SEO and should be viewed as investments in productivity.

The Value of SEO Tools

In this section, the speaker talks about the value of SEO tools and how they can provide tremendous insight into a website's content.

Importance of Knowing SEO Techniques

• The speaker emphasizes that anyone can do SEO for any industry as long as they know the techniques and methodology.

Automatic CSS Updates

• The speaker confirms that version 2.5 coming out next week will have everything switched over to logical properties, including automatic CSS updates.

• Building a framework with just pure CSS is not recommended, as it requires thousands of hours invested and knowledge of SAS.

Q&A Session

• The speaker plans to continue doing Q&A sessions on WDD Live every week because many people have questions.

• Container queries are coming to CSS soon, which will allow components to look different in containers of different sizes. This will require page builders and frameworks to figure out how to manage it easily.

The Importance of Frameworks and Automatic CSS

In this section, the speaker discusses the importance of frameworks and how they impact decision-making. They also talk about the benefits of using automatic CSS.

Frameworks and Lock-In

• Frameworks are influential in decision-making.

• Different opinions on using one framework versus another can lead to a lack of lock-in.

Benefits of Using Automatic CSS

• Automatic CSS allows users to create grids for days in Bricks even though the Builder didn't have any grid controls.

• ACSS allows users to use logical properties in their workflow in Bricks, even though Brix does not use logical properties.

• Logical properties are the new standard going forward, so it's important to use a framework that keeps up with standards.

• ACSS is known for its attention to detail, constant education, and innovation.

The Future of ACSS

In this section, the speaker talks about how ACSS is ahead of other frameworks and what sets it apart from others.

Staying Ahead with Container Queries and Subgrid

• ACSS will be first to the forefront with things like container queries and subgrid.

• There's no limit to what's possible with ACSS.

Latecomers Will Always Be Behind

• Latecomers will always be behind because ACSS is already working on the next thing.

• Other framework developers may struggle to keep up with ACSS's constant innovation.

Using ACS on Static Sites

In this section, the speaker talks about using ACS on static sites and the current focus of the ACSS team.

ACS on Static Sites

• ACS was built to be Builder agnostic and actually work without a page builder whatsoever.

• The current focus of the ACSS team is dominating the page builder world.

Future Plans for ACS

• Once they're done dominating the page builder world, they will create a way for people to use ACS easily on static sites.

Scoping a Project

In this section, the speaker discusses the importance of scoping a project and getting enough details from clients to avoid disaster scenarios.

Importance of Detailed Scoping

• Clients may have different ideas for what they want in a project, so it's important to get detailed information from them.

• Developing against a global concept is not possible. Features and functionality need to be developed based on specific requirements.

• Lack of details can lead to incorrect scoping, which can result in an absolute disaster scenario where the project needs all these things that were not communicated ahead of time.

Asking Enough Questions

• It's important to ask enough questions when someone tells you what they want in terms of something like buying a bus ticket with a calendar.

• Scoping out such projects requires more detail than just creating a new marketing website.

Conclusion and Next Steps

The speaker concludes the session and provides information about their next appearance.

• The viewership was fantastic, and the questions were great.

• The speaker will be back next week but might miss one session due to closing on a house in Florida.