WordPress v. Webflow: Creative capabilities and constraints of website creation platforms

Mary Margaret Herring

Abstract

This paper offers a comparative analysis of the interfaces of the popular content management systems WordPress and Webflow. WordPress and Webflow have become widely adopted tools for website creation they offer powerful graphical user interfaces (GUIs) that allow users of any technical skill to create and maintain a web presence. This democratization of web creation has enabled many nontechnical users to publish their ideas or products online. However, GUIs can over simplify a program’s complexity by relying heavily on metaphor and ease of use instead of illustrating new possibilities. Do the GUIs of WordPress and Webflow increase or limit users’ creative capabilities? To answer this question, a comparative analysis of WordPress and Webflow will be conducted using Murray’s (2011) digital affordances as a framework.

Introduction

It goes without saying that having a web presence is extremely important. Yet, many people with a product, idea, or story may not have the technical skills required to develop their own sites from scratch. Luckily, content management systems with graphical user interfaces (GUIs) – like WordPress [i] and Webflow – allow users to create websites without writing a single line of code. These products have greatly democratized web creation by creating interfaces that are reminiscent of other programs that nontechnical users are already familiar with. But, does a reliance on convention limit the creativity of WordPress and Webflow users?

WordPress and Webflow offer an interesting case study because they appeal to both novice, nontechnical users and experienced developers. Further, these two sites have very different interfaces that should yield a rich comparison. After examining the limitations of GUIs that draw heavily from metaphor, this paper will compare WordPress and Webflow. The comparison will be structured using Murray’s (2011) four affordances of digital media. Overall I argue that Webflow maximizes the affordances provided by digital media more successfully than WordPress and is likely easier to use by novice users.

Design Challenges in Democratizing Web Development

Content Management Systems

Creating a website with traditional front-end web development practices can be a painstaking process. Even on the most basic level, websites consist of many files: HTML files dictate the site’s structure and content, styling is added with CSS files, and JavaScript files make the site more interactive. After publishing the site by uploading these files to a server, editing the site’s content can be difficult. In order to swap out an image on a site, for instance, the administrator would not only need to upload the new image file to the server, but would also have to modify the HTML file where the image was displayed to call the new image. Then, the HTML file would also have to be re-uploaded to the server. In order to make content management more seamless, systems called content management systems (CMSs) have been developed. These systems facilitate content creation and publishing and have been used to create blogs, eCommerce sites, portfolios, and nearly everything in between (Cabot, 2018).

CMSs have become increasingly popular due to their ease of use and wide range of functionalities. In 2018, Martinez-Caro et al. found that nearly 50% of web pages are implemented using CMSs which usually consist of three elements: the content manager’s files, a hosting provider where these files are stored, and a linked database to store site information (Martinez-Caro et al., 2020). Rather than directly uploading files of code to the server, CMSs act as a more user-friendly intermediary where content can be stored and edited. To facilitate this, most CMSs have an administration area where pages, posts, and functionalities can be added to the site. This administration area is referred to as the back-end while the part of the site that a visitor would see is called the front-end (Martinez-Caro et al., 2018).

Martinez-Caro et al. (2018) believe that CMSs have become so popular in part because they are accessible to a wide audience while still offering a plethora of functionalities. To make their programs accessible to users who may not have a technical background, CMSs implement back-end GUIs that allow non-technical users to quickly create stylized sites by utilizing rich-text editors and drag-and-drop functionalities. Enabling non-technical users to create and maintain a web presence has democratized web publishing. Yet, many CMS services, including WordPress and Webflow, aim to create scalable products that can be used by both non-technical web creators and large corporate clients. While these services share the same mission, the platforms operate in quite different ways.

Since its launch in 2003, WordPress has become the most widely used CMS. As of December 2020, over 39.2% of all websites were implemented using WordPress (W3 Techs). WordPress is a highly collaborative open-sourced software. The WordPress Core, which configures access to a user’s files, WordPress settings, database configuration, and dashboard settings, is developed by The Core Development Team (Hughes, 2017). However, plugins, which can be implemented to add functionalities to WordPress sites, and themes, that stylize content, can be developed by anyone. The design rules for plugins and themes are well documented and a massive repository of these crowdsourced add-ons exist making site functionalities and designs highly customizable. Users can create content from a block-style page and post editor. Alternatively, free and paid versions of plugins like Elementor or WP Bakery provide extended drag-and-drop content creation elements. Finally, users can fine tune their site’s style in the customizer.

A newer competitor to WordPress is Webflow. According to Sanchez-Olivera (2019), Webflow “attempts to fill the space between DIY software like Wix and Squarespace, traditional content management systems like WordPress, and actual front-end web development.” This is accomplished by providing a “Photoshop-like” GUI that creates HTML, CSS, and JavaScript files as content is added to the drag-and-drop editor. This allows users to create custom templates for dynamic content and static pages alike. Unlike WordPress, however, Webflow is a for-profit platform that offers hosting services and charges users to export their files after they’ve created their sites. Nevertheless, this platform has garnered attention from the web design community for its visual design capabilities.

Both WordPress and Webflow offer an interesting case study because they market their sites to both novice users and experienced developers alike. These sites simplify the website creation process by allowing users to develop content in GUI, What You See Is What You Get (WYSIWYG) editors. But, as Gentner and Nielsen state, “the problem with WYSIWYG is that it is usually equivalent to What You See Is All There Is (WYSIATI)” (1996, p. 75). How do these sites simplify and abstract the process of web development to be utilized by nontechnical users? Does this limit the capabilities of experienced developers? Before offering a comparative analysis of the two website creation platforms, the intentions of GUI pioneer, Alan Kay, and Gentner and Nielsen’s (1996) Anti-Mac Interface will be discussed to determine the limits and benefits that GUIs offer.

Alan Kay and The Anti-Mac Interface

In the same way that WYSIWYG website builders rely on GUIs to allow non-technical users to publish websites, GUIs were employed in the 1970s to make computers more accessible to the general public. In his book, Software Takes Command, Manovich (2013) highlights the inconsistencies between Alan Kay’s intentions as the “pioneer of GUIs,” and the way that GUIs have been commercialized. Manovich writes that “Kay wanted to turn computers into a ‘personal dynamic media’ which could be used for learning, discovery, and artistic creation” (2013, p. 61). To do this, Kay and his team simulated the way that people interacted with pre-existing media on the computer while adding functions that the prior media was lacking (Manovich, 2013). For instance, the folder icon was used to demonstrate to users that files could be grouped together and organized like their physical counterparts. However, files can also be searched for words or phrases in a way that paper files cannot. This helped users feel more familiar in their digital environment and understand the machine’s capabilities. Apple and other technology companies readily adopted this convention to help make interfaces more intuitive by drawing heavily from metaphors from the physical world (Manovich, 2013). In this way, the GUI should be so intuitive that it becomes transparent. But, as Manovich argues, instead of the transparent interface that was adopted commercially, Kay and his colleagues had envisioned a “GUI as a medium designed in its every detail to facilitate learning, discovery, and creativity” (2013, p. 100). While it is clear that GUIs have greatly democratized the use of computers and website creation, it is worth wondering if the transparent interfaces limit users’ capabilities.

To consider alternatives to the transparent interfaces implemented commercially, Gentner and Nielsen (1996) discuss an alternative to Apple’s Mac interface. In 1996, one of Apple’s human interface guidelines stated the importance of using metaphor in design. However, Gentner and Nielsen (1996) argue that using metaphor in designs can constrain users and designers. Users may become constrained by the use of metaphor when the digital implementation of the metaphor lacks or has additional features that the physical equivalent lacks. In the example of the file folders used above, physical file folders are not searchable. A person cannot walk up to a file cabinet, type in a search query, and receive a list of relevant physical documents. However, they can do this on the computer. In this example, by solely relying on metaphor to demonstrate what users can do, a user may not know that they can search for relevant documents. Instead of relying on metaphor, Gentner and Nielsen (1996) recommend integrating more language based commands and providing a richer representation of objects that reveal more about the contents the objects contain.

According to Gentner and Nielsen (1996), Apple’s human-interface guidelines also stipulated that users should always be in control of the interface. One way of giving users control is by implementing a direct manipulation interface where users interact directly with objects. This allows the user to understand exactly where they are in the task that they are completing. However, this also means that users must be involved at the atomic level of the operation. Gentner and Nielsen state that by directly manipulating content users are reduced to assembly line workers that complete monotonous tasks instead of executives who can issue high-level commands (1996, p. 74). While these are just a few examples of how Apple’s human-interface guidelines may be violated for the better, it becomes clear that ease of use is often at odds with the functionalities of a technology. This sentiment is summarized by Gentner and Nielsen who state that “[t]he GUIs of contemporary applications are generally well designed for ease of learning, but there is often a trade-off between ease of learning on one hand and ease of use, power, and flexibility on the other hand” (1996, p. 79). When this tradeoff is applied to web creation platforms, I ask: in what ways do the GUIs of Webflow and WordPress limit and empower design capabilities and functionalities for novice and experienced users?

WordPress v. Webflow

A comparative framework: Maximizing the affordances of digital media

With this tradeoff in mind, we can now begin to compare WordPress and Webflow. When comparing these two platforms, Murray’s (2011) grid of digital media affordances will be used. Murray writes that “[t]he digital designer has two responsibilities: to create the artifact that best serves the needs of the people who will interact with it, and to advance the digital medium as a whole” (2011, p. 87). To advance the digital medium, Murray (2011) argues that the four affordances of digital media must be maximized. She writes that digital media afford procedural, participatory, spatial, and encyclopedic actions (Murray, 2011). Digital media are procedural because computers are able to execute conditional behaviors in ways that prior forms of media could not. Computers also afford participation by taking inputs from users and producing outputs accordingly, and vice versa. The spatial affordance of digital media builds upon the participatory and procedural properties of digital media by offering an abstract space for users to interact with digital content. Finally, computers are encyclopedic because they can transmit and organize more information than any other previous media (Murray, 2011). While this list of the affordances of digital media may not be comprehensive, it offers a framework that emphasizes utilizing all of the functionalities afforded by digital technology in the creative and expressive ways that Kay intended.

Maximizing Procedural Affordances

As machines that are controlled by conditional logic, computers and digital media are fundamentally procedural. Yet, computer users may never realize the underlying procedural behavior of computers. This is because these behaviors are shrouded in layers of abstraction that hide the complexity of the operations performed by the device. To manage this complexity, Murray (2011) recommends developing modular programs. Irvine defines modularity as “conceptual models of systems with interconnected subcomponents that can be implemented in real constructed things” (n.d., p. 1). Developing subcomponents makes it easier to add or remove parts of the system as long as all parts of the system comply with a universally accepted set of design rules. These modular subcomponents maximize the procedural capabilities of technologies by dividing effort and coordinating tasks and decisions (Baldwin & Clark, 2000). Therefore, examining the modularity of WordPress and Webflow will be an indicator of how much the platforms maximize the procedural behaviors afforded by digital media.

WordPress

As an open-source program, WordPress is massively modular and encourages developers to create and modify subcomponents of their site. In order to understand how this is possible, it is important to first take a look at the relationship between the WordPress core, themes, and plugins. The WordPress core is a set of files that are developed by The WordPress Core Development Team. These are the main files that control access to uploaded content, dictate WordPress settings, configure the database and dashboard and allow for additional features to be added to the site (Hughes, 2017). According to the WordPress Plugin Developer Handbook, there is one cardinal rule: “Don’t touch the WordPress core” (WordPress Community, n.d., Plugin Handbook). This is because the core files will update with each new instance of WordPress. Instead of making changes directly to the core files, developers recommend using plugins to add additional functionalities to the site.

Plugins greatly expand the functionality of a WordPress site without modifying the core files. On the most basic level, WordPress plugins are PHP files with a WordPress plugin header comment (WordPress Community, n.d., Plugin). Plugins operate by using hooks, actions, and filters to tap into the core files. Hooks are inserted into the core files and act as placeholders for plugin developers to tap into. Actions are a type of hook that allows the developer to add or change a functionality of the core file and filters are hooks that allow the user to alter content as it is displayed (WordPress Community, n.d., Plugin). When the site runs, WordPress identifies the plugin files by searching through the plugins folder to find PHP files with WordPress plugin header comments. By adding hooks in the core files, plugin developers are able to greatly expand the functionality of their site with actions and filters. Because of its crowdsourced nature, these design rules are well documented in the Plugin Handbook (WordPress Community, n.d.). Further, problems with a plugin will not cause the entire site to crash. The site can easily be repaired by uninstalling the plugin. This modularity has also been a boon to novice web creators who can activate any of the plugins in the repository without touching a line of code.

While plugins extend the functionality of WordPress sites, themes control the way that site content is displayed in the browser. Like plugins, theme development is crowdsourced and massively modular. On WordPress, users can create static pages or dynamic content like blog posts. Themes typically contain different templates for displaying these varying types of content. To determine which template to use, WordPress has a default template hierarchy that first determines what type of page is being requested, selects a template based on the order in the hierarchy, and then uses that template (WordPress Community, n.d., Theme). There are only two design rules stipulated by the core for theme development. First, a theme must contain an index.php file which acts as the main template file and a style.css file that contains styling information. Second, the theme cannot add a critical functionality ­– a site should not fail to function solely because the user changes the theme (WordPress Community, n.d., Theme). Themes are modular because they merely contain templates for displaying the content. Aside from the way it is displayed, the content remains unaffected by the theme that is installed. This allows experienced developers to create their own WordPress themes and novice users to benefit from free and paid professionally designed themes from the repository that are easily customizable.

The template hierarchy used by WordPress.

WordPress’s template hierarchy. This is the process that the system takes to determine what template to use.

Webflow

Webflow differs quite drastically from WordPress. It is worth noting that the for-profit nature of Webflow means that there are fewer guidelines about the way that the software works. Yet, in interacting with the visual editor, the way that the program operates becomes more clear. Unlike WordPress, there is no distinction between core files, plugins, and themes. Rather, all creation and editing takes place in the visual editor or designer.

On Webflow, this distinction between content and style is eliminated. When creating static pages, users have complete design over all elements of the site – from the header and footer, to the way that the body text is displayed. Much like using a text box in Microsoft Word, users add containers for their text and then directly add text or media into those containers. This generates clean and easily readable HTML. For example, the following screenshot of a section of a website created with Webflow generates the following HTML (images from “Webflow vs. WordPress,” n.d.).

A section of Webflow's site

The way the site appears to users (Image from “Webflow vs. WordPress,” n.d.).

The HTML generated to design that site.

The HTML that Webflow generated for this section of the site (Image from “Webflow vs. WordPress,” n.d.).

 

 

 

 

 

 

 

 

 

This customization is fabulous for users who have wanted to create WordPress themes from scratch but lack the knowledge of PHP to do so. However, creating each individual page is a tedious task. To avoid this, Webflow allows users to save and reuse blocks of code and also offers a CMS service where users can add custom fields of content and create custom templates. For example, a user creating a template for a blog may want each entry to have a blog title, date, author, category, blog post, featured image, and featured color field. The user can add or delete these fields as they find necessary and when they publish the post, they just upload the relevant content into each of these fields. Then, to stylize the posts, they can create a template that accepts content from the fields. This streamlines the coding process by utilizing the digital medium’s procedural behaviors to display similar forms of information using conditional logic.

Webflow’s heavy reliance on traditional web development practices means that the learning curve may be quite steep for users unfamiliar with front-end development. However, there are several tools that may help non-technical users get sites up and running. Webflow offers several free and paid templates created by developers. This offers users a site that is already mostly built and simply requires inputting content. Also, while Webflow lacks plugins, they do offer a library of integrations which are bits of code developed by third-parties that can be embedded into sites. While Webflow believes that the lack of plugins are beneficial, embedding content using iframes has been known to slow down performance because of the increased memory required (MDN Contributors, 2020). It is also worth noting that integrations can only be embedded in a page and therefore are not able to add functionality to an entire site in the same way that WordPress plugins can. There are also extensive “hacks” that can be used to upgrade site functionality that will be discussed later on. Yet, these hacks are nowhere near as extensive as WordPress’s plugin repository.

While the lack of modularity offered by Webflow may be viewed as a negative, Webflow emphasizes the simplicity of the platform. Webflow believes that this is preferable to a more modular design because there is no extra code from plugins to slow down the site, there are no automatic updates to core files (because there aren’t any), and there’s no PHP (“Webflow vs. WordPress,” n.d.).

Comparison

While Webflow’s creators praise the product’s simplicity, WordPress’s modularity has proved to be one of its greatest assets because it makes the program scalable. Murray states that scalable programs are defined by “being able to accommodate more users, more data, more related procedures without having to be reengineered” (2011, p. 55). WordPress’s scalability is likely part of why it is the most popular CMS (W3Techs, 2020). Large companies are able to manage massive sites by delegating user roles and the functionality of the site can easily be extended with plugins. While Webflow enables collaborators to be added to the course and users can edit their exported files, extending the sites’ functionality requires the user to understand how to code additional functions instead of simply installing a plugin if one doesn’t exist in the more limited repository. Because of WordPress’s modularity and scalability, it maximizes the procedural affordance offered by digital media more successfully than Webflow.

Maximizing Participatory Affordances

Digital media afford participation because the user and computer communicate in a meaningful way. The way that this communication takes place is deeply rooted in the procedural affordance of digital media. Computers, for instance, may ask for an input, use predefined procedures to decide what to do with this information, and then produce an output. Most of the time, however, the procedures used by the computer are irrelevant to the user. Most procedural operations performed by digital media are hidden from the user so that the user only sees the result (Murray, 2011). This process of abstracting elements to hide their complexity is called encapsulation (Baldwin & Clark, 2000). While encapsulating items is important for productive communication between the user and digital medium, visibility is also important. Murray writes “[t]o achieve the design goal of visibility, the designer must support the creation of a coherent mental model of the computer’s processing” (2011, p. 329). Here, visibility offers the user an understanding of how the program is operating so they know the possibilities and limitations of the action that is being completed. For these reasons, a balance of encapsulation and visibility will be an important benchmark when analyzing the participatory properties of WordPress and Webflow.

WordPress

Because WordPress is composed of open-source software, there is an abundance of information on how to develop plugins and themes for WordPress. However, the interface of the software is largely encapsulated and possibly quite mysterious to novice users. When users create posts or pages of content, they use a rich text editor that is reminiscent of Microsoft Word. The mental model encouraged by this WYSIWYG editor is not representative of how the system actually works. HTML is a markup language used by documents that are displayed in browsers. Content is marked as elements like headers, paragraphs, or bullets to give the page structure. This is especially important when considering things like search engine optimization as search engine crawlers rank headings as being more important than body text. But, most rich text editors emphasize style over structure. In Microsoft Word, for example, it does not matter if I use the Heading 1 style defined by my computer or if I simply change the font, weight, and size of my lettering – it will all look the same on the printed page. On the web, however, lacking to designate elements in the proper way may lead to problems like poor search engine ratings. While WordPress’s content editor does a wonderful job of encapsulating the complexity of web content by providing a familiar rich text editor, this design does not encourage users to form an accurate mental model of how the technology actually works.

The themes and plugins that can be installed on WordPress sites are also encapsulated. The vast repository of plugins available means that novice users can easily extend the functionality of their sites by installing and activating the plugins. The GUI that WordPress provides makes this easy to do; adding plugins can be accomplished without ever seeing a line of code. The mental model that plugins bring to mind is apt for the way that plugins function. As previously discussed in the above section on procedural affordances, plugins allow users to extend the functionality of a site without touching the WordPress core files. In this instance, the metaphor of a plugin being something additional that can be added or removed easily corresponds well to the function of a WordPress plugin. Similarly, themes are well encapsulated and can be implemented by clicking a few buttons. The idea that a site can change themes while the content remains the same also is a useful mental model.

Webflow

While WordPress’s content editor conceals important aspects of the web development process from the user, Webflow’s drag-and-drop GUI is built around generating clean HTML files. In fact, the GUI is so reliant on the conventions of HTML that Webflow designer Sanchez-Olivera (2019) states that “designing in Webflow requires (and encourages) thinking less like a graphic designer and more like a front-end developer.” The Photoshop like GUI abstracts the process of coding by offering a visual editor that transforms text box-like objects full of content into lines of code. Similarly, changes to color, size, and alignment are compiled in the CSS files and animations and interactivity are added in JavaScript files. All of these files can be seen by the user as they create in the visual editor. When a user clones a theme, the structure and style of the page can similarly be found in the visual editor. By encapsulating the processes that are taking place, Webflow offers a design environment that non-technical users will be familiar with. While the mental model that the GUI inspires may be difficult to learn because of its deep foundations in traditional web development, it requires users to understand more about the roles of HTML, CSS, and JavaScript files in the content that they are producing.

Webflow’s CMS also encapsulates the processes taken by the software in a way that encourages a useful mental model. By allowing users to create their own custom fields, Webflow sustains the flexibility that programmers have when creating websites. Further, Webflow allows users to create custom templates in a way that is much more reminiscent of traditional web development. This differs from WordPress’s content editor that has fixed input areas and does not allow the user to create custom templates within a theme – although experienced developers may create their own custom themes and templates to get around this issue.

While the visual editor and CMS affords participation in a way that WordPress does not, the lack of plugins may be more intimidating to non-technical users. Instead of pushing a button to activate a plugin, Webflow offers a series of modifications that can be added to a site called F’ing Sweet Hacks. F’ing Sweet Hacks are a collection of 45 “hacks” that users can copy and paste into their code. Each hack has a video that walks the user through each line of the code to explain what the code does and how it can be modified. While this is an awesome learning tool for users who are unfamiliar with programming, the processes of the program are not abstracted in a way that is helpful to novice users.

Comparison

Webflow’s structure enables users to create content in a way that mimics the flexibility of traditional web development. This is made possible by abstracting the creation of HTML, CSS, and JavaScript files into a visual, drag-and-drop editor. Webflow’s CMS also abstracts the creation of templates more effectively than WordPress because the user has the ability to create custom fields and design their own templates. This flexibility is more representative of the options that a front-end developer would have at their disposal. Although developers with a working knowledge of PHP can create their own custom fields, themes, and templates on WordPress, I argue that Webflow does a better job at abstracting and encouraging a mental model for the processes that are occurring when they design and add content to their site.

Maximizing Spatial and Encyclopedic Affordances

While the procedural and participatory affordances of WordPress and Webflow received in-depth discussion, the discussion of their spatial and encyclopedic affordances will be combined. This is due to the fact that the spatial and encyclopedic affordances of digital media draw extensively from the procedural and participatory affordances and much of this content will overlap with the previous discussion. Because the encyclopedic properties of WordPress and Webflow are mostly the same, an abbreviated discussion will be included in the comparison section.

Murray (2011) writes that “digital space is created out of bits rather than bricks, and it rests upon the procedural and participatory affordances of computation” (p. 70). Digital media create space by using abstracted representations of physical objects like file folders, windows, and trash bins. By clicking, dragging, and manipulating these items, space is created. Murray (2011) points out, however, that we can only interact with these items in a way that reinforces their functions as pieces of information or chunks of code. In this way, the spatial affordance relies upon the procedural and participatory affordances of digital media. Therefore, when analyzing how Webflow and WordPress maximize the spatial properties afforded by digital media, it will be important to pay special attention to how manipulation of the objects reinforces their functions as pieces of code.

Because of the computer’s ability to store and transmit massive amounts of information, digital media are encyclopedic. Murray (2011) argues that the encyclopedic capability of the computer raises the expectations of the designer to clearly communicate and display content in a way that makes it easy for users to sort through and find information. When analyzing WordPress and Webflow’s maximization of the encyclopedic affordance of digital media, it will be important to determine how the sites allow content creators to organize their content in a clear and consistent manner.

WordPress

While WordPress’s customizer allows users to change colors and fonts, it does not really allow users to interact with the objects in the theme’s header and footer in a spatial manner. Similarly, in the blocks editor, where content is added, users can add different blocks of code but do not have much control over how this content is displayed in the page. However, there are a number of drag-and-drop plugins that users can add to build their content visually. Yet, the lack of objects that can be manipulated and the highly encapsulated nature of the theme files leads to an interface that does not maximize the visual affordances offered by digital media.

Webflow

Webflow’s visual editor maximizes the spatial affordances offered by digital media by creating a drag-and-drop interface that only allows the user to manipulate elements in ways that will lead to the generation of HTML and CSS files. This is perhaps why Sanchez-Olivera (2019) states that Webflow encourages users to think like front-end web developers. Rather than allowing users to drag-and-drop content in a way that would lead to unresponsive websites or generate poorly formatted code, Webflow reinforces the objects’ functions as pieces of code. For this reason, understanding basic front-end development principles equips Webflow users with a knowledge of what can and can’t be done in the visual editor. Overall, Webflow’s visual editor does a great job of maximizing the spatial affordances of digital media by representing lines of HTML code and objects in the visual editor and allowing users to set CSS properties in a GUI.

Comparison

The visual editor of Webflow allows users to manipulate visual objects in a way that is not possible in WordPress. Because WordPress relies on PHP templates for themes, the number of customizable elements available to the user vary depending on what theme is installed and the reasons for this inconsistency are kept hidden from the user. This issue is avoided in Webflow’s visual editor because users start with a blank canvas and can see the code that is being generated. Overall, Webflow maximizes the spatial affordance provided by digital media in a more successful way than WordPress.

Both WordPress and Webflow maximize the same encyclopedic functions of the digital medium in similar ways. Webflow touts its ability to generate clean HTML files that make its pages easily searchable by search engine crawlers. However, there are a number of plugins available on WordPress, like Yoast, that enable users to approve their site’s indexability. Because they are both CMSs, WordPress and Webflow also maximize the computer’s encyclopedic functions of storing and displaying content. For this reason, WordPress and Webflow are comparatively similar in this regard.

Conclusion

WordPress and Webflow are two popular web creation platforms that allow nontechnical users to create web content with GUIs. While this has led to a democratization of web creation, Gentner and Nielsen’s (1996) “Anti-Mac Interface” offers several compelling reasons that GUIs may limit a user’s understanding of the functions that a computer or program can complete. However, after examining Murray’s four affordance of digital media (2011), it becomes clear that GUIs that maximize the procedural, participatory, spatial, and encyclopedic affordances provided by digital media can allow users to interact with technology in rich and meaningful ways. Due to its open-sourced nature, WordPress is a massively modular system and maximizes the procedural affordances of digital media by dividing tasks and functions into subcomponents. For this reason, WordPress is scalable and can be used by novice users and massive companies. However, Webflow’s visual editor encapsulates the content and stylizing processes of web development in a way that encourages helpful mental models to the user and therefore is more effective in facilitating productive communication. In this way the drag-and-drop GUI editor maximizes the participatory and spatial affordances by providing users with a useful way to create HTML, CSS, and JavaScript files without actually coding. Overall, I believe that a novice user may not only find it easier to use Webflow because of the visual editor, but will learn more about web development in the process.

If considering improving their product, I would urge Webflow to maximize the procedural affordances offered to them by creating a more modular system. While there is a budding community of integration and theme developers for Webflow, it pales in comparison to WordPress’s repositories. It seems that WordPress’s modularity has made it extremely versatile and that may be one of the reasons that it is so widely used. WordPress, on the other hand, may greatly benefit by using metaphors in their interface that encourage more apt mental models. While the encapsulation of information makes the platform less intimidating to novice users, it also does not reveal much about how the program works. This may be accomplished by offering more resources to new web creators about the function of themes and plugins and how they implement the content a user adds. A more holistic understanding of this process will likely provide an important mental model that the users can utilize when designing their website. As a final note, it is worth stating that both WordPress and Webflow are fascinating case studies and more research on their interfaces may illuminate ways to get more nontechnical users involved in the process of website creation.


References

Baldwin, C. Y., & Clark, K. B. (2000). Design rules. MIT Press.

Cabot, J. (2018). WordPress: A content management system to democratize publishing. IEEE Software, 35(3), 89–92. https://doi.org/10.1109/MS.2018.2141016.

Gentner, D. & Nielsen, J. (1996). The anti-Mac interface. Communications of the ACM, 39(8), 70-82.

Hughes, J. (2017, January 19). An introduction to WordPress core files. Themeisle. https://themeisle.com/blog/wordpress-core-files/.

Irvine, M. (n.d.). Introducing Modular Design Principles. Unpublished Manuscript.

Manovich, L. (2013). Software takes command: Extending the language of new media. Bloomsbury.

Martinez-Caro, J.M., Aledo-Hernandez, A.J., Guillen-Perez, A., Sanchez-Iborra, R., & Cano, M.D. (2018). A comparative study of web content management systems. Information, 9(2), 27. https://doi.org/10.3390/info9020027.

MDN Contributors. (2020, November 8). <iframe>: The Inline Frame element. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Accessibility_concerns

Murray, J. H. (2011). Inventing the Medium: Principles of Interaction Design as a Cultural Practice. MIT Press.

Sanchez-Olvera, A. (2019, February 13). Why Webflow is the best web design program right now. Prototypr.Io. https://blog.prototypr.io/why-webflow-is-the-best-web-design-program-right-now-f128aef8b45.

W3Techs. (2020, December 6). Usage statistics of content management systems. W3Techs: Web Technology Surveys. https://w3techs.com/technologies/overview/content_management.

Webflow vs. WordPress. (n.d.). Webflow. https://webflow.com/vs/wordpress.

WordPress Community. (n.d.). Plugin handbook. WordPress.Org Developer. https://developer.wordpress.org/plugins/.

WordPress Community. (n.d.). Theme handbook.  WordPress.Org Developer. https://developer.wordpress.org/themes/.


[i] This paper discusses the open-source WordPress.org rather than the for-profit hosting service provided by WordPress.com.