Tag: 2021

Jamstack Developers’ Favorite Frameworks of 2021

Which new framework should I learn this year? Is it time to ditch my CMS? What tools should I pick up if I want to scale my site to an audience of millions? The 2021 Jamstack Community Survey is here with answers to those questions and more. 

For the past two years, Netlify has conducted the Jamstack Community Survey to better understand our growing group of developers—the insights inform our services, and they also help developers learn from one another. Our survey data provides a sense of best practices as well as an idea of what else is happening in the community.

What we’re seeing this year: it’s never been a better time to be a developer in the Jamstack community! Jamstack has gone mainstream and the ecosystem is thriving. Jamstack is becoming the default choice for web developers at all stages of their careers across different geographies and touching all industries, and the community is only getting bigger. We also saw a huge rise in the percentage of students in our community over the last year, a great sign for a growing ecosystem.

In 2021, Netlify received more than 7,000 responses to the Jamstack Community Survey. This is more than double the number of responses we received in 2020, confirming the growth of the Jamstack community. 

Here are a few of the highlights from our more technical findings…

Jamstack developers work differently at scale.

32% of Jamstack developers are building sites for audiences of millions of users, but the tools they use and their development priorities are different: for instance, they are more likely to specialize in front-end or back-end work, and they are more likely to consider mobile devices a key target.

JavaScript dominates programming languages for the web—but TypeScript is giving it a run for its money.

For 55% of developers, JavaScript is their primary language. But TypeScript is coming from behind with a growing share.

A plot chart with colored dots representing different languages. Y axis is satisfaction, x-axis is usage. JavaScript is the most used and halfway up the satisfaction axis. Typescript is at the top of satisfaction, and halfway through the usage axis.

Figma is almost the only design tool that matters.

When it comes to design tools, more than 60% of survey respondents use Figma and are happier with it than the users of any other design tool we asked about.

A plot chart with colored dots representing different design apps. Y axis is satisfaction, x-axis is usage. Figma is at the upper-right corner of the chart while everything else is clustered toward the bottom left.

React still reigns supreme for frameworks.

React continues to dominate the major frameworks category in usage and satisfaction, and Next.js continues to grow alongside it. But we also saw growth and higher satisfaction from a challenger framework, Vue.

A plot chart with colored dots representing different frameworks. Y axis is satisfaction, x-axis is usage.React is at the far right, but halfway up the satisfaction axis. Express is at the top of the satisfaction axis but between 10-20% usage.

WordPress leads in CMS usage.

WordPress remains the clear leader as a content management system, but it’s not well-liked as a standalone solution. When used in a headless configuration, users reported much higher satisfaction. This was a breakout year for other headless CMSs like Sanity and Strapi.

A plot chart with colored dots representing different content management systems. Y axis is satisfaction, x-axis is usage. WordPress is all the way at the bottom right corner of the chart, showing high usage but low satisfaction. Sanity has the highest satisfaction, but is between 10-15% usage.

And that’s just a taste of what we learned. To view the complete findings of the 2021 Jamstack Community Survey, visit our survey website


The post Jamstack Developers’ Favorite Frameworks of 2021 appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, , , ,

2021 Scroll Survey Report

Here’s a common thought and question: how do browsers prioritize what they work on? We get little glimpses of it sometimes. We’re told to “star issues” in bug trackers to signal interest. We’re told to get involved in GitHub threads for spec issues. We’re told they do read the blog posts. And, sometimes, we get to see the results of surveys. Chrome ran a survey about scrolling on the web back in April and has published the results with an accompanying a blog post.

“Scrolling” is a big landscape:

From our research, these difficulties come from the multitude of use cases for scroll. When we talk about scrolling, that might include:

According to the results, dang near half of developers are dissatisfied with scrolling on the web, so this is a metric Google devs want to change and they will prioritize it.

To add to the list above, I think even smooth scrolling is a little frustrating in how you can’t control the speed or other behaviors of it. For example, you can’t say “smooth scroll an on-page jump-down link, but don’t smooth scroll a find-on-page jump.”

And that’s not to mention scroll snapping, which is another whole thing with the occasional bug. Speaking of which, Dave had an idea on the show the other day that was pretty interesting. Now that scroll snapping is largely supported, even on desktop, and feels pretty smooth for the most part, should we start using it more liberally, like on whole page sections? Maybe even like…

/* Reset stylesheet */ main, section, article, footer {   scroll-snap-align: start; }

I’ve certainly seen scroll snapping in more places. Like this example from Scott Jehl where he was playing with scroll snapping on fixed table headers and columns. It’s a very nice touch:

Direct Link to ArticlePermalink


The post 2021 Scroll Survey Report appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, , ,
[Top]

The State Of Web Workers In 2021

You gotta appreciate the tenacity of Surma. He’s been advocating for Web Workers as a path forward to better-feeling websites for a lot of years now. He’s at it again making sure we all understand the landscape:

[…] regardless of where you look, multithreading is used everywhere. iOS empowers developers to easily parallelize code using Grand Central Dispatch, Android does this via their new, unified task scheduler WorkManager and game engines like Unity have job systems. The reason for any of these platforms to not only support multithreading, but making it as easy as possible is always the same: Ensure your app feels great.

Surma, “The State Of Web Workers In 2021”

So pretty much every platform has its own version of multi-threading, including the web. It’s just that on the web we have to sort of “fight” against the single-threaded nature of JavaScript by using Web Workers (which are “universally supported” if you’re wondering about that). The question is: use them how and for what? For the latter, Surma shows off an example of a game where “the entire app state and game logic is running in a worker.” For the former, the helper library comlink looks like a big reduction in toil.

Personally, I wish popular tooling would just kinda… do it. I don’t know what that really looks like, but it kinda feels like developer outreach isn’t really moving the needle on this. What if popular tooling like Apollo — which is in charge of a lot of “app state” — were to magically handle all of that off the main thread. Does that make sense? Is it possible?

Direct Link to ArticlePermalink


The post The State Of Web Workers In 2021 appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, ,
[Top]

Jamstack Community Survey 2021

(This is a sponsored post.)

The folks over at Netlify have opened up the Jamstack Community Survey for 2021. More than 3,000 front-enders like yourself took last year’s survey, which gauged how familiar people are with the term “Jamstack” and which frameworks they use.

This is the survey’s second year which is super exciting because this is where we start to reveal year-over-year trends. Will the percentage of developers who have been using a Jamstack architecture increase from last year’s 71%? Will React still be the most widely used framework, but with one of the lower satisfaction scores? Or will Eleventy still be one of the least used frameworks, but with the highest satisfaction score? Only your answers will tell!

Plus, you can qualify for a limited-edition Jamstack sticker with your response. See Netlify’s announcement for more information.

Direct Link to ArticlePermalink


The post Jamstack Community Survey 2021 appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, , ,
[Top]

Jamstack Community Survey 2021

The folks over at Netlify have opened up the Jamstack Community Survey for 2021. More than 3,000 front-enders like yourself took last year’s survey, which gauged how familiar people are with the term “Jamstack” and which frameworks they use.

This is the survey’s second year which is super exciting because this is where we start to reveal year-over-year trends. Will the percentage of developers who have been using a Jamstack architecture increase from last year’s 71%? Will React still be the most widely used framework, but with one of the lower satisfaction scores? Or will Eleventy still be one of the least used frameworks, but with the highest satisfaction score? Only your answers will tell!

Plus, you can qualify for a limited-edition Jamstack sticker with your response. See Netlify’s announcement for more information.


The post Jamstack Community Survey 2021 appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, , ,
[Top]

DevTools for CSS layouts 2021 edition

Chen Hui Jing covers some recent movement in DevTools:

Firefox’s grid inspector was pretty full-featured from the get-to and released together with CSS grid in Firefox 52. It was constantly improved upon since. Chrome added a basic grid inspector tool in Chrome 62 that let developers highlight elements using grid layout, but more robust features were only added in Chrome 87. And now, Webkit [sic] has joined the party, as Safari Technology Preview 123 adds Grid inspecting features as well.

You love to see it. DevTools have a massive impact on how front-end developers think about, build, and of course, debug websites. Stuff like seeing the numbered grid lines visually is a huge deal. I’ve done enough mentally counting what rows/columns I want to place things on, thank you very much.

Direct Link to ArticlePermalink


The post DevTools for CSS layouts 2021 edition appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, , ,
[Top]

2021 Design Systems (Survey/Courses)

My friends at Sparkbox are doing a survey on design systems, as they do each year. Go ahead and fill it out if you please. Here are the results from last year. In both 2019 and 2020, the vibe was that design systems (both as an idea and as a real thing that real companies really use) are maturing. But still, it was only a quarter of folks who said their actual design system was mature. I wonder if that’ll go up this year.

In my circles, “design system” isn’t the buzzword it was a few years ago, but it doesn’t mean it’s less popular. If anything, they are more popular almost entering the territory of assumed, like responsive design is. I do feel like if you’re building a website from components, well, you’ve got a component library at least, which is how I think of design systems (as a dude who pretty much exclusively works on websites).

I’d better be careful though. I know design systems mean different things to different people. Speaking of which, I’d be remiss if I didn’t also shout out the fact that Ethan has a handful of totally free courses he’s created on design systems.

As you might have guessed from the titles, we’ve broadly organized the courses around roles: whether you’re a designer, a developer, or a product manager, we’ve got something for you. Each course focuses on what I think are the fundamentals of design systems work, so I’ve designed them to be both high-level and packed with information


The post 2021 Design Systems (Survey/Courses) appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, , ,
[Top]

An Event Apart Spring Summit 2021

Hey, look at that, An Event Apart is back with a new event taking place online from April 19-21. That’s three jam-packed days of absolute gems from a stellar lineup of speakers!

Guess what? I’m going to be there, along with my ShopTalk Show co-host Dave Rupert doing a live show which could include questions and comments from you. Dave will be doing a talk as well, on Web Components, which I’ll be in the virtual front row for.

What else? You’ll learn about advanced CSS from Rachel Andrew and Miriam Suzanne (believe me, there is a lot going on in CSS land to know about), inclusive and cross-cultural design from Derek Featherstone and Senongo Akpem, PWAs from Ire Aderinokun, user research from Cyd Harrell, and much, much more. Huge. Check out the detailed Spring Summit three-day schedule and prepare to be wowed by all the names on that list.

You can join the fun by registering today. An Event Apart actually gave us a discount code just for CSS-Tricks readers like yourself. Use AEACSST21 at checkout and that’ll knock $ 100 of the price of a multi-day pass.


The post An Event Apart Spring Summit 2021 appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, , , ,
[Top]

How to Develop and Test a Mobile-First Design in 2021

The internet has connected 4.66 billion people with each other as of October 2020. A total of 59% of the world’s total population. Amazingly, this is not even the surprising part. The stat to look out for is mobile users and their rise in the internet world. Out of 4.66 billion people connected to the internet, 4.28 billion are mobile internet users. A number that reminds us of how vital mobile users are and why we need to keep them on priority. As surprising as these numbers are, everyone saw this coming with the sudden rise in mobile users and mobile sales all around the world. As a web developer, we have been prepared in shifting our design methodologies and development tactics according to mobile users for some time now. One such design paradigm is the mobile-first design which is a witness to our commitment to mobile internet users all around the world. A design strategy that starts with mobile users and works around their interest. This post takes the mobile-first design into the centre and explores the complexities of mobile-first design development and testing and how it affects our business in a positive way.

What is a Mobile-First Design?

Mobile-first design is the process of planning and developing a website keeping in mind the mobile-users first. This methodology of development changed from desktop-first, which has always been the way, reacting to the surge in mobile internet users around the world. Mobile-first design is a part of progressive advancement method in which we progress towards more advance design slowly.

Progressive advancement starts from a basic design fulfilling the requirements of the mobile device. This basic design consists of minimal elements on the webpage eliminating everything that a mobile user is not interested in. From here, we take another step and add a few more elements increasing the complexity of our design while sticking to the modern web design techniques and mobile-friendliness. This goes on until we are satisfied and have implemented all the necessary modules in our application.

Credit: Smartz

Mobile-first design is a practice of starting the development with respect to the mobile user or a mobile device first. Contributing 52% of the internet traffic today, a mobile-first website can help us lift the overall engagement and make us visible on the internet (on Google). With the start of mobile-first indexing, Google has also twisted their algorithm to show that mobile users are the priority today. Mobile-first design is not a complex task but a series of small development changes that can help your website render perfectly on the mobile with a happy user. To develop a mobile-first design website, we need to absorb some habits and remember a few tips to test the application efficiently.

How To Develop a Mobile-First Design

The journey of developing a mobile-first design can be roughly divided into the following stages:

Wireframing

Wireframe’s importance in a mobile-first design is similar to a map when we construct a new building. Wireframe provides an architectural way of how things are going to be. With wireframes in hand, not only technical teams, everyone related to the project can understand the high-level view of the application or in user’s terms: how will my application look?

While clients and analysts can tick mark their checklist of requirements, developers can understand how the elements will be laid down on to the application.

Credit: Balsamiq

A research paper published by KPMG, determining “Unsuccessful Information Technology Projects” revealed poor project planning as one of the reasons for project failure. The other good reason to use wireframes is that they increase the efficiency of the developers because of the clearer objectives. A similar result can be seen with TDD and BDD approach in testing.

Use Responsiveness and A Responsive Framework

A responsive framework is a crucial step in mobile-first design development. A responsive website adjusts itself with the environment it is rendered on such as screen size, platform or orientation. Mobile devices do not have a fixed size in the market. An overwhelming list on Screensiz will make you believe that applying media queries and meta tag will not work for all the devices and a generic approach is the only solution. Responsiveness is not only adjusting to the screen of the device, but also to the user’s experience. For example, images are an important part of a web page. Even though a user may skim the content, they will glance at an image at least once. It needs to be perfect! But while shrinking the aspect ratio of the webpage, we unknowingly focus out the image subject from the image. In the following image, the comparison speaks this point as the family becomes out of focus on a smaller screen device:

Simply resizing is a risky business as an image may lose its importance altogether. A good responsive website takes care of this aspect and render a different lower quality but cropped image on a smaller screen as below:

Or if I just show the mobile image, it has been cropped to as follows:

Since the focus is not the tree but the family, we need the users to see our subject with clarity. This is a responsive nature according to the user experience which is a part of a responsive website.

A responsive framework keeps the responsive needs in mind and has built-in capabilities to enhance the responsiveness of the website. With a responsive framework, the developers need not take care of every little thing and can focus on major issues such as the image resizing shown above. Responsive frameworks are more successful and popular in a mobile-first design strategy.

Follow the thumb rule

Before placing our content on the web page, we have to decide the location of each element with respect to the interaction habits of mobile users. A simple reason for this thought is the generic way most people use their phone; with one hand.

75% of people use their thumb to operate the mobile device which when painted as a red-green zone looks as follows:

Credit: Biracial Booty

The green zone in the above image shows the easily accessible area on a mobile screen. Our most important elements, such as CTAs, should reside in the green zone for a mobile-user to access easily. Remember that the user is not using a mouse to operate a mobile device. Reaching the red zone will take efforts and repeated actions of which, voluntarily or involuntarily, a user always notices.

The below-given image shows the efforts a user would have to take with a very small design change (which in my way, is not a mobile-first design):

Credit: Ranjith Manoharan

This small change can lead to increased user engagement demanding no efforts from our user.

Untangle Your Mobile-First Content and Design

Designing a web page desktop-style demands no extra attention towards the content. The screen is big and can accommodate whatever content you wish to add. The same attitude does not work in a mobile-first way. When the screen is smaller and we have only less than 3 seconds to impress a user, the content needs to be concise and to the point. A good solution to replace a lot of content from your screen is to use images, a hierarchical method of design or through a better user interface.

The content thoughts are to be replicated when we work with elements in a mobile-first design for the same reason of lesser screen space. Providing a congested screen with too many elements spread throughout confuses a user and slides him away from the CTA conversion goal. This is also called a minimalistic approach (or minimalism) in web design. A minimalistic approach distributes too few elements on to the screen leaving out a considerable white space for the user. The following image shows the minimalistic design:

Credit: Johnyvino

But a mobile design is different from a mobile-first design. Eventually, we would have to extend this web page for the desktop users too. Minimalism on the desktop is also a good approach given that the font-size and hero images are equally proportionate.

Decluttering our design and content reminds us why it is important to move from basic to advanced and not vice-versa (also called graceful degradation). Had it been the desktop design at the start, the team has to conduct the brainstorm sessions first to fill a large screen and then removing them one by one for the mobile device. By that time, management becomes too complex, hard to confine our elements and takes too much time and efforts. Therefore, start basic with a minimal design and then move forward which is the initial step in a mobile-first design strategy.

Prioritize UI and UX

A mobile-first design needs to revolve around mobile users to increase engagements and conversions on our web application. While animations and transitions are as fancy to look as to touch, the user experience is much more than explicit elements. Our user experience need not be too ostentatious but should engage the users without them realising our intentions. For example, elements should be extremely easy to find on a web page. A mobile user should never struggle to find the search button Conventional locations of the elements work in this case such as a navigation bar is always expected to be in the corner (left or right).

Another aspect in prioritizing the user experience is to enlarge the touch targets for comfortable interaction. Unlike a desktop with a small pointed arrow, we touch our screens with our thumbs which require a considerable large area. A mobile-first design encourages large clickable elements with white space between them to avoid unwanted clicks.

It is not a bad idea to keep these parameters intact while progressing towards the desktop side. Businesses have started to keep a better UI including large boxes to touch on desktops as well which shows their mobile-first design approach clearly. Enlarging elements also include determining the best font-size for your web page considering the smaller screen size. Font-size are easier to switch through media queries and you can follow the following chart to decide which size to go for in which scenario:

Credit: Airbus

Remember that font-type also affects the font-size visibility and readability on a mobile device. Therefore, it is better to test and find your perfect size taking the above chart for reference.

Tip: A small thing to remember in developing a mobile-first design is to avoid hover-only elements on your web page. Hovering is a great tool on desktops but mobiles do not have any support for hover. They work on touch interaction. You can keep the hover design along with the touch facility but constructing elements only with hover property is not a good idea.

CTA Placement

CTA is an important button. It helps in conversion goals and every business wants its users to click that button and increase their conversion rate. Therefore it demands special attention from the team members. The location of the CTA is the first thing that should be finalised carefully reminding yourself not to let our user work too hard.

CTAs should always be in the reach of the thumb (remember the green zone?) and on the first presented screen (above the fold) as well.

Apart from CTA placement, the message and presentation of a CTA is also an art in itself but let’s leave that for mobile-friendliness discussions.

Navigation Bar

The navigation bar on a mobile-first design needs simplification more than the desktop ones. While the desktop design has also transformed navigation bars into different unique designs, mobile-first is still enjoying the conventional hamburger menu style. People expect that today! If a user cannot find an option on the landing screen, he looks for those three horizontal lines that he knows will take him to what he is looking for.

The following image shows LambdaTest transformation of the navigation bar on two different devices:

The mobile-first approach helps us in shrinking down the available links on the navigation menu as long lists of links are not appreciated well. For those who cannot sacrifice, a nested layout seems a better choice than intimidating the user with a long list of links. In addition, it also keeps our presentation clean and encourages minimal design with decluttered content approach.

Say No To Heavy Elements

A web page’s loading speed has become a make or breaks parameter in website designing. An Unbounce survey shows that 70% of the customers are influenced by a website’s speed. Their decisions are affected by the FCP or full page load. Rendering the FCP (the first thing visible on your website) is a better choice as the user has something to get engaged in.

Google recommends a loading time of 2 seconds and under. Currently, the majority of these websites do not follow this criteria. As much as 57% of peopleleave a website that takes more than three seconds to load. The conversion rates also take a toll when the page speed is higher than expected affecting business directly. So, how can we save ourselves from this?

Using lighter elements on a web page crafted for mobile users is the first step to go for. If images exist, they probably should be in a lossless algorithm format such as JPEG and of lower size. Resizing them to a lower ratio helps too since the mobile user is rarely concerned about high-quality images apart from the product images. Using CDNs can also help in decreasing the page load time. For a WordPress website, plugins should be as minimal and light-weight as possible. Static plugins are a good start but eventually, the elements on a web page should be lighter, using asynchronous algorithms for FCP and should make fewer requests to the server.

How to test a mobile-first design?

The above points assist us during the development of a mobile-first design that starts with a basic minimal design for the mobile user and increases the complexities without hindering the user experience. But an equally important aspect of a web application is testing it. Testing an application can point out hidden bugs and functionalities that either is not liked by the people or behave inappropriately. Let’s check out how we can go ahead and polish our mobile-first website by testing it.

Use Tools

Similar to using responsive frameworks in the development which gives us in-built functionality and takes care of common code, tools do the same in testing. A mobile web testing tool not only creates an environment for the website to render as, on a mobile device, but it also provides certain features that are extremely important for a mobile-first design.

Consider one such tool LT browser I recently discovered on ProductHunt.

LT Browser is a browser made specifically for mobile web testing and responsive testing of the website. It provides 45+ screen sizes for the testers to render their website on. With such a tool, you can easily find bugs using in-built debuggers and leverage hot reload features to help you in development as well. With built-in integrations and performance reports, you can analyze the performance and share it with your teammates easily.

LT Browser showing two devices side-by-side with different orientations

Test & Debug on the go – Using LT Browser users can test and debug their websites on the go, its in-built developer’s tool really comes in handy to make a website seamless across devices.

Network Throttling: This is an amazing and unique feature offered by LT Browser utilizing which a user can check how the website performs under high and low network bandwidth.

Local Testing: Local testing allows the developer to test their website even before pushing their website online. With the local tunnel, they can view the website on any of the 45+ devices from their local system.

Performance Report: To analyse the final website performance, developers and testers can view the google lighthouse based performance report that will help them change certain website aspect in order to score more both on mobile and desktop devices.

Tools help you increase productivity and keep you efficient during the process. The choice of tools is the personal choice of the tester but they definitely should play a part in the overall testing.

Cross-Browser Testing

Cross-browser testing is the process of analyzing your website on different target browsers, operating systems and resolutions. For a mobile-friendly website to be successful, it should render as intended on a mobile screen without worrying about the platform and browser used. This can be tested through cross-browser tools like LambdaTest

As a tester and a developer, it is definitely not a good idea to take these efforts manually. There is an overwhelming number of OS, browser and resolution combinations that will take too much efforts to install and test. A better way is to go for online cross-browser testing tools with mobile browser and OS support or a mobile-specific browser like LT Browser discussed above.

So, what are we looking for in a cross-browser testing process?

Cross-browser testing looks for issues with the elements of a web page and whether they are supported or not. While functionality testing is another segment of testing, cross-browser testing points out the cross-browser compatibility issues. For example, if you have used CSS subgrids on the web page, they might not render on Google Chrome version 62. The same goes for Javascript libraries and other code. With a browser matrix in our hand, we can rest assured after performing the testing that our user will not be confused as he would when an element crashes on the webpage.

Validate HTML and CSS code

Every mishap on the web page is not the browser’s fault, sometimes programmers commit mistakes too! Since a web page is rendered or parsed by the browser and not compiled, errors and warnings do not stop a web page from loading. Now we have performed cross-browser testing but still cannot find an issue with a missing element is generally a wrong syntax fault. Such syntax errors and not following the W3C web standards can land us in trouble when we progress from mobile-first to complete desktop designs.

HTML and CSS code is very easy to validate. There are a lot of tools available which can do this job for us. Some of them are Validator.nu, W3CMarkup Validator and W3C CSS Validator.

Network Performance

In our efforts to test the page load speed of the web page, a major hurdle is a network. A slower network means slower downloading of web pages and more page load time. For a mobile-first design, it is extremely important to cover all types of users while performing the testing. One such section is the users with slower networks such as 3G network constituting 12% of North American internet users. Only 4% of people use the 5G network in North America now. Imagine this number for countries with poor network infrastructures!!

Network performance can be tested on a real device by switching the connections or through an online tool that provides such features. LT Browser has a network throttling feature to test the website on different connections which helps while performing responsive or cross-browser testing.

A/B Testing

A/B Testing is a type of variation testing or split testing that shows different variations of a web page to different segments of users. Website owners then analyze the performance of both versions and choose the better performing one. For a mobile-first design application, we may develop everything perfectly following every rule in the textbook but the final verdict is up to the user. If the user is not pressing that shiny CTA button, we need to fix that by knowing what the user wants.

A popular question in A/B testing is, where do we create the variation? We cannot jumble up every element on the web page and create fifty variations for the users. This can have an adverse impact on the business. To understand where we are going wrong and which elements need adjustments we can choose the Heatmap features. Heatmap allows the web app owners to see the user’s engagement with the web page and which part are they ignoring.

A famous case study of A/B testing includes the 40% improved sales on a varying page of EA Sports’ SimCity 5 from this:

To this:

Buyers were least interested in the pre-order offer I guess!!

Usability Testing

The final step in completing our mobile-first web design is to present it to real-users and take their feedback. A/B testing is good, but even if you see the Heatmap of the web page, you cannot talk to a real user and ask them why are they not pressing the CTA button? Usability testing covers this hole.

Usability testing is performed with the real users who should be the target audience of the application. For example, you cannot ask a poet to check out a coding website right? Once these users are selected, we ask them to either record their session, their screens and speak their thoughts out loud. Sometimes, the testers can sit with the users too and make their notes by asking the questions. Sometimes, we can just ask them to fill a form with various options. Whatever way you do, usability testing is important and uncovers hidden bugs that are hard to find in a mobile-first design which is a tricky business in itself.

Why does mobile presence matter?

Our analysis of mobile-first design and its development techniques will make you wonder, why should I do mobile-first design? Does mobile presence matter that much?

A few days ago, I was going through my website on Google Search Console and the popped up message was the following:

Mobile-first design is so important today that Google considers mobile-first indexing as the primary search index technique and increasing the visibility on mobile searches which constitutes 52% of the internet traffic!! But this is from Google’s side, what do we have in the box for us?

Better Google Ranking

A mobile-first design is mobile-friendly. It is for mobile users. Therefore, Google realizes that we have a website that is perfect for a mobile user and makes us more visible on queries generated from a smartphone. As a result, our rankings improve. Better Google ranking attracts other businesses as we are more visible and can advertise for them on our website if we want. Since users generally do not remember the web site’s name, a Google search will help us generate traffic and conversions.

Higher Conversion Rates

A mobile-first design will ensure a decrease in the bounce rate. When bounce rates are low and people are actually interested in your website, they will stick to it and will also return back often. Given that the CTA is positioned right with all the eligibility criteria satisfied, a mobile-first design will push your conversion rates higher directly generating a better engagement and goal establishments. As a result, you will get a steady business from your application.

Large Audience Coverage

Businesses also generate a large audience base when they are visible on the Google rankings and have built a mobile-first design. A large audience base is the strength of any business. They require lesser efforts to be engaged as the trust has been established. On the other hand, seeing a larger involvement with your application, you can also introduce other features and services. Such a strong base is a marketing bonus for businesses.

Better Market Presence

Satisfying all the three requirements discussed above directly results in a better market presence. Even though mobile-first designs are recommended for every business, they are currently rare. Mobile-first design is yet to become a standard in web development and choosing it will keep you ahead in the race. A Google search keyword that shows your link in the query results increases your market presence among the competitors. They not only have to work harder to overtake you, but they might also need to restructure their designs if they are still working on desktop ones.

A better market presence means better word of mouth about your happenings, features and upcoming highlights. Such a presence is a direct cause for better revenues and a better future.

Is Mobile-First similar to Mobile-Responsive?

A short answer; no! Mobile-first is a design method. With the mobile-first design, we develop our web application for mobile users first. This starts from a very basic design and gradually advances towards a more complex design structure while keeping in view the mobile-friendliness and mobile users on priority. Mobile-first design is not a development technique but a design strategy that works as a catalyst in development. The developers can get a clear objective and work faster with the defined design.

Mobile-responsive is the ability of the website to adjust itself according to the mobile screen size. A mobile-responsive design need not start with the mobile version of the website and neither takes the thumb area or content relevance into account. Mobile-responsiveness is just concerned with rendering the website on a smaller device.

A mobile-responsive design strategy can be considered a part of the mobile-first design since to produce a mobile-first design, the application needs to be responsive in nature. The mobile-responsive design strategy was a good call when the mobile users had just started to increase. Today, there have been extensive researches on mobile designs in which a mobile-responsive design strategy is hard to survive. To cater to the needs of 4.2 billion mobile internet users, we need a mobile-first design.


The post How to Develop and Test a Mobile-First Design in 2021 appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, , , ,
[Top]

Maximally optimizing image loading for the web in 2021

Malte Ubl’s list for:

8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.

  1. Fluid width images in CSS, not forgetting the height and width attributes in HTML so you get proper aspect-ratio on first render.
  2. Use content-visibility: auto;
  3. Send AVIF when you can.
  4. Use responsive images syntax.
  5. Set far-out expires headers on images and have a cache-busting strategy (like changing the file name).
  6. Use loading="lazy"
  7. Use decoding="async"
  8. Use inline CSS/SVG for a blurry placeholder.

Apparently, there is but one tool that does it all: eleventy-high-performance-blog.

My thoughts:

  • If you are lazy loading, do you really need to do the content-visibilty thing also? They seem very related.
  • Serving AVIF is usually good, but it seems less cut-and-dry than WebP was. You need to make sure your AVIF version is both better and smaller, which feels like a manual process right now.
  • The decoding thing seems weird. I’ll totally use it if it’s a free perf win, but if it’s always a good idea, shouldn’t the browser just always do it?
  • I’m not super convinced blurry placeholders are in the same category of necessary as the rest of this stuff. Feels like a trend.

Direct Link to ArticlePermalink


The post Maximally optimizing image loading for the web in 2021 appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, , , ,
[Top]