The F-Shape Design Strategy and The Early Web
In the earliest days of the internet, there was a lot of talk about heatmaps and the power of the F-Shape design approach. At that time, most people accessed the internet from a desktop computer which meant designing for a full-sized computer monitor. The biggest challenge to designers at that time was the browser wars where competing factions attempted to make their browsers the dominant way people accessed the web. There were several players in that field like Netscape and Internet Explorer and they didn’t all render the code the same way. Designers were challenged with writing code that could work well from one browser to another.
Beyond that behind-the-scenes battle, there was a whole other area of research that involved using heat maps to determine how people viewed the website and where you should add your links and content to best suit those expectations. In the earliest iteration of websites, the most common design strategy was the F-Shape model to designing websites. That was because viewers had gotten used to seeing important navigational information displayed either across the top of the page or down the left-hand side. A visitor knew to look in these places for where to click and the information would then render in the main body of the page. Using heat maps to study where viewers’ eyes went on the page – the result was a heat map that looked like the letter F where eyes scanned down the left side of the page and across the top and then landed in the middle of the page on the right-hand side where they consumed the content.
Moving Into The Age of Tablets and Smartphones
After desktops, the laptop quickly entered the market. While the screens were generally smaller, there wasn’t much impact on the approach to web design. The screens were very similar to the main desktop and designers didn’t need to adjust very much to make the site work for laptops. And then along came the age of mobile devices. The iPad and early tablets along with smartphones meant that designers now had to make their client’s websites look good on screens with much less real estate for displaying navigational menus. The age of responsive design was born and a website had to render differently but effectively on both large and small screens.
At the same time, this was happening, the need to have an online presence became of paramount importance. As small businesses looked to bring themselves online, they also look for a DIY strategy to check this box. Websites can be expensive and for nonprogrammers, it can also feel like a frustrating mystery every time someone needs to send an update to their website.
From HTML and CSS to Drag-and-Drop
In the earliest days of the web, one could learn a little bit of HTML and get a website up and running. But as the information being displayed got ever more complex, so too did the underlying code. From the use of the earliest code boxes came a shift to more of a drag-and-drop of boxes, widgets, and content boxes so someone could easily build their own website without the need to hire a programmer. There are pros and cons to this approach as it is harder to get a drag-and-drop tool to incorporate the nuances of design that can be achieved through the use of code.
Full Site Editing – Can You Really Design Your Own Website?
There are a lot of well-known visual composers to help business owners build their own websites. Basically, the website is rendered in the backend of the development platform and the site owner can drag elements into the page or grab corners of a box to expand it and add content such as simple text or images to more complex elements like payment or contact forms. The goal of the design platform is to create a design tool that anyone can use regardless of their comfort with code.
But, can you really design your own website with these tools? The short answer is yes – you can! But, the longer answer continues to have the same elements to it… you kinda can. As good as these full site editors are getting, they continue to have their shortcomings that often leave the site owner both frustrated and disappointed. And now, they have to grapple with the amount of time they spend designing a site they aren’t really happy with and feel like they should just accept it for what it is considering how much time and energy they have put into it.
WordPress has even been working on its own version for a Full site editor (FSE) called Gutenberg Blocks, but it really leaves something to be desired. While Gutenberg is native to WordPress and built by its own internal coders, it is rather clunky and hard to use which leaves site owners frustrated all over again. There are popular alternatives to the visual composer like the very popular Elementor, Divi, or Beaver Builder plugins, but these also often leave the average person feeling confused and frustrated with building their own websites. There’s a rather large learning curve to using all of these tools and they often make it impossible to render certain aspects of the website as the owner intends.
That’s why I use WPBakery to design sites for my clients and then hand them off in an interface that most people find rather intuitive to use. This tool creates the possibility for a strong partnership between the site owner and the designer. It has a backend design area that always had the ability to enter into code for fine tuning while creating a visual row and column look that is rather intuitive to most folks to help them visualize what is happening to the front end as they make adjustments in the backend. In this model, the designer who specializes in the design tool can rapidly layout a website for their clients while also empowering the client to make small edits or even replicate large sections of their website to be cloned for new content. It is the next of both worlds as the site owner can have a degree of control over their own website while also benefiting from the maximum design flexibility they so often desire.
