Before I begin this blog, I’d like to define what I mean by ‘web design standards’. For me, I look at web design standards as incorporating aspects of:
- HTML
- CSS
- JavaScript
- User Experience
- Server-side programming languages
- Content Management Systems
- Web 2.0 v Web 3.0
Standard website width 2022
I see some traffic coming into this blog article on standard website width 2022, so I’ll answer this here before we begin! We can divide up the widths of various devices between 4 categories of desktop, laptop, tablet and mobile. I will put the standard sizes for these below as a rough guide to you to determine a standard width:
- Desktop: Above 1440px
- Laptop: 992px to 1440px
- Tablet: 576px to 992px
- Mobile: Up to 576px
Now of course with the plethora of devices that come in all shapes and sizes, this is an approximate guide, and my best advice when building responsive websites for mobile and deciding on ‘breakpoints’, is that breakpoints should kick in once the webpage design is broken as opposed to using the standard widths of devices. You may find your design breaks at 994px, so then that is where your breakpoint for mobile or tablet responsiveness should be regardless of where that falls according to device widths.
HTML
The current standard we use is HTML5. The W3C, World Wide Web Consortium signed an agreement in 2019 to work with WHATWG (a community developing web standards) and collaborate on a single version of HTML and DOM.
When I think about the current standard of HTML5, first of all I’m relieved we have a working standard as implemented by all major browsers. This is an incredible effort on everyone’s part. The actual HTML5 standard, it was incorrectly rumoured years ago, would only be ready to use in 2022! And here we are, already using it for years thanks to modern web browsers.
Why is this standard important? With HTML5 we have been able to natively render in browsers, what we used to have to rely on JavaScript to force browsers to do, and sometimes that type of coding didn’t give the best experience to web visitors, and/or didn’t age well, and maybe even broke the websites accessibility depending on how things were coded together.
Nowadays we have the coolest HTML5 tags at our disposal thanks to the incredible working groups and community that contribute to the standard and the browsers that work to evolve into it. Input ‘type’ blew my mind when I first discovered it, but we have native tags like meter, progress, canvas, template and so many more.
Looking forward into 2022, I don’t see any major announcement like HTML6 being announced or anything like that, but more of a continuation and adoption of the existing standards around Document Object Model (DOM) manipulation, perhaps wider adoption of the template element. I would love to see something like a native HTML5 include tag, where you could insert html from another file using a native tag, but to my knowledge this isn’t on the horizon. If it was, it could really change web development as we know it when it comes to building websites and dynamic languages with or without databases, perhaps you could potentially build a multi-page website with a reusable header/footer without even JavaScript or any dynamic language to achieve it.
The template HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript. – MDN Web Docs
While I haven’t played around with vue.js myself yet, which we will discuss further below, it looks like they already make use of template with slots and that makes sense to me. I wonder will we see even more evolution of the specification in this direction in 2022?!
CSS
The Mozilla website is a great source of info around CSS!
You might have heard about CSS1, CSS2.1, CSS3. However, CSS4 has never become an official version. – https://developer.mozilla.org/en-US/docs/Web/CSS
So as they mentioned, CSS was developed as the traditional big version releases, and in a similar way to HTML5 (no version 6), we still use CSS3 but that doesn’t mean it hasn’t been developed, rather they are developing it in a sectional way. We have our trusty W3C CSS validator as always.
The way we can use CSS these days to animate without any JavaScript at all, is incredible. I think light and dark mode will become even more popular in 2022 on websites and web apps. This CSS Cookbook by Mozilla is so handy.
CSS scroll-snap is one of my personal favourites, and if you’re on mobile, check out my testimonials section to the bottom of the page, see when you use your finger to swipe you can feel a ‘snap’ to the page, it’s a very pleasing feeling and keeps the individual cards flush to left, right or centre whichever suits your design. I would love to see the dreaded term ‘Carousel’ re-defined in 2022 to actually mean something similar to my own implementation which is simply a scroll on overflow along the y axis, and a lovely snap effect, all Javascript free and easy to use. All you need to indicate to users that there is extra content there which they can scroll, is a cut off card or a peek!
We have already been making use of flex and grid based layout and I don’t see how they can make attributes like that any better, perhaps something a bit more slick on gutter spacing but not really I’m reaching. As someone who remembers flash websites, and trying to layout web elements using tables and image sprites, I just love the current abilities of CSS, from flex for positioning to background gradients for design, it’s incredible.
JavaScript
The ECMAScript specification of a scripting language we know as JavaScript today, was updated in June 2021.
This current edition of the JavaScript standard is known as the 12th edition. I definitely think when it comes to progressing the JS standard, small advancements can go a long long way for developers. I don’t see anything super exciting, but then again, I’m not a JavaScript developer. I think the excitement is definitely reserved for some of the systems mentioned below that are taking this scripting language to the next level when it comes to web dev. The further they can go in 2022, the further JS in general goes with them. For this reason JavaScript is often referred to as ‘vanilla’ JavaScript to differentiate it from runtime systems like those mentioned below.
User Experience
Oh, where to start with User Experience (UX). For some reason, since GDPR became the standard, rather than preserve users privacy WHILE continuing to provide a good user experience on a website, we somehow have decided that the ability to track users is enough of a reason to then force bad UX in the form of cookie consent popups. It doesn’t just stop there, marketing pop-ups for signing up to email newsletters, ‘helpful’ chat bots and even more marketing pop-ups. It’s not uncommon in 2021 to arrive into any websites homepage, to see a cookie consent on mobile taking up a portion of the bottom of the screen, a chat bot on top that partially obscures the cookie consent bar, and as you scroll the page an additional pop-up ‘encouraging’ you to give the website your email address.
To see websites three layers deep in various consent pop-ups, marketing pop ups and chat bots just defies belief really to see the state of responsive (mobile friendly) web design let alone how it affects desktop. At least on desktop it feels more spacious while you try and close everything. How exactly is this providing your web visitors with a good user experience? Have we all decided to revert back to the year 2000 before user experience was even important? Is this an indication that website managers don’t care about making websites easy to use anymore?
Could this also be the effect of web design DIY? Small business owners feeling overwhelmed listen to what is, in my opinion, awful marketing advice about what they should or shouldn’t be installing on their websites? You should have heat maps to track where people linger on the page, now you need cookie consent for that with advanced legal terms to allow invasive tracking, now you also need a chat bot to instantly make a sale, now you need to capture an email address as invasively as possible to maximise the number of emails you get etc etc etc.
I honestly feel if we as web designers fail to communicate the value of user experience to website owners, we will have to suffer through this existing terrible and frustrating web experience for a long time. And all this before mentioning the accessibility issues with ALL of the above for disabled people while they navigate the various websites on the internet. Could you imagine having motor difficulties and trying to click cookie consent on your phone with three options on it, with a chatbot you can’t close obscuring 1/4 of the screen, and the longer you take, the more likely a pop-up on a timer will obscure the entire website requesting your email address with an ‘x’ measuring 10 pixels square to tap and close it. It’s honestly more than frustrating, it’s enraging. We had more progress made on web UX years ago, and now… ?
I run Plausible Analytics on this website, because I do understand the need for web analytics, but until I found a privacy enabled solution that didn’t compromise either users privacy or users experience, I actually had disabled Google Analytics completely. Why? To preserve my users’ experience on my website, I don’t believe you should have to agree to invasive tracking in order to navigate my brochure style website and blog. Plausible has the added bonus of being under 1kb in size, it quite literally made no difference to my website pagespeed.
When I see web designers discussing whether carousels are good or bad while talking about the fact that they auto-rotate or the small arrows to navigate, it just feels as though web design UX is stuck in time even in how we discuss things. Looking at the technologies mentioned above, we should be talking about the things that are great for UX, like scrolling on the y-axis on mobile using your finger to swipe, with a lovely snap effect, no javascript, no rotation, no tiny arrows, after all we are in 2021. Apologies for the salty take but.. I just can’t.
My hope, and my belief, is that UX as it pertains to web design at least, will make a resurgence in 2022. Even just looking at the popularity of privacy enabled analytics and also how new they are, perhaps now that options like this are available for those non-ecommerce websites, more web designers will adopt their usage and therefore be able to drop cookie consent, which in many cases has already loaded the cookie anyway. And raising awareness on why pop-ups are bad for user experience is a start. All we need is for web designers to think twice, no matter how experienced they are, whether high or low skilled. And to push back on marketers who don’t know or potentially care about UX. If their priority is make the website a frustrating experience unless you give me an email and this then achieves their goal of maximum email subscription conversions, you need to find a way to show that this is ultimately damaging the overall website, and brand.
I have found the visual page experience update to Google Search Console handy in this regard where organic Google traffic is an equal or much larger priority than email sign ups. The chart displaying the percentage of ‘bad’ experience pages can be very persuasive where your own advice may need supplementing.
Server-side programming languages
The current stable version of PHP in 2021 is 8.1.
W3Techs reports that (Information as at 28/11/21):
PHP is used by 78.2% of all the websites whose server-side programming language we know. – https://w3techs.com/technologies/details/pl-php
So, as much as PHP falls in and out of favour, it’s extremely popular among website programmers. Version 7 of PHP was a major upgrade from 5 for example, and addressed a lot of the security concerns people have about the language. We also have Java, Ruby, C#, Asp.net, Python, and a special mention for the cross-over or bridging languages (kind of like a bridge camera, I’m a photography nerd too!) below that I feel will be taking the spotlight even more in 2022.
With a package manager since 2010, Node.js has been around for a long time but is still a newcomer when compared against the stalwarts above, for example PHP emerged around 1995. The fact that this bridging language competes on their level and even beyond it is phenomenal. Why? Because it’s using a client side dynamic language, JavaScript, and it’s made to operate like a server side language can. Every Node.js installation has built-in support for package management using NPM. This gives Node.js users access to NPM modules that they can plugin to their install.
Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user’s web browser. – https://en.wikipedia.org/wiki/Node.js
Ghost content management system is a really interesting Node.js offering, and there are many more!
Content Management Systems (CMS)
First, let’s take a look at W3Techs report on the popularity of known CMS solutions. Not a big surprise to see Wordpress in first place with 65.1% market share as it has 43% usage of known CMSs. (Information as at 01/12/21.) Wordpress can either be a managed service via Wordpress.com, or self-hosted.
Source: https://w3techs.com/technologies/overview/content_management
Next up are three popular managed solutions, Shopify with 6.5% market share, Wix at 2.9% and Squarespace at 2.7%, and one self-hosted solution, Joomla at 2.7% to make up the top 5 CMS solutions by popularity/most used.
Wordpress was released in 2003 and as the most popular CMS, it attracts attention from hackers looking to find exploits in the code. After all, if you wanted to control the biggest percentage of websites across the internet, you’d target the biggest CMS. So, a lot of what I am about to talk about can be down to this level of attention as placed onto it. In my opinion, Wordpress is a bulky system. By that I mean the amount of code running it, and the number of plugins typically installed on top. Combine those two factors with a theme that’s also clunky, and you could be running an awful lot of code for the sake of a brochure style website, if you aren’t using it for e-commerce.
On October 12th 2021, a public post Proposal for a Performance team was issued on Wordpress, addressing and admitting the CMS has performance issues.
Compared to other platforms (e.g., Wix, Shopify, Squarespace), WordPress is falling behind. Other platforms are on average faster – and becoming increasingly faster – than WordPress websites (see The HTTP Archive’s Core Web Vitals report), and are actively investing in (and marketing) core performance-as-a-feature.
Achieving reasonable performance levels shouldn’t be plugin territory, but part of core…
Source: https://make.wordpress.org
I really welcome this proposal because with so many websites running Wordpress as their CMS, it’s in all of our interests to have fast-loading secure pages as we browse the net. Which brings me to the next point, security. Is Wordpress secure? Well, they do recommend their latest release (September 2021) which includes a security update for core. A lot of potential exploits that aren’t due to the core code, are being introduced via plugins and themes. Their current belief that performance shouldn’t be improved via a plugin, but rather built into core, I feel is the right mentality that will drive this project forward. Getting the speed and security of core is paramount, get those basics right, and tighten up rules for plugins and themes afterwards.
More details on Search Engine Journal on WordPress 5.8.1
When it comes to the big three, that’s Shopify (Founded 2006), Wix (Founded 2006) and Squarespace (Founded 2004), these managed services as Wordpress themselves mentioned, have been working hard on performance and even SEO. Special mention to Wix on their recent SEO efforts, I love their support page for SEO too. This is an area that they still fall down on when compared against a leaner CMS with bespoke design built for speed and UX, they run a lot of code let’s put it that way, but when they are used to run e-commerce systems vs brochure style websites, it is arguable that e-commerce websites do need that weight of code in order to function.
I can only see these solutions grow in 2022. They are accessible ways for small businesses to get online, web designers are already working with these systems to create bespoke templates or customise existing templates. SEO professionals are also working with these systems to optimise them for businesses. This is not something that was necessarily predictable, but it’s without doubt that the ongoing pandemic motivated a lot of businesses to create new online e-commerce websites or upgrade their existing ones. If web designers are quoting to create Shopify websites, that shows me the widespread adoption and recognition that yes, these managed solutions can perform well, in some cases maybe even better than a self-hosted solution, after all a self-hosted solution needs maintenance and resources that small businesses might not be able to keep on top of. These managed solutions are continually updated and improved upon for the same subscription monthly fee each month. I have even been able to get Shopify websites onto page 1 of Google search results, and that’s no accident, that’s because Shopify has worked on it’s SEO capability and performance.
In April 2017, Shopify introduced a Bluetooth enabled debit and credit card reader for brick and mortar retail purchases.The company has since released additional technology for brick and mortar retailers, including a point-of-sale system with a Dock and Retail Stand similar to that offered by Square, and a tappable chip card reader. – https://en.wikipedia.org/wiki/Shopify
Where Wordpress relies on plugins to get a POS system for users, and as mentioned above, people’s trust in the security of plugins might not be as strong, in my opinion, as the trust in the native solution that Shopify integrates into its platform.
Getting out my crystal ball, I would predict Wix gaining even more ground vs Squarespace, with Shopify becoming an even larger competitor to Wordpress as a leading CMS. I was so surprised to see Joomla in 5th place, and I don’t mean that in a bad way, I’m just in the trade for so long! (I’m old.) Joomla hasn’t been on my radar for a long time, but having visited their website as part of my research for this blog post, I can see why they deserve 5th place. They have clearly gone to great efforts to make Joomla as easy to install as possible, and they have a really interesting partnership since 2018 with CloudAccess.net. where you can launch a Joomla website quickly and easily, even choosing your own data centre location, while still having access to traditional web dev tools like ftp and phpMyAdmin that’s if you need them. Which does leave me with the question of maintenance there, I’m unable to ascertain whether the hosting provider is also keeping whatever version of Joomla was installed updated? It’s those details that I think will drive this next wave of innovation. People understand the value of updates and support on an ongoing basis, especially in the current era of GDPR and privacy regulations, it’s never been more important for businesses to keep their customers’ data safe, and that means maintaining systems their data is stored on.
Web 2.0 v Web 3.0
Web 3.0, what even is it? And what was, or is. web 2.0 for that matter? Web 2.0 is defined as:
Web 2.0 (also known as participative (or participatory) web and social web) refers to websites that emphasize user-generated content, ease of use, participatory culture and interoperability (i.e., compatible with other products, systems, and devices) for end users. – https://en.wikipedia.org/wiki/Web_2.0
Web 3.0 is defined as:
Web3, also known as Web 3.0, is an idea for a version of the Internet that is decentralized and based on public blockchains. The concept gained popularity in 2020 and 2021 with interest from cryptocurrency enthusiasts and investments from high-profile technologists and companies. – https://en.wikipedia.org/wiki/Web3
I must admit, this Web 3.0 concept goes over my head, in the same way non-fungible tokens (NFTs) go slightly over my head. I don’t think it’s enough to speak about trends in web design in terms of look/feel and creative elements and put a number on that, for me it has to involve something more in terms of technology. So while Web 3.0 might have a certain design look to it in terms of what’s trendy and what’s advancing the design part of the web, I just don’t fully understand the vision out there for a decentralised web yet.
The idea, as I understand it, is to build web apps on top of blockchain technology. As to how this relates to the building of websites specifically, if anything websites are moving towards static site generation of HTML pages in the cases of brochure style websites and blogs, so yes they might end up not using a ‘traditional’ database, but I personally don’t see them moving into this framework of decentralised apps either in order to serve a back-end. It looks like this technology in the early stages will be used towards fully fledged web apps, with a lot of functionality and online payment systems involving cryptocurrency.
Where I do see the concept of web3 applying to websites, will be around artificial intelligence (AI), where it is said that AI will form a large part of the next iteration of the web. We already see AI content writers, video makers, and of course, search engines are increasingly using AI to understand web content and language, which opens up a new world of opportunities perhaps beyond the devices we are used to like smartphones and computers/laptops.
I found this blog at vitto.cc a great starting point in trying to learn about web3, and while I have a lot to learn about it, it is exciting to see the continuing development of the web. It’s one of the reasons I love working in this area, there is always something new to learn.
Conclusion
When I started writing this blog, I just wanted to take a snapshot of web design, where we are now, where we might be headed. As it turned out I had a lot to say about it. I would love to start a conversation around web design and if you’re interested in this topic, please do connect with me and let me know your thoughts! I’m @proximowebs on Twitter, and you’ll find me on LinkedIn too.
Learn more about my professional SEO services including why ethics matter so much when it comes to hiring an SEO.