Posts categorized as Definitions

A common assumption that I and many others make is that WordPress is primarily for blogging. However, WordPress has diversified with themes and plugins, so “you can create any type of website with WordPress.” Today, WordPress drives 43.5 percent of all websites. Organizations like the White House and Microsoft use WordPress websites. Furthermore, the platform’s expansion has made it the most popular method for setting up an e-commerce store (Kinsta, 2024).

Web designers have two choices when creating a website: build from the ground up or use a content management system (CMS), a type of software, like WordPress. Using a CMS is often quicker and less technically difficult of the two. For instance, a user can bypass learning extensive coding and build a website through a WordPress Editor graphical user interface. A CMS allows users to make, distribute, and administer a website (Morris).

There is WordPress.org and WordPress.com online. WordPress.org, the free and self-hosted one, is open-source software that lets web designers create a website that is theirs. WordPress.com offers a simple, commercial service run by WordPress.org, but with fewer options. Of the two, most people associate the term ” WordPress” with the organization. Usually, using WordPress.org is the best choice for complete control of your website.

Matt Mullenweg and Mike Little worked together to create the earliest version of WordPress in 2003. Mullenweg became WordPress’s figurehead and later founded the commercial WordPress.com. Because of the software’s open-source nature, WordPress has had countless contributors over the years.

Reasons to Use WordPress

• You might have to pay to host your site, but if you use WordPress.org, you will not need to pay anything to use this free and open-source software. Many plugins and themes are free as well.
• WordPress is highly expandable. You can easily alter your website by changing the theme (or how the website appears) by adding plugins, which manage a site’s functions. Plugin abilities range from adding a form, overviewing your website’s SEO, or creating an e-commerce shop.
• WordPress is easily installable on your web host or your personal computer. Many web hosts can preinstall WordPress or offer an easy-to-understand guide. The advantages of installing WordPress on a local network include creating a new website, making alterations without online exposure, or adding a plugin/theme without breaking a website.
• WordPress’s flexibility allows you to create any website you imagine. Website creators can add plugins to enable their site’s functionality.
• The WordPress community offers help whenever you run into problems. Resources include forums, blogs, tutorials, and social media groups (Kinsta, 2024).

References

Kinsta. (2024, May 24. What is WordPress? Explained for beginners. https://kinsta.com/knowledgebase/what-is-wordpress/

Morris, S. (n.d.) Tech 101: What is WordPress? Skillcrush. https://skillcrush.com/blog/what-is-wordpress/

A wireframe serves as the blueprint of website design. It shows the features and navigation of a website and overviews the “site’s functionality before considering visual design elements, like content and color schemes.” Wireframes consider navigation elements like buttons and menus (Osman, 2021). They establish relationships among the site’s different templates. Primarily, a wireframe focuses on expected behaviors, functionalities, content prioritization, and space allocation. Therefore, wireframes do not typically show graphics, color, or styling. Production methods of wireframes range from digitally drawn images to paper sketches. Hence, their details vary (Usability.gov, 2022).

When designing a website, wireframes show how a website’s layout enhances user experience. Wireframes help make the design relevant to users. It is the way to bridge the gap between design and conversions. A wireframe lets you “test drive the page layout and evaluate user flows to see how the new website will function and find any potential mistakes that might eventually get in the way of conversions” (Osman, 2021).

Imagine wireframes as your guide to a new website. They show you the site’s major content and navigation elements. Wireframes are simple in design, usually black-and-white, two-dimensional, substitute gray tones for color, and use one generic font (in multiple sizes). They are straightforward because they do not focus on visual design. For example, a rectangular box with an “X” through it represents an image. Common elements included in wireframes are logos, search fields, breadcrumbs, headers, navigation systems, share buttons, body content, and contact information. We can make wireframes for a variety of devices. For example, Figure 1 shows a wireframe of the first webpage in the login process in a smartphone format.

Figure 1

Mobile Wireframe Example

Wireframes range from low fidelity to high fidelity. Website design teams often quickly sketch low-fidelity wireframes since they ease project team communication. These types of wireframes usually are more abstract because of their simplicity. They tend to include Latin filler text for labels and content. In contrast, high-fidelity wireframes are more detailed and are good for documentation. They are better at showing interactive elements than low-fidelity wireframes because they include page element information on dimensions, behaviors, and actions (Usability.gov, 2022).

Why should you use wireframes? Web designers make wireframes for several reasons, but the “most important is that it enables you to identify and take every opportunity to improve your site’s functionality, ease of use, and convenience in order to delight your users.” The design team can use wireframes to collaborate and get user feedback during the design process. Web designers can use wireframes to improve website design through user input (Osman, 2021).

Benefits of Wireframes

Wireframes

Wireframes help web designers in many ways before the design process.

• They help clarify the structure of the website. They turn abstract thoughts into tangible ideas. They help keep the development team on the same page.
•  They outline the website’s features using nonprofessional terms instead of technical jargon. Wireframes provide “clear communication to a client how these features will function, where they will appear on the specific page, and how useful they might actually be.”
• They emphasize usability by optimizing page layout, feature placement, and ease of use.
• They enhance navigation decisions. For instance, using website wireframes lets users test the new website design. They will review several elements. Does the navigation allow them to reach their destination easily? Do breadcrumbs help or hurt? Is the navigation intuitive?
• They foster an iterative design process. They break up the layout parts of the website, including functionality, branding, creativity, and layout into different steps. This division lets everyone involved in creating the new website provide feedback early in the design process. Avoiding wireframes altogether “delays this feedback and increases the costs of making changes because full design mock-ups must be reworked, not just simplified wireframes.”
• They save effort and time by allowing for a more carefully considered design and a more informed development team. With clearer content creation, wireframes simplify communication and prevent misunderstandings. Best of all, “everyone from the development team, the agency, and the client are all on the same page about what the interface is supposed to do and how it is supposed to function.”
• Wireframes improve the effectiveness of content development. Your website content must be straightforward, timely, and relevant. Since most visitors do not like to read long clunky blocks of text, we include numbered lists, bullets, heads, and fonts to create an aesthetically pleasing arrangement. Wireframing allows us to “figure out the optimal font size, head position, and content quantity by trying different options.” Finding the best formatting schemes increases your website’s persuasiveness and readability (Lynch, 2022).

References

Lynch, A. (2022, February 11). Benefits of wireframes—Reasons to use wireframes. Edraw. https://www.edrawsoft.com/benefits-of-wireframe.html

Osman, M. (2021, August 25). Website wireframe beginner’s guide: Processes, tools, and examples. HubSpot. https://blog.hubspot.com/website/website-wireframe#:~:text=What%20is%20a%20website%20wireframelike%20content%20and%20color%20schemes

Usability.gov. (2022, June 8). Wireframing. U.S. General Services Administration. https://www.usability.gov/how-to-and-tools/methods/wireframing.html

Site performance analytics cover a wide range of indicators. While I cannot cover all of them in this blog post, I will concentrate on a few, namely website traffic, conversions, and bounce rate.

Website traffic concerns the entire volume of people who visit a website. Altogether, “how many people visit a website will depend on the website’s purpose, the visitors’ goals, and the way in which they discovered the site.” Computer servers keep track of website hits, or the number of times a webpage gets visitors. However, a visitor may browse many web pages and take multiple actions. This is known as a session. Understanding website traffic is instrumental in the consistent growth of a website. Organizations can measure their website traffic in multiple ways.

• Sessions—Organizations observe session numbers over a fixed period to evaluate the effectiveness of traffic-building programs since their implementation.
• Purchase percentage—E-commerce companies that sell products on their websites depend on website traffic. Essentially, “identifying the number of visitors making a purchase reveals how effective the site is in encouraging people to buy.”
• Channels—Organizations can measure website traffic through the different channels through which it comes to the website. Channels can include organic search or email.
• Bounce Rate—Bounce rate documents the number of visitors who leave a website after viewing only one webpage. The lower the bounce rate the better (Airfocus).

Conversions are the actions of website visitors. Actions may include buying a product or signing up for a newsletter (Shiatis). By themselves, conversions offer little context. Instead, companies use key performance indicators (KPIs) to turn conversions into meaningful information. For example, Google Analytics has a Conversions section that allows users to see the KPIs. Conversions use several KPIs, including conversion rate, the total number of conversions, cost per acquisition (CPA), conversion value, and conversion ROI (Kotilla, 2021).

• The conversion rate is the number of conversions/the number of visitors. For example, if 1,000 users visit the website in January and 120 buy a new product, you have a conversion rate of 12 percent. This “metric matters because the number of visitors to your website is going to go up and down, depending on market conditions, the time of year, and whatever marketing efforts are sending them to the website.” Focusing on the number of conversions alone is not meaningful if it does not consider other factors. Making changes to a website usually involves improving the conversion rate by encouraging more users to convert or increasing a website’s usability (Beasley, 2013, p. 52-53). The conversion rate gauges the performance of landing pages and advertisement campaigns.
• The total number of conversions is the simplest KPI. It usually involves collecting one or two conversion types over a specific period. Some organizations find it helpful to track conversions by type.
• The cost per acquisition (CPA) equals the cost per conversion. In other words, how much did an organization pay per conversion? The CPA is determined by the associated marketing costs divided by the number of conversions.
• Conversion value helps companies estimate the return on investment of conversion rate optimization activities. Usually, organizations estimate the conversion rate except “when the conversion is a purchase, in which case conversion value can be considered equal to the purchase value.” Other scenarios involve how likely a conversion will become a transaction, and what the transaction’s value is. Metrics could involve average deal value or lead-to-customer rate. Sometimes conversion value ties to customer lifetime value and other long-term value metrics.
• Conversion of ROI is essential to marketing. Organizations need to know the number of conversions, conversion value, and cost per conversion to determine the ROI. The formula for conversion ROI is (Value of conversions – the cost of conversions)/Cost of conversions * 100%.

Conversions also consider sales funnel metrics and revenue. Some conversions never generate sales or the desired outcome. Therefore, organizations must consider how conversions “you capture proceed in the sales funnel, and what are they worth?” Working with the sales department can help determine the average lead-to-customer rate. Successful KPIs can indicate increased overall revenue. When working with KPIs, companies should configure benchmarks for each KPI. With established benchmarks, the company can track conversion performance (Kottila, 2021).

Website traffic and conversion measurements differ from each other in multiple ways. Some companies invest in developing traffic with the expectation that traffic alone drives sales. Other organizations focus so much on conversions by offering top-notch products that they ignore traffic. Without reaching the target audience, an organization limits its potential growth. An organization needs both website traffic and conversions for success. They must balance. Organizations must remember that website traffic gets visibility, but “conversion of that traffic is what gets them sales” (LocalFi).

Business experts state that the bounce rate metric is the “unsung hero of a successful website.” Optimally the bounce rate of a website should be low.

So how could the website decrease its bounce rate? A key tenet of bounce rate improvement is not to allow it to exceed 50 percent. The most common bounce triggers are closing the browser; going to an external link or a link that results in 404 errors; redirecting to a new URL through the address bar; navigating back to the search results and making the page inactive after switching tabs. Experts recommend five ways to decrease the bounce rate.

• Bounce rates on mobile devices tend to be higher than on desktop computers. Mobile users typically leave a site quickly if any element is out of place or the site is slow to load.
• Add more visuals. Users prefer sites with images.
• Since people read differently online, website designers should alter website text accordingly. For instance, experts recommend creating short paragraphs and using bulleted lists.
• Remove “fluff” material like widgets or promotional elements. Instead, consider putting these elements elsewhere.
• Use customer testimonials (Rahal, 2021).

References

Airfocus. (n.d.). Website traffic. https://airfocus.com/glossary/what-is-website-traffic/

Beasley, M. (2013). Practical web analytics for user experience: How analytics can help you understand your users [eBook edition]. Morgan Kaufman. https://mbsdirect.vitalsource.com/reader/books/9780124046191/pageid/3

Kottila, S. (2021, March 26). How to measure conversion performance with KPIs. Leadoo. https://leadoo.com/blog/conversion-kpis-how-measure-conversion-performance/#:~:text=Conversion%20rate%20is%20the%20percentage,with%20the%20number%20of%20visitors.&text=This%20central%20KPI%20measures%20the%20performance%20of%20your%20campaigns%20and%20landing%20pages

LocalFi. (n.d.). The two key components to successful marketing: traffic and conversion. https://localfiseo.com/traffic-vs-conversion/

Rahal, A. (2021, June 24). Five ways to reduce your bounce rate. Forbes. https://www.forbes.com/sites/forbescommunicationscouncil/2021/06/24/five-ways-to-reduce-your-bounce-rate/?sh=285f5d731420

Shiatis, C. (n.d.). Website traffic or conversions? Where should I put my efforts? Yello Veedub. https://www.yelloveedub.com/blog/website-traffic-or-conversions

What is responsive website design? Unlike static websites which appear the same on any screen size, responsive websites use CSS and HTML to automatically adapt websites to the screen widths and viewports of various devices (including desktops, tablets, and smartphones). A responsive website uses CSS to readjust images and text, and media queries to apply different styling based on browser sizes (W3Schools, 2022). Web designers can use responsive web design frameworks to ease the design process.

An example of a responsive website is Bite Toothpaste Bits. The website sells sustainable, plastic-free personal care products like bamboo toothbrushes and toothpaste bits. The website is an example of responsive web design, According to Aigars Silkalns, the website uses the responsive web design framework, Bootstrap (Silkalns, 2021). The source code backs this conclusion because it mentions Bootstrap several times.

Bootstrap is one of the most popular responsive web design CSS frameworks. It incorporates HTML, CSS, and jQuery to create responsive webpages (W3Schools, 2022). Web designers adapt existing Bootstrap templates. Using a framework like Bootstrap guarantees that web designers can build a website according to the specifications of responsive web design.

The Bootstrap framework, Bite Toothpaste Bits, has several responsive web design characteristics.

• The most elementary component of Bootstrap is the grid. The grid defines the width of every HTML component occurring on the webpage. The grid divides the webpage into twelve equal columns and lets elements occupy one to three columns. Splitting the website into equal sections, the website is easily adaptable to different screen sizes. (Maina, 2017). Many product pages on the Bite Toothpaste Bits website are “arrayed in grids with stunning hover effects” (Silkalns, 2021).
• Bootstrap uses responsive web design to modify a website to different screen sizes. In total, the framework uses four different resolution constraints (specifically the horizontal widths): large (1200 pixels), medium (992 pixels), small (768 pixels), and extra small (less than 768 pixels) (Maina, 2017). Using Google Chrome Develop Tools, I entered these different widths. As expected, the website easily adapted to any of these widths. Furthermore, I used the various screen sizes built into the application to view the website, including smartphone-sized screens smaller than 768 pixels. For example, I used the dimensions of the iPhone Pro 12 to evaluate the website. Again, the website’s responsive design allowed it to conform to any of these resolutions.
• Responsive web design involves setting the viewport, “which will give the browser instructions on how to control the page’s dimensions and scaling.” To set the viewport, web designers include a <meta> tag, <meta name=”viewport” content=”width=device-width,initial-scale=1″> (W3Schools, 2022). I found this code in the website’s source code (Bite Toothpaste Bits, 2022).
• Responsive websites use responsive images “that scale nicely to fit any browser window.” This process involves setting the CSS max-width property to 100%. This alteration allows the image to scale upwards and downwards (W3Schools, 2022). Google Developer Tools show that the website’s images scale to different device sizes.
• Bootstrap allows for responsive text size. Developers can set the text size with the “vw” or “viewport width” unit. Text scales based on the browser window’s size. The website includes the “vw” code several times in its source code (W3Schools, 2022). Changing the screen sizes in Google Developer Tools reinforces the website’s responsive text size.
• Bootstrap-based websites have a responsive navigation bar as well. Typically, Bootstrap collapses the navigation bar when the screen size shrinks to less than 768 pixels. The web view “contains all of the navigation links aligned horizontally across the page, while as the mobile view is more compact and makes use of a navigation icon which when clicked displays the navigation links aligned vertically.” Bootstrap has a special class called “navbar” that it uses to create this effect (Maina, 2017). Like other Bootstrap websites, the Bite Toothpaste Bits website has a horizontal menu at first until the screen width is less than 768 pixels when the horizontal menu morphs into a vertical one.

I used different browsers to view the example website. First, I looked at the homepage with Google Chrome on my desktop computer. The site design easily filled the layout space with no element cutoff. Notably, in this format, the website has five navigation tiles in the header section along with the Bite logo. The website’s responsive web design changes in several smaller screen sizes. Second, I used another browser, Microsoft Edge, to analyze any differences from Google Chrome. The website looks identical in its desktop format to Google Chrome. Then I used Microsoft Developer Tools to assess the same screen sizes as in Microsoft Chrome. Again, the website’s responsive web design adapted beautifully to each iteration.

References

Bite Toothpaste Bits. (2022). Bite. https://bitetoothpastebits.com/

Maina, D. (2017, July 26). Responsive web design with Bootstrap. Medium. https://medium.com/@duncandevs/responsive-web-design-with-bootstrap-70147ecd9d98

Silkalns, A. (2021, December 29). Twenty Bootstrap websites inspiration to build fresh and innovative design 2022. Color Lib. https://colorlib.com/wp/bootstrap-websites/

W3Schools. (2022). HTML responsive web design. https://www.w3schools.com/html/html_responsive.asp

What is an SEO tool? It is any software that developers can use to “improve some aspect of the search engine optimization campaign” (Emley, 2023). With this definition, an SEO tool could help improve a site’s performance by improving security, decreasing loading speed, or better reaching the target audience.

Why use SEO tools? SEO tools save valuable time and provide input. For instance, they help in keyword research and data analysis. They pinpoint what works and what parts could improve on a website. The “best SEO tools also report how you measure up to competitors and where the greatest opportunities lie.” Furthermore, they calculate website performance by language, country, or region (Ferreira, 2022).

Although there are scads of SEO tools available, these are just a few that I previously found useful when I improved the SEO of a nonprofit organization, Christian Growth Resources. Some are free, but others have a paywall.

Wix Website Builder

Wix Website Builder is a Software as a service (SaaS) that can build and analyze a website. I used Wix because the founder of a nonprofit organization built his website based on SaaS and wants to continue to do so. The software’s main page has a dashboard that overviews the site. After creating the website with the software, users can track the site’s analytics, visitors, and traffic sources. The Marketing and SEO portion of the site includes email marketing, Facebook and Instagram Ads, Google Ads, Google Business Profiles, social media marketing, video making, marketing integrations, and logo making. The SEO portion measures site performance (aligned with Google Search Console), and other tools and settings. The software also has promotional features like Wix Multilingual (Wix, 2023).

SEMrush

SEMrush is a marketing SEO tool that allows users to assess search rankings, pinpoint changes, and possible ranking prospects. One essential feature is domain vs. domain analysis, which lets users compare a website with its competitors. For instance, SEMrush allows comparisons of keywords and domains. The analytics reports provide insights into a site’s traffic and search data. The “On-Page SEO Checker tool allows you to easily monitor your rankings and find some recommendations on how to improve your website’s performance.” Organic Traffic Insights puts multiple data points on a dashboard with social share, keywords, and word count (Ferreira, 2022). Currently, the Google Analytics account does not connect with SEMrush, so SEMrush provides different data.

Google Analytics

Google Analytics is a website analytics platform that collects website data to create insightful reports. The founder of the nonprofit organization signed up with Google Analytics and placed a piece of JavaScript code on each webpage. Google Analytics uses this to gather data from the browser. Subsequently, Google Analytics uses the collected data to create reports. The software allows users to use configuration settings to modify data and use filters (Google Analytics Help, 2023).

Lighthouse

Lighthouse is an SEO tool I first learned about in an earlier course. Created by Google, Lighthouse is an open-source, automated tool that audits websites for accessibility, performance, and SEO. To get an overview of a site’s performance, users can enter the URL, and Lighthouse audits the webpage and then creates a report. Web designers can try to rectify any failed audits by making improvements. Every report has a reference document describing each issue’s importance and how to improve it (Chrome Developers, 2022).

Adobe Illustrator

Adobe Illustrator is a vector graphic editor that lets users make, alter, and save vector images. Web designers primarily employ vector images in graphics, logos, and typography, and vector images are highly scalable and maintain quality when scaled up or down. For this project, I created the logo for the website using this program.

Adobe Photoshop

Adobe Photoshop is a raster graphics editor that allows users to create, change, and save raster images. Raster images differ from vector images because their building blocks are grid-like pixels used to create the image. Vector images display a varying array of gradient tones and colors. Raster images have less scalability than vector images and can easily distort. The program has a Save for the Web (Legacy) feature, allowing users to save images in smaller sizes for website usage (Popovic, 2022). 

Sucuri SiteChecker

Sucuri SiteChecker is a file malware scanner I found while researching the security section of the project proposal. It analyzes a website’s code for peculiar HTML or PHP files. Also, it scans for malware. Regularly checking the website for security problems can help identify areas of concern. Rapidly reacting to security threats can safeguard visitors and help sustain organic traffic, SEO rankings, and brand reputation. The site is free (Sucuri, 2022).

References

Chrome Developers. (2022, May 24). Overview. https://developer.chrome.com/docs/lighthouse/overview/

Emley, B. (2023, October 30). The nine best SEO tools in 2024. Zapier. https://zapier.com/blog/best-seo-tools/

Ferreira, N.M. (2022, March 18). Eighteen best SEO tools that SEO experts actually use in 2022. Oberlo. https://www.oberlo.com/blog/seo-tools

Google Analytics Help. (2023). How Google Analytics works. https://support.google.com/analytics/answer/12159447?hl=en

CSS is the shortened form of Cascading Style Sheets. This web language arose after developers could not adapt HTML to stylize large websites. Since CSS is a distinct web language, its syntax differs from HTML 5. Users can stylize CSS as external style sheets, inline styles, and internal styles. CSS affects the positioning of website elements, including fonts and colors.

CSS defines the display of HTML elements. Before the introduction of CSS, web developers needed to code tags for fonts and colors repeatedly on every webpage. Thus, coding many descriptive tags on a large website created a nightmare. Therefore, the World Wide Web Consortium (W3C) developed CSS to alleviate the issue (“CSS Introduction”).

Furthermore, the syntax for CSS differs from HTML. Developers should signify the style type use of CSS in the head section. This notation will inform the document’s use of CSS (AGI Creative Team 41). CSS code splits into several distinct sections. For example, a developer might write:

h2 {

            color: black;

}

The first component, the selector, denotes the stylized part of the HTML. For this example, the selector is h2. More specialized selectors commonly used include the class selector and ID selector. The declaration is the second part which features the given styles. In this example, the declaration is “color: black.” Furthermore, the declaration divides into a property: value pair. In the example, color is the property while black is the value (Schmitt 25). However, many web designers do not use these technical terms daily (AGI Creative Team 40).

Ultimately, developers can code CSS in three ways. First, developers can create an external style sheet document that links to an attached file with a CSS extension. This file allows developers to include all the CSS styles for a website. This style sheet type is the only CSS styling method used on multiple web pages (AGI Creative Team 45). Sometimes developers add numerous external CSS files that categorize CSS styles in separate documents. Secondly, developers can use internal styles that integrate a webpage’s styles in the head section. These styles only affect the webpage where the embedded styles appear. Internal styles can be useful for changing styles by overriding inline and external styles. Lastly, developers can use inline styles by directly entering the HTML code. Examples of inline elements include img or em (Schmitt 29, 31). Typically, developers use internal and external styles (AGI Creative Team 45-46).

CSS affects the positioning of website elements in a browser in four ways: static, fixed, relative, and absolute. First, the static position, or normal flow of the document, involves vertically stacking each block-level element on top of the next block-level element. Secondly, elements in the fixed position remain in the same location relative to the browser window. Thirdly, in the relative position, given position properties of top, right, bottom, and left offset the relevant element from the static position (Schmitt 38-39). Lastly, elements in the absolute position follow the positioning values of their containers.

CSS stylizes many elements in a website. Fonts and colors are some of the most stylized elements. CSS organizes colors into two main color systems, with each color holding a different value in each system. The RGB system arranges colors according to how much red, green, and blue are in each color. The hexadecimal system categorizes each color in a six-character code headed by a pound sign. Developers can use either system (AGI Creative Team 43, 131). Fonts come in five font family types which each include multiple fonts. These font families include serif fonts, sans fonts, cursive fonts, fantasy fonts, and monospace fonts. Developers can assign different font families to stylize headings and paragraphs (Schmitt 44).

Finally, the importance of CSS in building websites is immense. CSS provides the visual framework for a website in a browser. The most recent version, CSS 3, covers such varied aspects as positioning, layout, typography, and color selection. Properly applied, CSS can successfully launch a visually engaging website.

References

“CSS Introduction.” w3schools.com, https://www.w3schools.com/css/css_intro.asp.

AGI Creative Team. HTML 5 Digital Classroom. Wiley, 2014.

Schmitt, Christopher. Designing Web and Mobile Graphics. New Riders, 2013.