Importance of Web Design in Boosting Your Business

August 10th, 2022 No comments

First impressions on websites matter. Make them matter.

66% of individuals would rather view something wonderfully designed than something straightforward if they had only 15 minutes to view the information. Thus, the design of your site is an essential component. For your business website to be successful, you need to understand the importance of web design.

Your website is a gateway to business through which visitors connect with your business. That’s how visitors view the business as a whole. A poor website can seriously damage a business’s reputation, whereas a good website can increase its influence and generate leads. A study found that 38.5% of web designers believe that users leaving a website is primarily due to the outdated or non-appealing design.

Additionally, responsive web design is extremely important in this. There’s a strong possibility a visitor will simply leave your website if they have to pinch to zoom in and out. Making changes that alter how people view your website the first time they interact with it can make all the difference between these two results for you.

This shows why web design is a crucial aspect to boost your business. Now, let’s know what are the key components for a great web design.

Latest Trends To Keep In Check

Well, as we discussed above, how impactful can the design of your website be? Now, your website must adapt to the latest trends. But what are these trends?

Designing your website should take into consideration some current trends. Such as:

  • Claymorphism
  • Memphis Design
  • Complex Gradients
  • Behavioral design
  • Visible Borders
  • Glass Morphism

By keeping these trends in mind you can start designing your websites. Although there are some future web design statistics that you shouldn’t miss. 

So, let’s check the stats now.

Web Design Statistics To Keep In Check

Your company website is more than simply a place where people can learn the bare minimum about you and your brand. It becomes a helpful marketing tool and valuable addition to your company.

Additionally, your website design should build trust and inform the target audience, in addition to meeting the fundamental needs of your business. For a successful manufacturing website overhaul or facelift, keep these things in mind.

Well, to make sure you design a proper website, you must be aware of the latest trends and statistics. Here, you will find some interesting and crucial stats on web design that will help you understand the various aspects of designing a website.

Now, let’s begin.

The web design of your site accounts for 94% of first impressions

“The first impression is the last impression”. Well, even in the world of web design, 94% of first impressions are design-related. Thus, it is one of the most important & crucial aspects to keep in check.

As per the research, users will form a judgment about a website in about 0.05 seconds. You want to make a positive first impression when someone discovers your company for the first time. This may affect how they view your company going forward. The bulk of first impressions made of your website is based on its design. Therefore, it’s important to make a good impression with your web design, create a stunning website, and engage your audience with your page.

To make a lasting first impression, design a visually striking website that attracts and draws in your viewers. 75% of people acknowledge evaluating a company’s credibility depending on the layout of its website. Build a website that represents your business, is aesthetically pleasing, and offers users a great first experience on your site, whether you do it yourself or employ a web design firm.

75% of website legitimacy comes from design

You want people who find your company online to recognize it as a legitimate operation. Because a poorly designed website may give the impression that you are spamming or unreliable. Unattractive layouts or content will turn 38% of users away.

Therefore, it is quite important to put time, money, and effort into creating a professionally designed site to ensure that you increase sales as well as credibility and trust with your audience. Because if your website isn’t beautifully designed, you run the danger of losing your audience’s trust and discouraging them from using it.

For your website, invest in top-notch design. To develop ideas on how to create a top-notch website, you can look for samples of excellent design to obtain a sense of how your site should appear. You may build a trustworthy website by picking the appropriate colors, aesthetic components, and layout.

Websites that are well-designed can have a visit-to-order conversion rate of 200% higher than those that are poorly designed.

You should also ensure that your website is safe. To guarantee that you’re giving your audience a secure browsing and buying experience, check to see if your website has HTTPS and an SSL certificate.

When consumers have a bad user experience, 89% switch to a competitor

You must be preoccupied not only with creating a positive first impression but also with maintaining that impression as visitors browse your website. Even the most nicely crafted website will be rendered useless if users are unable to navigate it and find the information they seek. 

44 percent of consumers share negative online experiences with their friends. Users will leave if they are unable to quickly access the information available on your website. If you don’t want to start losing leads to the competition, you must prioritize user experience on your website. You get a $100 return on each and every dollar you invest in enhancing the user experience on your website. The key to success is an advanced website that is simultaneously appealing and functional.

Focus on features that will improve the user experience for your audience while you construct your website. As per the research, 42% of visitors tend to leave a website due to inefficiency. Thus, pay attention to details like creating a well-organized navigation system, including visual elements to break up the text, and making sure your website runs quickly. The website design must be easy to navigate.

The viewer should constantly be aware of their location on the website and have quick access to any location they desire. If one is accessible, it would be a great idea to use it. Although it seems simple, most websites might be made better in this regard. Functionality should be the goal because there is a thin line between an interactive menu and one that is obtrusive.

85% of adults believe that a company’s mobile website must be at least as good as its desktop website. Thus, you may build a more user-friendly website with the aid of all these components.

On their homepage, 70% of small company websites lack a Call to Action (CTA)

Credit: Materio React Admin Template

Contrarily, whether you’re a Fortune 500 firm or a Small/Medium Business, implementing Calls to Action incorrectly can have a major impact on your turnover. In actuality, CTA errors are unaffected by the size, age, or reputation of the organization. Depending on the type of business you operate, the type of CTA you include on your homepage will vary, but users will leave if there isn’t one. Users would like to know what your website intends them to accomplish, whether they realize it or not.

When creating a CTA, you need to comprehend the psychology of the customer. As you can see in the image above, ThemeSelection has placed CTA buttons very properly. As a visitor when you land on the product page you will definitely look for the demo or preview button to get an overview of the product. Thus, this is the exact area where you can use the CTA that navigates to where exactly the user wants to go.

According to research, most people base their decisions on whether their acts are reasonable and likely to be in their best interests. It’s surprising how frequently businesses lose out on opportunities to connect more deeply with potential customers. Almost 70% of small companies don’t have a proper Call To Action, which leads them to poor business.

Thus, You must pay attention to Call To Action design to prevent a serious loss. Through CTA, You may convince your visitors to read your emails or do particular actions, like making a purchase or joining the mailing list, by using a well-written CTA. You can create great CTAs by placing text on a button or just a link with the appropriate anchor text.

A website’s layout and navigational links are viewed by 38% of consumers

Visitors to websites wander all over the place, therefore your website’s navigation must be logical, approachable, and simple to use. If customers have even a slight difficulty locating what they’re looking for on your website, they won’t hesitate to leave and find another. As per the research, 38% of users who visit a website for the first time examine the page’s design or navigational links.

When visiting a website using a mobile device, 83% of users expect a faultless experience. Even though it now seems obvious, using a responsive website will guarantee that it will appear beautiful on every device a website visitor may use. Thus, it is crucial to provide proper navigation. However, users might not always use it. But still, chances are high that they will be impressed by the easy and flawless navigation. In addition to informing visitors about your products or suite of services, your website also acts as your primary point of sale online.

74% of users are more likely to return to mobile-friendly websites

People spend 70% of their Internet time on mobile too. With more people acquiring access to mobile devices, such as smartphones and tablets, it’s crucial to have a website that works well on them.

If businesses’ mobile websites or apps offer pertinent product recommendations, 63% of smartphone users are more inclined to purchase from them. Reactive design is one of the most important components of a mobile-friendly website. By using responsive design, you ensure that your website is compatible with any device a user may be using. As you can check the graph below, smartphone users are rapidly growing. Thus, you should not avoid these stats.

More than 54% of all web traffic worldwide is currently generated by mobile devices. Therefore, you risk losing up to 50% of your potential clients if your website isn’t mobile-friendly. Consider a smartphone user accessing a desktop-friendly website. It’s nearly impossible for potential consumers to locate what they’re searching for if text, photos, and buttons don’t adjust to fit touchscreen controls and smaller screen sizes; after a few incorrect clicks, they’ll probably go somewhere else.

According to Google’s research, almost 75% of users say they prefer a mobile-friendly website, and 96% of users claim they have come across websites that were not made for mobile devices. For businesses looking to interact with mobile users, this is both a major issue and a major opportunity.

Google’s mobile-friendly checker tool can help you determine whether your site is mobile-friendly.

Each year, slow-loading websites lose $2.6 billion in revenue

Yes, you heard correctly. A slow load time can increase shopping cart abandonment by 29.8% because their websites don’t load quickly enough, websites lose out on over two billion dollars in revenue each year. People dislike having to wait as websites load information, which discourages them from completing a purchase. This website statistic is important because it demonstrates how urgently your audience needs to acquire content. Make sure you’re on the winning side of the fast-loading website vs. the slow-loading website battle.

It has been reported that websites that load in five seconds earn 70% longer user sessions. Without a quick website, your company will be left behind. Fast-loading websites from your rivals will bring in more visitors and money. Your conversions will rise by 7% simply by speeding up your website by one second.

Design statistics indicate that 47% of users anticipate a web page to load in 2 seconds. To determine how quickly your site loads and where improvements might be made, you can utilize tools like Google Pagespeed Insights. You may also spend money on page speed services to hire a third party to optimize your website so you can concentrate on managing the influx of new visitors.

Users spend 88% more time on pages with videos
Credit: Top Design

In 2021, 9 out of 10 viewers indicated they wanted to see more videos from brands and companies, while 96% of consumers increased their online video consumption. In fact, by 2023, it’s predicted that the average individual would watch 100 minutes of online streaming daily. Well, that’s why you shouldn’t neglect the importance of videos regardless of your business type. Automatically playing videos can significantly boost a page’s intrigue. They can be utilized to tell a narrative and greatly minimize the quantity of additional text required to describe your company.

When optimizing your website, you should include visual areas of interest to draw viewers in and encourage interaction. Consequently, it is wise to include videos when designing and optimizing your website. It will capture the attention of your visitors right away and persuade them to get in touch with you. This is known as “conversion,” and it’s likely the ultimate objective of your website. As per the research, users spend 88% more time on your site if you have videos on it.

This will enhance the visual attractiveness and interactivity of your website. But there’s no need to go overboard. Your audience can benefit and the user experience will improve if you make videos for difficult ideas or lengthy material. The degree of interaction should never surpass the benefit because, as previously said, there is a thin line between “interaction” and “annoyance.”

The most appreciated elements in website design are color (40%), and photos/images (39%)

According to survey data, companies looking for new clients can employ marketing color tactics to boost sales. Color preferences are ingrained instincts that may not be reasonable but have a significant impact on our decisions. Therefore, a person’s perception of a website’s color scheme may influence whether they decide to buy something or use a service.

When buying a product, According to a study, 84.7 percent of customers claim color as the main reason they choose a particular product to purchase, and 93 percent of consumers emphasize a product’s visual appeal when making a purchase. Thus, color plays a really vital role to boost the business. 46% of individuals think blue is their favorite color to see on a website, while only 23% say yellow is their favorite color for website design. Businesses should consider color selection closely and customize color schemes to user preferences.

Photography engages users and captures their interest when it comes to site design. Websites with poor photos have a higher chance of having a higher bounce rate from uninterested visitors. Beautiful photos of your business’s facilities, staff, and products help you come off as professional. Nearly 39% of respondents mentioned photos/Images as the affecting elements while visiting a website. Photos engage users and capture their interest when it comes to site design. Do note that websites with poor photos have a higher chance of a higher bounce rate from uninterested visitors. While using photos of your business’s facilities, staff, and products help you come off as professional.

Thus, your company should start by adding photographs and choosing a color scheme for your website. Then, concentrate on incorporating not just the previously listed visual components, but also typography, infographics, and animation.

Visitors to the website first browse the top left corner.

Users’ eyes naturally travel from the upper-left corner of your website down and to the right after they arrive. Similar conclusions were reached by a Yahoo study. Look at your website to see what is available in these zones. To the top-left corner, reposition the value proposition. When someone does choose to read a page, their eyes move horizontally from left to right, frequently focused on the upper-left corner of a webpage or the main content section of the webpage, which is generally triangular.

You can get a general description of the eye movement pattern when gazing at (often text-heavy) content as in the Gutenberg diagram. Except for the region at the bottom right, it generally fits this zoning conclusion. The top left is the major optical area, the top right is the strong fallow area, the bottom left is the weak fallow area, and the bottom right is the terminal area. The user’s eyes naturally start at the main optical area and move in sweeping motions across and down the display to the terminal area.

gutenberg diagram
Gutenberg diagram

However, this pattern varies according to the design and function of a page. For instance, a person’s eyes will move differently over a page with a two- or three-column layout, a blog with a lot of text, or a slideshow with a lot of photos.

Thus, it is necessary to place things in the right area.


As you can see, website design is constantly evolving and changing. Some aspects that were popular years ago (such as picture sliders) are falling out of favor, and it’s difficult to forecast what websites will look like in the future.

Whatever “best practices” you follow, keep in mind that a website isn’t “done” after the first design. People are more likely to trust websites that have recently been updated or evaluated.

Commit to researching web design statistics and keeping trends in mind. Use them to demonstrate your responsiveness when rebuilding your website.

The post Importance of Web Design in Boosting Your Business appeared first on noupe.

Categories: Others Tags:

Tips On Managing An Offshore Development Team

August 10th, 2022 No comments

Remote management of a development team may be quite complex, especially if you never worked with a remote team before. While it’s easier to just assign tasks and expect good results, it’s much more effective to take a thoughtful approach and establish a great relationship with the team. For company owners, it is important to develop a strategy that will help transform several remote developers into a cohesive and robust team. We’ve rounded up the top 5 management tips to help you build strong relationships with your remote team and achieve great results together.

Maintaining a positive attitude: 5 tips for successful management and retainment of your team

The fact that the COVID-19 pandemic has changed the labor market is no longer in doubt. The appetite for remote employees remains high among employers, who offer an option of remote work to increase employee retention, increase productivity and reduce infrastructure costs. However, the remote model of work brings challenges as well. Juggling time zones, lack of physical communication and distractions at home are just some of the struggles that both employees and employers face. Therefore, companies need to be flexible and adaptive in managing their remote teams so nobody feels left out. Below are our recommended tips for building a great and trustworthy relationship with your remote developers.

Regular meetings and communication on the schedule

If meetings are not managed properly, they can harm your project and cause missed deadlines or major miscommunications. Strict adherence to the schedule of meetings will help you organize your team’s workflow in a way that everyone stays on track. Here are some tips to help you get the most out of meetings:

  • Prioritize meetings: it’s not obligatory to schedule meetings for every subject that you need to discuss. Sometimes, an email, a phone call, or a Slack message may be more efficient and quicker. Hence, prioritize your meetings and schedule only important ones.
  • Prepare for meetings: if a meeting is not properly planned, it can quickly turn into a mess. Therefore, before the meeting, plan the time and list down the main points to discuss. Also, it’s a good idea to send everyone meeting notes before the meeting.
  • Understand different meeting cycles: daily standups, sprint planning, and team retrospectives all have different purposes and duration and should be planned correspondingly. 

In general, meetings should be short, relevant, and regular. A meeting is a great way not only to inform colleagues about project status and/or updates but also to ask questions and share different points of view so you need to encourage and promote that.

Set clear expectations and requirements and ensure everyone understands them

A clear definition of the scope of work and of expected deliverables is an important aspect that impacts the success of your project. Thus, it is important to set clear project timelines and realistic expectations for team members from the beginning. Lack of clear expectations is the source of many disagreements and is a frequent cause of project failure. What can you do to set crystal clear expectations for your team?

  • Set realistic expectations and requirements for project timelines;
  • Use a project management system to fine-tune the development cycle;
  • Make sure each team member understands the requirements and their tasks.

Engage your team members 

Remote developers often feel isolated because they do not physically interact and communicate with their colleagues. To increase the engagement of your team, think of various activities like team buildings to lift the team’s spirit up. Here are some more ideas:

Co-op gaming: gaming can become a great break from the routine and unify employees in your company. Examples of co-op games are Among Us, GeoGuessr or Codenames – you choose the one that sounds most fun to you and your team.

Virtual Developer summits: such events include educational talks, workshops, and brainstorming sessions where developers can share their knowledge and get to know each other better.

Online events: corporate training sessions and webinars on various topics via Zoom, Skype, or Google Teams are also a great way to help people get to know each other.

Such activities help maintain corporate culture and contribute to employee satisfaction greatly. A strong sense of team spirit can help your remote team pool their talents and strengths to better solve their goals.

Consider different time zones and plan work correspondingly

One of the keys to project success is understanding the differences in time zones in case you work with a team from a different country. Working together in different time zones can be a challenge because of the lack of constant communication. In contrast to office work, developers working remotely often have their preferred hours of operation. Here are some tips to help developers work more productively across different time zones:

  • Define each employee’s time zone and preferred work hours;
  • Use various time zone management tools and apps, such as Google Calendar, Team TimeZone, and Harvest;
  • Create common rules for communication and collaboration;
  • Keep asynchronous communication in order.

Working in different time zones requires that each member of a team know and respect different hours of operation. This may seem obvious, but it’s really important. With open communication and smart use of remote tools, you can achieve productive, efficient, collaborative, and flexible teamwork.

Encourage career development among your remote employees

Your remote team members should know that the company is interested in helping them plan their career growth. Therefore, the main goal for managers is to provide career development opportunities for remote developers. 

Managers who manage remote teams should notice what excites and motivates each team member, and if they excel, offer them a promotion or a piece of advice on how to achieve a career goal. Career advancement opportunities motivate developers to work harder and add value to the company. Other career development opportunities that you may want to consider are:

  • Sending developers to relevant conferences;
  • Providing professional development opportunities within the company;
  • Offering team members to attend online learning platforms;
  • Implementing an assessment structure (like the Shield platform) where remote employees can understand what growth opportunities are available.

Use the right tools to improve work efficiency 

When you manage a team of remote developers, it is important to use various tools that help structure the work of each team member. From communication tools to project management tools, they all help your team stay on the same page. To help you choose, we’ve selected a few of the most useful ones that are highly recommended for implementation in your organization:

  • Project and task management: Jira, Trello, Todoist and Harvest;
  • Employee monitoring software: CloudDesk, Workpuls, Hubstaff;
  • Document storage: Jira, Google Drive;
  • Online meetings: Zoom, Slack, Skype.

While there are many excellent free or low-cost tools available, you should give preference to those applications that have the features and functionality most important to the team and your project.

Final thoughts

The secret to managing a remote team of software developers is simple: make your company’s culture inclusive and diverse and treat remote developers in the same manner as your in-house employees. Many excellent development teams are scattered all over the world, and the quality of work is never determined by geographic location. The overall success of your project and speed of development depends on how you plan and manage remote teams. 

The post Tips On Managing An Offshore Development Team appeared first on noupe.

Categories: Others Tags:

Lens International Design Conference 2022 Keynote: Redesigning Design

August 10th, 2022 No comments

I am honoured to be invited by Shih Chien University College of Design to give a keynote speech during their Lens International Design Conference 2022 on January 7th 2022.  

In the conference The Lens, design is interpreted as a multi-perspective lens that transforms all elements in our daily lives in the past, present, and future into multiple possibilities.  At the same time, it reflects our hopes, fears, desires, anxieties, beliefs, and values that entangled in our minds.  Like the rebirth of light after refracted, design continuously records, interprets, and transforms everything into materialized narratives and carriers such as products, architecture, media, and clothing. In this way, design attempts to bring the world together.  Moreover, it doesn’t merely focus on human beings but also on nature, time and space, species, and even other time zones of the world.
This conference also celebrates the 30th anniversary of Shih Chien’s Department of Industrial Design (SCID). Congratulations my friends!
I was in good company.  The other keynote speakers included Chiaki Murata, Jurgen Bey, and Srini R Srinivasan.  All shared, in their keynotes, very interesting perspectives of design.  Due to COVID restrictions for entry into Taiwan, most of the invited keynote speakers attended the event remotely.  All of us had to record our keynote speeches prior to the conference.
The entire conference was recorded and shared on Facebook live.  As my keynote was a recording of a recording, it was a little muffled.  With permission from the organisers, I thought it would be a good idea to upload a clearer recorded keynote on YouTube.
My Redesigning Design keynote was a result of a longitudinal study, driven by a lifelong passion to understand how Design works.  In my keynote, I challenged Designers to rethink their roles just as hard as they rethink their client’s solutions. My hypothesis is that Design is a form of Risk Management. I then layed out the foundation of thinking that led me to this conclusion.
I hope you enjoy this video and I would love to hear any feedback you might have on my thoughts about Redesigning Design.
If you are interested in a full conference recording you can check it out here.  I come in at the 1hr 38min mark.

The post Lens International Design Conference 2022 Keynote: Redesigning Design appeared first on Design Sojourn. Please click above if you cannot see this post.

Categories: Designing, Others Tags:

Designing for Long-Form Articles

August 10th, 2022 No comments

Designing a beautiful “article” is wrought with tons of considerations. Unlike, say, a homepage, a long-form article is less about designing an interface than it is designing text in a way that creates a relaxed and comfortable reading experience.

That’s because articles deal with long-form content which, in turn, tends to be valued by a ”time on page” interaction with users. We want someone to read a complete narrative. There’s a natural space between the time someone lands on an article and reads all the words. And hopefully, that space is immersive enough to not only hold a user’s, but provoke thoughts, ideas, and, possibly, actions. At least that’s what I’m hoping as I have your attention and you make your way through the very article you’re reading.

There’s a balance. On one hand, we hear that “no one reads the Internet.” On the other, a long-form article demands careful attention. Considering the current value of content marketing and the growing impatience in users, captivating readers for as long as possible should be a key concern. Let’s take a look at some best practices and examples of incredible article pages to get a better idea of what makes a visually appealing reading experience for long-form articles (without sacrificing user experience), and how we can replicate the effects.

Quick wins

Let me quickly list out what I think might already be obvious to many of you, but are effective things for content legibility:

  • Increase the font size: We know that 16px is the default and is perfectly fine in many designs, but a larger font size is inviting in that it implies the user is free to lean back and settle in without having to angle forward with the screen in their face to read.
  • Aim for characters per line: Very few people I know like to work harder than they need to, and that goes for reading too. Rather than using the full viewport width, try to narrow things down and balance that with your larger font size to get fewer characters on each line of text. Your sweet spot may vary, though many folks suggest somewhere between 45-75 characters per line to help limit how far the reader’s eye has to work to go from left to right. Chris has a bookmarklet to help count characters, but we also have the ch unit in CSS to get predictable results.
  • Bump up the line height: A default line height is going to feel smashed. It’s funny, but more space between lines (up to a point, of course) is less work for eyes, which seems antithetical to the characters-per-line advice where we generally want eyes to travel a shorter distance. A line height between 1.2 and 1.5 seems to be a pretty typical range for long-form content.

If you haven’t seen it before, Pierrick Calvez has a great “five-minute” guide to typography that packs in a bunch of low-hanging fruit like these.

Design for extra breathing room

You may be accustomed to designing “above the fold” where real estate is a prime commodity. That’s sort of like beach-front property in the web world because it’s where we’re used to packing in high-value things, like hero banners, calls to action, and anything else to help sell a thing. Above the fold can be a lot like a dense urban downtown with high traffic and high-rise buildings.

Articles are different. They allow you to stretch out a bit. If we want to take the city development analogy a little further, articles have the acreage to lean into a “less is more” sort of design approach. That’s what makes seemingly small design choices — like type — so important to the overall experience.

Check out the example below. The link underlines have a little more room to breathe (specifically, they appear below the descenders). This is actually something that you can enable sitewide but looks especially nice on article pages since it increases readability. That’s the sort of subtle design choice that contributes to extra breathing room.

text-underline-position: under; is the line of CSS that makes this work. Naturally, text-decoration must be set to something other than none (underline in this case), too.

The example above also features text-decoration-thickness, which alters the thickness of underlines (and other line types). You can use this CSS property to match a line’s thickness to a font’s size and/or weight.

Here’s a full example:

a {
  text-decoration: underline;
  text-decoration-thickness: 2px;

  /* or */
  text-decoration: underline 2px;
  text-underline-position: under;

But before you reach for the text-decoration shorthand, Šime Vidas has a few “gotchas” when it comes to using it that are worth reviewing.

Leading into the content

Drop caps are stylized letters that can be placed at the beginning of a document or document section. They were once used in Latin texts, but today they’re mostly used for decorative reasons.

Personally, I think that drop caps hinder readability. However, they can be a nice way to “lead” a reader into the main content, and they shouldn’t introduce any serious accessibility issues as long as you’re using the ::first-letter pseudo-element. There are other (older) methods that involve more HTML and CSS as well as the use of ARIA attributes in order for the content to remain accessible.

Using ::first-letter, the CSS would look something like this:

/* select the first letter of the first paragraph */
article > p:first-child::first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;

It sure would be nice if we could use the initial-letter property, but there’s pretty much no support for it at the time I’m writing this. If we had it, all that math for font size and line height would be calculated for us!

CodePen challenged folks to show off their drop-cap-styling skills several years ago and you can see a whole bunch of neat examples from it in this collection.

Skip to main content

Screen readers allow users to skip to the main content as long as it wraps it within a

element. However, those who navigate websites by tabbing don’t benefit from this. Instead, we must create a “skip to main content” anchor link. This link is customarily hidden but revealed once the user makes their first tab (i.e. show on focus).

It would look something like this:

<!-- anchor -->
<a id="skip-link" href="#main">Skip to main content</a>

<!-- target -->
<main class="main">
  <!-- main content -->
#skip-link {
  position: absolute; /* remove it from the flow */
  transform: translateX(-100%); /* move it off-screen so that it appears hidden but remains focusable */
#skip-link:focus {
  position: unset; /* insert it back into the flow */
  transform: unset; /* move it back onto the screen */

.main {
  scroll-margin: 1rem; /* adds breathing room above the scroll target */

There are other ways to go about it, of course. Here are a couple of deeper dives on creating skip links.

Seamless visuals

I love the illustrations in this article. Despite how incredible they look, they don’t demand too much cognitive attention. They introduce brief moments of delight but also suggest that the article itself has something more important to say. Partly, this comes down to the use of transparency, whereas rectangular images capture more negative space and therefore demand more attention (which is fine if that’s the desired effect and images are crucial to the story).

However, it’s important to know that the images aren’t actually transparent at all, but instead are non-transparent JPEGs with the same background color as the content. I’m presuming that’s to keep the size of the images smaller compared to PNGs that support transparency.

Inspecting an image element in DevTools showing the JPEG images in the source.

The downside to “faking” a transparent background like this is that it would require additional trickery (and maintenance) to support a dark mode UI if your site happens to offer one. If the illustrations are pretty flat and simple, then SVG might be the way to go instead since it’s small, scalable, and capable of blending into whatever background it’s on.

But if you’re bound to using raster images and would rather work with PNG files for transparency, you’ll want to look into using responsive images and the loading="lazy" attribute for faster loading times.

Put the focus on the type and semantics

You may have very little say over how or where someone reads content on the web these days. Whether the user receives it in an RSS feed, gets it delivered by email, sees it copy-and-pasted from a colleague, finds it on a scraped site, or whatnot, your content might look different than you prefer. You could design what you think is the most gorgeous article in all the land and the user still might smash that Reader Mode button to your dismay.

That’s ok! The discoverability of content is very much as important as the design of it, and many users have their own ways of discovering content and preferences for what makes a good reading experience.

But there are reasons why someone would want a Reader Mode. For one, it’s like “not seeing any CSS” at all. By that, I mean Safari’s Reader Mode or Brave SpeedReader, which use machine learning to detect articles. There’s no fetching or executing of CSS, JavaScript, or non-article images, which boosts performance and also blocks ads and tracking.

Fong-form article viewed with Brave's SpeedReader feature.

This sort of “brute minimalism” puts the focus on the content rather than the styles. So, you might actually want to embrace a browser’s opinionated reading styles specifically for that purpose.

The way to do that is not by using CSS, but by paying closer attention to your HTML. Reader modes work best with markup that uses simple, semantic, article-related HTML. You’ve got to do more than simply slapping 

 tags around the article to get the most from it.

You might just find that a minimal design that emphasizes legibility over slickness is actually a good strategy to use in your site’s design. I’d strongly suggest reading Robin’s post on the “smallest CSS” for a solid reading experience.

Roundup of long-form articles!

I’ve shared a lot of what I think makes for a great reading experience for long-form articles on the web. But seeing is believing and I’ve rounded up a bunch of examples that showcase what we’ve covered.

Designing for Long-Form Articles originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

A Comprehensive Guide to Security Testing

August 10th, 2022 No comments

Security is of utmost importance for any business, big or small. You can have the most beautiful website in the world, but if it’s not secure, you’re at risk of losing everything. In this comprehensive guide, we will discuss security testing and its importance. We will also take a look at various security testing software tools and approaches. So whether you’re a business owner who wants to ensure the security of their website, or a developer who wants to learn more about security testing, this guide has you covered!

What is Security Testing & Why Is It Necessary?

The term “security testing” refers to the practice of evaluating the security of a website, app, or system. It aids in the identification of possible assaults. Security testing may be completed manually or using automated tools.

As we’ve mentioned, security is of paramount importance for any business. Data loss, funds, and clients can all be caused by a security problem. It may also damage your reputation and make it more difficult to recover from the assault. That’s why security testing is so vital! It aids in the detection and repair of threats before they can be exploited by hackers.

Types of Security Testing Software

Penetration Testing

Penetration testing is an essential test technique that every organization must implement. It involves utilizing seasoned hackers to execute a variety of attack methods. Penetration testing is also referred to as security testing. It is utilized to assess the system’s security by putting it through its paces in real-time.

Vulnerability Scanning

Vulnerability scanning is the practice of identifying and correcting significant flaws in an information system. Vulnerability scanning is usually done by a program that compares the system to known vulnerability signatures automated tool. A scan report is produced from the scan’s results, which are usually recorded as a vulnerability scanning report.

Risk Assessment

Security risk assessment is the process of detecting and avoiding potential hazards and flaws in an information system before they become a problem. It aids in determining the status of information security within a company, as well as identifying areas of risk. It’s a systematic, analytical approach for examining an information system’s safety and identifying potential security risks that could be used to inflict damage or harm to a business.

Security Auditing

Security auditing is an element of the security assessment process. It involves reviewing computer-based systems, networks, or software to ensure that security precautions are working properly. It’s commonly completed as part of a security audit service by a third-party service provider. The report should assist in assessing an organization’s security readiness and identifying areas where it may be vulnerable to various threats.

Source Code Review

Reviewing the full source code of an application for potential security concerns is known as source code review. A third-party security firm can analyze the source code of the software to detect any security flaws that the developer may have overlooked. The goal of source code examination is to look at applications with new eyes for possible security concerns.

Security Testing Software Approaches

Security testing software is the process of testing software for security flaws and inadequacies. Three distinct methods are used in security testing software. Let’s look at each approach separately.

Black Box Testing

The black box testing approach (also known as opaque testing) is a kind of software security assessment. The test engineer in a black-box security test has no insight into the software’s or system’s internal workings.

The test engineer must rely on previous documentation, past experiences, and feedback from the software’s creators and users to create tests. The test engineer is unfamiliar with the system’s inner workings or application being tested.

White Box Testing

During white box testing, also known as glass box testing, the tester has access to not only the system’s internal state but also its code structure. Because of this, white box testing is sometimes called glass box examination.

Gray Box Testing

A gray box security test is a hybrid form of testing that combines both expertise and skill. This is a combination of white-box and black-box testing. The gray box test consists of portions of the two tests, with the tester having some knowledge but not all of it. Testers can find what they’re searching for without knowing where it originated using this method.

Software Security Testing Tools:

Astra Security

Astra’s Network Security Solution is a one-of-a-kind product from Astra Security, which can help you discover and address network security vulnerabilities. Astra’s solution aids in the identification of network security flaws as well as the plugging of gaps.

The solution examines and assesses your network to identify network devices, ports, and protocols that may be vulnerable, in order to help you address any issues promptly.


OpenVAS is a network security tool that may perform a thorough vulnerability assessment. OpenVAS is a worldwide initiative with organizations from many countries using it. It’s available for no cost and may be used with commercial software.

The OpenVAS tool is produced by Greenbone, and the paid version is known as Greenbone Security feed. The free one, on the other hand, is called Greenbone Community feed.


Metasploit is a computer security project that focuses on penetration testing and IDS signature creation. It’s free, open-source, and accessible to everyone.

The goal of the project is to teach network administrators and penetration testers about security flaws that have been used by penetration testers during security audits, as well as ways to use them in order to maintain a secure network configuration.


Security testing is important because it can help you find and fix security vulnerabilities in your software before they are exploited by attackers. There are three main approaches to security testing: black box, white box, and gray box. There are several distinct types of penetration testing, each with its own set of advantages and disadvantages. It’s critical to select the appropriate one for your needs, so understanding what they all have to offer is important. There are a number of security testing tools to choose from; some of the most popular ones include Astra Security, OpenVAS, and Metasploit.

Regardless of the tool you employ, ensuring that your software is secure is a necessary step in the development process. You may ensure that your program is as safe as possible by performing security testing on a regular basis and early.

The post A Comprehensive Guide to Security Testing appeared first on noupe.

Categories: Others Tags:

Core Web Vitals Tools To Boost Your Web Performance Scores

August 9th, 2022 No comments

The success of your website depends on the impression it leaves on its users. By optimizing your Core Web Vitals scores, you can gauge and improve user experience. Essentially, a web vital is a quality standard for UX and web performance set by Google. Each web vital represents a discrete aspect of a user’s experience. It can be measured based on real data from users visiting your sites (field metric) or in a lab environment (lab metric).

In fact, several user-centric metrics are used to quantify web vitals. They keep evoling, too: as there were conversations around slowly adding accessibility and responsiveness as web vitals as well. In fact, Core Web Vitals are just a part of this large set of vitals.

It’s worth mentioning that good Core Web Vitals scores don’t necessarily mean that your website scores in high 90s on Lighthouse. You might have a pretty suboptimal Lighthouse score while having green Core Web Vitals scores. Ultimately, for now it seems that it’s only the latter that contribute to SEO ranking — both on mobile and on desktop.

While most of the tools covered below only rely on field metrics, others use a mix of both field and lab metrics.

PageSpeed Compare

PageSpeed Compare is a page speed evaluation and benchmarking tool. It measures the web performance of a single page using Google PageSpeed Insights. It can also compare the performance of multiple pages of your site or those of your competitors’ websites. It evaluates lab metrics, field metrics, page resources, DOM size, CPU time, and potential savings for a website. PageSpeed Compare measures vitals like FCP, LCP, FID, CLS, and others using land and field data.

The report it generates lists the resources loaded by a page, the overall size for each resource type category, and the number of requests made for each type. Additionally, it examines the number of third-party requests and resources a page makes. It also lists cached resources and identifies unused Javascript. PageSpeed Compare checks the DOM of the page and breaks down its size, complexity, and children. It also identifies unused images and layout shifts in a graph.

When it comes to CPU time, the tool breaks down CPU time spent for various tasks, Javascript execution time, and CPU blocking. Lastly, it recommends optimizations you can make to improve your page. It graphs server, network, CSS, Javascript, critical content, and image optimizations to show the potential savings you could gain by incorporating fixes into your site. It gives resource-specific suggestions you could make to optimize the performance of your page. For example, it could recommend that you remove unused CSS and show you the savings this would give in a graph.

PageSpeed Compare provides web performance reports in a dashboard-alike overview with a set of graphs. You can compare up to 12 pages at once and presents the report in a simple and readable way since it uses PageSpeed Insights to generate reports. Network and CPU are throttled for lab data tests for more realistic conditions.

Bulk Core Web Vitals Check

Experte’s Bulk Core Web Vitals Check is a free tool that crawls up to 500 pages of the entire domain and provides an overview of the Core Web Vitals scores for them. Once the tool has crawled all the pages, it starts performing a Core Web Vitals check for each page and returns the results in a table. Running the test takes a while, as each web page test is done one at a time. So it’s a good idea to let it run for 15-30 mins to get your results.

What’s the benefit then? As a result, you get a full overview of the pages that perform best, and pages that perform worst — and can compare the values over time. Under the hood, the tool uses Pagespeed Insights to measure Core Web Vitals.

You can export the results as a CSV file for Excel, Google Sheets or Apple Pages. The table format in which the results are returned makes it easy to compare web vitals across different pages. The tests can be run for both mobile and desktop.

Alternatively, you can also check David Gossage’s article on How to review Core Web Vitals scores in bulk, in which he shares the scripts and how to get an API key to run the script manually without any external tools or services.


If you’re looking for a slightly more advanced option for bulk Core Web Vitals check, this tool will cover your needs well. Treo Site Speed also performs site speed audits using data from the Chrome UX Report, Lighthouse and PageSpeed Insights.

The audits can be performed across various devices and network conditions. Additionally though, with Treo, you can track the performance of all your pages across your sitemap, and even set up alerts for performance regressions. Additionally, you can receive monthly updates on your website’s performance.

With Treo Site Speed, you can also benchmark a website against competitors. The reports Treo generates are comprehensive, broken down by devices and geography. They are granular and available at domain and page levels. You can export the reports or access their data using an API. They are also shareable.

WebPageTest Core Web Vitals Test

WebPageTest is, of course, a performance testing suite on its own. Yet one of the useful features it provides is a detailed breakdown of Core Web Vitals metrics and pointers to problematic areas and how to fix them.

There are also plenty of Core Web Vitals-related details in the actual performance audit, along with suggestions for improvements which you can turn on without changing a line of code. For some, you will need a pro account though.

Cumulative Layout Shift Debuggers

Basically, the CLS Debugger helps you visualize CLS. It uses the Layout Instability API in Chromium to load pages and calculate their CLS. The CLS is calculated for both mobile and desktop devices and takes a few minutes to complete. The network and CPU are throttled during the test, and the pages are requested from the US.

The CLS debugger generates a GIF image with animations showing how the viewport elements shift. The generated GIF is important in practically visualizing layout shifts. The elements that contribute most to CLS are marked with squares to see their size and layout shift visually. They are also listed in a table together with their CLS scores.

CLS debugger in action: highlighting the shifts frame by frame.

Although the CLS is calculated as a lab metric initially, the CLS debugger receives CLS measurements from the Chrome UX Report as well. The CLS, then, is a rolling average of the past 28 days. The CLS debugger allows you to ignore cookie interstitials — plus, you can generate reports for specific countries, too.

Alternatively, you can also use the Layout Shift GIF Generator. The tool is available on its webpage or as a command line tool. With the CLI tool, you can specify additional options, such as the viewport width and height, cookies to supply to the page, the GIF output options, and the CLS calculation method.

Polypane Web Vitals

If you want to keep your Core Web Vitals scores nearby during development, Polypane Web Vitals is a fantastic feature worth looking into. Polypane is a standalone browser for web development, that includes tools for accessibility, responsive design and, most recently, performance and Core Web Vitals, too.

You can automatically gather Web Vitals scores for each page, and these are then shown at the bottom of your page. The tool also provides LCP visualization, and shows layout shifts as well.

Noteable Mentions

  • Calibre’s Core Web Vitals Checker allows you to check Core Web Vitals for your page with one click. It uses data from the Chrome UX Report and measures LCP, CLS, FID, TTFB, INP and FCP.

Categories: Others Tags:

An Introductory Guide On How To Do Web Scraping: Extracting Data From Your Website

August 9th, 2022 No comments

Web scraping is a great solution for those looking to access structured web data from websites containing large amounts of invaluable information.

Also known as web extraction, web scraping is a tool that helps you to gain information on products, contacts, and a lot more, even when a website doesn’t have an API (application programming interface), or grants limited access to its data.

 Web scraping offers a faster, more practical solution for extracting data from a website, instead of having to use the same format as the website in question, or even just copying and pasting information manually.

What is web scraping?

Web scraping is the process of gathering structured data into a spreadsheet or other file, but in an automated way. In the same way that a person can manually copy and paste information from a website into a document, web scraping performs the same function, just on a different scale. Web scraping also performs this task incredibly efficiently, extracting up to billions of data points through intelligent automation.

Image Source

It is often used by businesses and individuals looking to make use of the huge amounts of information available on the web, implementing web scraping into their data management scheme. This information can be mined to help a company to make smarter, better, informed decisions. 

Data scraping is particularly valuable, in fact, for companies looking to gather data on specific, niche topics. This data can then be utilized in your marketing strategy, where you might be considering the best niches for affiliate marketing.

Web scraping can be used for more than business intelligence however, as it can reveal insights into pricing and price comparison sites, Google Shopping related metrics where product data from an e-commerce site is sent to another online vendor, and can even help find sales leads and conduct market research. It has many benefits and many uses, though it is not necessarily always a simple task.

This is because websites can often be very diverse, coming in several different formats, shapes and sizes. As a result, you will find multiple different kinds of web scrapers, which all offer different functions and features. This is similar to the way in which there are multiple different kinds of mobile data collection apps to pick from.

Is web scraping a crime?

Web scraping is not illegal when it is used to mine public web data. However, it is important that you follow the prescribed rules, and avoid scraping information that is not available to the public. Scraping this data is illegal, and has become a rising crime with multiple recent cases of illegal web extraction occurring.

Though web scraping is a tool with many valuable features, it can be abused. A very common abuse of web scraping is through email harvesting. Scraping data from websites and social media can enable a person to harvest people’s email addresses, which can then be sold on to third parties and spammers for a sum. Harvesting data with commercial intent is illegal. 

Image Source

It is important that you remain aware of the darker side of web scraping and the importance of only harvesting data, or even emails acquired through an email finder, that is publicly available.

This also helps demonstrate why webpage defacement monitoring on your own company websites and personal blogs is so important.

How do web scrapers work?

Whether you want to learn to perform data scraping yourself, or are looking to learn more about it before you outsource the job to a data extraction specialist, it’s really important that you understand how it works, and the difference between web crawling and web scraping.

Web scraping works by first choosing the URLs you want to load before you begin scraping. You need to load the whole HTML code of that page in order to continue. If you outsource to a specialist or learn to do it yourself, you can go as far as loading the entire website, including all the Javascript and CSS. However, this isn’t necessary to perform web scraping, so don’t worry about it too much, especially if you are a beginner.

Then, the scraper extracts all the data on the page. However, you can choose what specific data you want to extract. This is performed when you only need specific information, and aren’t interested in the rest of the data on the page you are scraping. 

Then, all the data is outputted. This is done using the format that the web scraper has chosen, depending on what format will be most useful to the individual. Usually, data is output as an Excel spreadsheet or a CSV file, but more advanced web scrapers are also able to output data in other formats such as an API or JSON file. 

For more on learning to manage and organize your data: DataBricks Apache Hive articles.

What about web crawling?

Web scraping and web crawling go hand in hand. Web crawling comes before web scraping, and involves artificial intelligence that searches the internet to look for content, indexing it. 

This process finds the relevant websites and URLs that are then passed onto the web scraper, who uses them to mine information.

Web scrapers are specialized tools, designed to extract data from websites. There are four main types of scrapers, and they differ widely from one another.

Image Source

Types of web scrapers

Broadly speaking, web scrapers can be distinguished by placing them into four categories:

Category One: browser extension vs software

Generally speaking, web scrapers come in one of two forms, browser extensions and computer software. Browser extensions are simpler to run and are integrated directly into your browser. Like apps, they are programs that can be added to your browser (such as Firefox or Google Chrome). Some of the other best chrome extensions also include messaging extensions and ad blockers. 

However, these extensions are limited in that they ‘live’ inside of your browser. This means that advanced features are usually impossible to implement. On the other hand, scraping software can be installed onto your computer with a simple download. They enable more advanced features (not limited by what your browser can do), making up for the fact that they are a bit less convenient than browser extensions. 

Category two: self-built vs pre-built

Anyone can build their own web scraper. However, even in the implementation of tools that help you build a web scraper, there is a certain amount of coding knowledge needed. The more features you want to add to your scraper, the more knowledge you will need to have, as complexity increases accordingly.
On the other hand, you might want to opt for a pre-built web scraper that you can download and start using straight away. Some will offer advanced features (already built-in) such as Google Sheets Exports and more. This is a good option for those who have little familiarity with coding. If this seems enticing, consider learning more from databricks’ Introduction of hadoop to get you started.

Category three: User Interface

A user interface (UI) can vary depending on the web scraper. Some web scrapers have a full on UI, with a fully rendered website that users can click on and scrape. If you have little technical knowledge of coding and how scraping works, then this is a good place to begin.

The alternative – a user interface with a minimalistic UI and command line – might feel less intuitive and more confusing to a beginner, and might be worth avoiding if you are only just starting out.

Image Source

Category four: Local vs Cloud

This is all about where your web scraper is doing its job from. 

A local scraper runs using resources from your own computer and the internet. This can result in your computer becoming quite slow whilst it is scraping data, especially if it has a high usage of CPU or RAM. This can make your computer pretty much useless for other tasks whilst it is being used to scrape.

On the other hand, cloud-based web scrapers run using off-site servers provided by companies that develop scrapers. This gives you the ability to use your computer freely as its resources are not taken up by web scraping. You simply get notified when the data harvesting has completed.

How to do web scraping

Although the process, in itself, is fairly straightforward, it becomes complicated the minute your project grows to any significant size. As a result, it is often easier to outsource the job to a company of professional web scrapers. However, it is still interesting to understand the process of DIY web scraping, alongside learning about other forms of data collection.

Firstly, you need to identify the target website you are interested in scraping (a web crawler can help you do this). Let’s take websites for free stock videos as an example.

Then, collect all the URLs of the pages that hold the data you are looking to extract, namely on visual stock content.

Once you’ve done that, send a request to these URLs asking to be granted access to the HTML of the pages in question.

Then, once this is completed, use locators to find the data within the HTML.

Lastly, save said data in a CSV or JSON file, or in any other form of structured format that suits you. And just like that, you have a large amount of data on stock videos, all saved in one place.

If this seems like a tricky task, then an open-source web scraping data tool might be the right step forward for you. Or at the very least, a HDFS file system (what is HDFS in hadoop).


Whether or not you plan to implement data scraping yourself or outsource to a specialist, it is important that you understand the process – it’s only going to grow in importance and popularity as more companies seek to make the most of the data that is available on the internet.
Without this valuable data, a company can never hope to make sense of a customer’s ecommerce journey, thus serving a vital purpose within a retailer’s repertoire of tools.

The post An Introductory Guide On How To Do Web Scraping: Extracting Data From Your Website appeared first on noupe.

Categories: Others Tags:

Committing CSS Crimes

August 9th, 2022 No comments

The time for CSS-Tricks is over. Now is the time for CSS Crimes!

In this current landscape of content service providers, users are often limited to expressing themselves in text, links, and images. Sanitization rules tend to strip out HTML, JavaScript, and various attributes.

Social media service Cohost allows users to have greater freedom with markup and inline styles than we may be typically used to. Some users have taken advantage of this freedom to commit CSS Crimes! It has resulted in creative recreations of familiar interfaces and interactive games by using properties in unconventional ways.

Blackle Mori created a contraption where pulling a handle slowly turns a series of gears, pulleys, and chains. Eventually an aperture opens to reveal the site’s mascot (“eggbug”) and the proclamation “Good Job!”. I have stared at this in Developer Tools and it is an amazing combination of grid, resize, transform, and calc(). I ended up adding a border to all

s to try and get a better understanding of how each individual element moved.

There have been situations in the past where I have been restricted from using the full toolkit of HTML, JavaScript, and CSS. There have been many instances of using decorative CSS shapes to get around images. I have used :hover as a workaround for mouseenter and mouseleave. I have used input:checked as a sibling selector for toggling.

While CSS Crimes are probably not something you would want to employ on a regular basis, we should embrace experiments within constraints that can foster creative solutions.

To Shared LinkPermalink on CSS-Tricks

Committing CSS Crimes originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

7 Ways to Improve Efficiency of Your eCommerce Store

August 8th, 2022 No comments

Businesses try a lot of different things like offering free shipping, sale, loyalty discounts, and many more things to attract customers. But sometimes, they overlook that the website design can make a huge difference in attracting customers.

Website optimization helps in improving website performance. It includes page responsiveness, page speed, navigation, SEO friendliness, etc. Because if you lack in any of the above factors, you might lose a lot of user traffic.

For Shopify store owners, it becomes easy to optimize the website as it is a flexible platform. All they have to understand is how to do it. This article explains the ways you can use to improve the efficiency of your ecommerce stores.

1. Adding Good-quality Plugins

To build traffic and increase sales conversion, it is inevitable to optimize website performance regularly. And the best way to optimize the store is by adding plugins. Adding any plugin can slow down your store or complicate the user interface.

High-quality plugins would improve your website’s functionality and benefit your business tremendously. But try avoiding unnecessary plugins with features that would not make much difference to your store. You should also avoid plugins with complex assets, operations, and content strips.

2. Improve Website Speed

Customers are used to fast-loading websites. Customers don’t have patience; while your home page is loading, the customer would just switch to another website. If the pages do not load faster, it can affect the customer experience and conversion rates.

There is research that shows websites taking more than 5 seconds to load, fail to engage visitors, and they might not revisit the website in the future. In Google’s SERP performance, a page load time of 10 seconds is acceptable. But if your website takes more than 10 seconds to load, the visitors would be frustrated, and chances are they would leave the website. The point is that web visitors would not spend excessive time on such slower websites. 

3. Mobile Compatibility

Smartphones are the preferred choice over laptops of most of customers. Because it is more convenient to use. Ecommerce owners understood this inclination towards mobile phones and started optimizing their website by making it mobile responsive. 

If your website pages are not mobile responsive, if they take longer to load, or the UI gets scattered, then it is high time you optimize your website. Or else your customers would probably start looking for mobile responsive websites. If you have no idea whether your website is mobile-friendly or not, you can also check it on Google Search Console.

4. Image Optimization

Image Optimization can improve your website’s performance to a great extent. All websites use images in one or the other way as image helps in conveying the message more effectively. If you are using the images, selecting the file format is important so that you have high-quality images is important. For a web page to load faster, keeping the file image between 1 to 2 MB is ideal. But high-quality images of any format, PNG, JPEG, or GIF, do not fall in the 1 to 2 MB range.

There are tools available in the market that can help you reduce the size of an image without compromising on image quality. These tools help you reduce the size of images and enhance website performance. It will help improve the speed of the website.

5. SEO Optimization

For any website to rank and appear in search results, it should follow the search engine guidelines to bring more potential customers. And so SEO strategy becomes a crucial part of the success of any website. 

You can do some research on websites with more traffic and conversions. Analytical tools kike Google Analytics, Google Search Control, and many others help you give clear insights on bounce rates, behavior reports, and many more.

Optimizing a website with the right SEO keywords can help a website rank on the first pages. Focus on details like headlines, meta tags, URL slugs, etc. Find long and short-tail keywords and frame them in your website content. Additionally, you can also do off-page optimization by doing social media activities, guest blogging, influencer marketing, and many more things to improve your website performance.

6. Checkout Process

Complex checkouts can take away the joy of a seamless customer experience. A huge setback if a visitor enjoyed your website, selected the product, and changed their mind before payments due to complex checkout.

There can be many reasons your customers are abandoning the cart. You have to figure out those reasons and optimize your website accordingly. For instance, to simplify the checkout process, you can introduce single-page checkout to make it easier for buyers. Allow them to checkout as a guest user, rather than making the sign-up process compulsory.

Many plugins can help reduce cart abandonment rates. For example, you can use sticky carts or quick buy buttons on your website to remind users of the products in their cart. You can use sale timers to encourage quick checkout. To optimize the details, you can also edit the product details in bulk with the Shopify bulk editor.

7. Website Audit

If you do not keep an eye on your website’s performance, how would you optimize it? An underperforming website can make visitors feel you are incapable of offering a good user experience.

You can use tools like Lighthouse, Google Page Speed, etc., to audit your website performance. It shows detailed reports on what factors need improvement. They suggest steps for you to adopt to optimize those parts of your websites.


Now that you know how to improve the website, it is time to implement it. Shopify users can easily find high-quality plugins that help them optimize the site. To increase your website speed, you must use image optimizers that compress all the images and increase the website’s speed. All the product details must be optimized with uniformity by using the Shopify bulk editor plugin for bulk edits. You should all use the plugin wisely, so it does not slow down the website. Together, these would help you improve the website’s performance and increase traffic and conversion.

The post 7 Ways to Improve Efficiency of Your eCommerce Store appeared first on noupe.

Categories: Others Tags:

Zooming Images in a Grid Layout

August 8th, 2022 No comments

Creating a grid of images is easy, thanks to CSS Grid. But making the grid do fancy things after the images have been placed can be tricky to pull off.

Say you want to add some fancy hover effect to the images where they grow and zoom beyond the rows and columns where they sit? We can do that!

CodePen Embed Fallback

Cool, right? If you check the code, you won’t find any JavaScript, complex selectors, or even magic numbers. And this is only one example among many we will explore!

Building the grid

The HTML code to create the grid is as simple as a list of images within a container. We don’t need more than that.

<div class="gallery">
  <!-- etc. -->

For the CSS, we first start by setting the grid using the following:

.gallery {
  --s: 150px; /* controls the size */
  --g: 10px;  /* controls the gap */

  display: grid;
  gap: var(--g);
  width: calc(3*var(--s) + 2*var(--g)); /* 3 times the size plus 2 times the gap */
  aspect-ratio: 1;
  grid-template-columns: repeat(3, auto);

In short, we have two variables, one that controls the size of the images and one that sets the size of the gap between images. aspect-ratio helps keep things in proportion.

You might be wondering why we are only defining three columns but no rows. No, I didn’t forget the rows — we just don’t need to explicitly set them. CSS Grid is capable of automatically placing items on implicit rows and columns, meaning we get as many rows as needed to any number of images we throw at it. We can explicitly define the rows instead but we need to add grid-auto-flow: column to make sure the browser will create the needed columns for us.

Here is an example to illustrate both cases. The difference is that one flows in a row direction an the other in a column direction.

CodePen Embed Fallback

Check out this other article I wrote for more about the implicit grids and the auto-placement algorithm.

Now that we have our grid, it’s time to style the images:

.gallery > img {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;

The hover effect we’re making relies on this CSS. It probably looks weird to you that we’re making images that have both no width or height but have a minimum width and height of 100%. But you will see that it’s a pretty neat trick for what we are trying to achieve.

What I’m doing here is telling the browser that the images need to have 0 width and height but also need to have a minimum height equal to 100%… but 100% of what? When using percentages, the value is relative to something else. In this case, our image is placed inside a grid cell and we need to know that size to know what’s 100% is relative to.

The browser will first ignore min-height: 100% to calculate the size of the grid cells, but it will use the height: 0 in its calculation. That means our images will not contribute to the size of the grid cells… because they technically have no physical size. This will result in three equal columns and rows that are based on the size of the grid (which we defined on the .gallery’s width and aspect-ratio). The height of each grid cell is nothing but the variable --s we defined (same for the width).

Now that we have the dimensions of our grid’s cells, the browser will use it with min-height: 100% (and min-width: 100%) which will force the images to completely fill the space of each grid cell. The whole thing may look a bit confusing but the main idea is to make sure that the grid defines the size of the images rather than the other way around. I don’t want the image to define the size of the grid and you will understand why after adding the hover effect.

Creating the hover effect

What we need to do is increase the scale of the images when they’re hovered. We can do that by adjusting an image’s width and height on :hover:

.gallery {
  --f: 1.5; /* controls the scale factor */

.gallery img:hover{
  width:  calc(var(--s) * var(--f));
  height: calc(var(--s) * var(--f));

I added a new custom variable, --f, to the mix as a scale factor to control the size on hover. Notice how I’m multiplying the size variable, --s, by it to calculate the new image size.

But you said that the image size needs to be 0. What is going on? I am lost…

What I said is still true but I am making an exception for the hovered image. I am telling the browser that only one image will have a size that’s not equal to zero — so it will contribute to the dimension of the grid — while all the others remain equal to 0.

The left side shows the grid in its natural state without any hovered images, which is what the right side is showing. All the grid cells on the left side are equal in size since all the images have no physical dimensions.

On the right side, the second image in the first row is hovered, which gives it dimensions that affect the grid cell’s size. The browser will make that specific grid cell bigger on hover, which contributes to the overall size. And since the size of the whole grid is set (because we set a fixed width on the .gallery), the other grid cells will logically respond by becoming smaller in order to keep the .gallery‘s overall size in tact.

That’s our zoom effect in action! By increasing the size of only one image we affect the whole grid configuration, and we said before that the grid defines the size of the images so that each image stretches inside its grid cell to fill all the space.

To this, we add a touch of transition and use object-fit to avoid image distortion and the illusion is perfect!

I know that the logic behind the trick is not easy to grasp. Don’t worry if you don’t fully understand it. The most important is to understand the structure of the code used and how to modify it to get more variations. That’s what we will do next!

Adding more images

We created a 3×3 grid to explain the main trick, but you have probably guessed that we there’d no need to stop there. We can make the number of columns and rows variables and add as many images as we want.

CodePen Embed Fallback
.gallery {
  --n: 3; /* number of rows*/
  --m: 4; /* number of columns */
  --s: 150px; /* control the size */
  --g: 10px;  /* control the gap */
  --f: 1.5;   /* control the scale factor */

  display: grid;
  gap: var(--g);
  width:  calc(var(--m)*var(--s) + (var(--m) - 1)*var(--g));
  height: calc(var(--n)*var(--s) + (var(--n) - 1)*var(--g));
  grid-template-columns: repeat(var(--m),auto);

We have two new variables for the number of rows and columns. Then we simply define the width and height of our grid using them. Same for grid-template-columns which uses the --m variable. And just like before, we don’t need to explicitly define the rows since the CSS Grid’s auto-placement feature will do the job for us no matter how many image elements we’re using.

Why not different values for the width and height? We can do that:

CodePen Embed Fallback
.gallery {
  --n: 3; /* number of rows*/
  --m: 4; /* number of columns */
  --h: 120px; /* control the height */
  --w: 150px; /* control the width */
  --g: 10px;  /* control the gap */
  --f: 1.5;   /* control the scale factor */

  display: grid;
  gap: var(--g);
  width:  calc(var(--m)*var(--w) + (var(--m) - 1)*var(--g));
  height: calc(var(--n)*var(--h) + (var(--n) - 1)*var(--g));
  grid-template-columns: repeat(var(--m),auto);

.gallery img:hover{
  width:  calc(var(--w)*var(--f));
  height: calc(var(--h)*var(--f));

We replace --s with two variables, one for the width, --w, and another one for the height, --h. Then we adjust everything else accordingly.

So, we started with a grid with a fixed size and number of elements, but then we made a new set of variables to get any configuration we want. All we have to do is to add as many images as we want and adjust the CSS variables accordingly. The combinations are limitless!

A full-screen gallery of images

What about a full-screen version? Yes, that’s also possible. All we need is to know what values we need to assign to our variables. If we want N rows of images and we want our grid to be full screen, we first need to solve for a height of 100vh:

var(--n) * var(--h) + (var(--n) - 1) * var(--g) = 100vh

Same logic for the width, but using vw instead of vh:

var(--m) * var(--w) + (var(--m) - 1) * var(--g) = 100vw

We do the math to get:

--w: (100vw - (var(--m) - 1) * var(--g)) / var(--m)
--h: (100vh - (var(--n) - 1) * var(--g)) / var(--n)


CodePen Embed Fallback

It’s the same exact HTML but with some updated variables that change the grid’s sizing and behavior.

Note that I have omitted the formula we previously set on the .gallery‘s width and height and replaced them with 100vw and 100vh, respectively. The formula will give us the same result but since we know what value we want, we can ditch all that added complexity.

We can also simplify the --h and --w by removing the gap from the equation in favor of this:

--h: calc(100vh / var(--n)); /* Viewport height divided by number of rows */
--w: calc(100vw / var(--m)); /* Viewport width divided by number of columns */

This will make the hovered image grow a bit more than the previous example, but it is no big deal since we can control the scale with the --f variable we’re using as a multiplier.

And since the variables are used in one place we can still simplify the code by removing them altogether:

CodePen Embed Fallback

It’s important to note this optimization applies only to the full-screen example and not to the examples we’ve covered. This example is a particular case where we can make the code lighter by removing some of the complex calculation work we needed in the other examples.

We actually have everything we need to create the popular pattern of expanding panels:

CodePen Embed Fallback

Let’s dig even deeper

Did you notice that our scale factor can be less than 1? We can define the size of the hovered image to be smaller than --h or --w but the image gets bigger on hover.

The initial grid cell size is equal to --w and --h, so why do a smaller values make the grid cell bigger? Shouldn’t the cell get smaller, or at least maintain its initial size? And what is the final size of the grid cell?

We need to dig deeper into how the CSS Grid algorithm calculates the size of the grid cells. And this is involves understanding CSS Grid’s default stretch alignment.

Here’s an example to understand the logic.

CodePen Embed Fallback

On the left side of the demo, I defined a two-column with auto width. We get the intuitive result: two equal columns (and two equal grid cells). But the grid I set up on the right side of the demo, where I am updating the alignment using place-content: start, appears to have nothing.

DevTools helps show us what’s really happening in both cases:

In the second grid, we have two columns, but their widths equal zero, so we get two grid cells that are collapsed at the top-left corner of the grid container. This is not a bug but the logical result of the grid’s alignment. When we size a column (or row) with auto, it means that its content dictates its size — but we have an empty div with no content to make room for.

But since stretch is the default alignment and we have enough space inside our grid, the browser will stretch both grid cells equally to cover all that area. That’s how the grid on the left winds up with two equal columns.

From the specification:

Note that certain values of justify-content and align-content can cause the tracks to be spaced apart (space-around, space-between, space-evenly) or to be resized (stretch).

Note the “to be resized” which is the key here. In the last example, I used place-content which is the shorthand for justify-content and align-content

And this is buried somewhere in the Grid Sizing algorithm specs:

This step expands tracks that have an auto max track sizing function by dividing any remaining positive, definite free space equally amongst them. If the free space is indefinite, but the grid container has a definite min-width/height, use that size to calculate the free space for this step instead.

“Equally” explains why we wind up with equal grid cells, but it applies to “the free space” which is very important.

Let’s take the previous example and add content to one of the divs:

CodePen Embed Fallback

We added a square 50px image. Here’s an illustration of how each grid in our example responds to that image:

In the first case, we can see that the first cell (in red) is bigger than the second one (in blue). In the second case, the size of the first cell changes to fit the physical size of the image while the second cell remains with no dimensions. The free space is divided equally, but the first cell has more content inside which makes it bigger.

This is the math to figure out our free space:

(grid width) - (gap) - (image width) = (free space)
200px - 5px - 50px = 145px 

Divided by two — the number of columns — we get a width of 72.5px for each column. But we add the size of the image, 50px, to the first column which leaves us with one column at 122.5px and the second one equal to 72.5px.

The same logic applies to our grid of images. All the images have a size equal to 0 (no content) while the hovered image contributes to size — even if it’s just 1px — making its grid cell bigger than the others. For this reason, the scale factor can be any value bigger than 0 even decimals between 0 and 1.

To get the final width of the grid cells, we do the same calculation to get the following:

(container width) - (sum of all gaps) - (hovered image width) = (free space)

The width of container is defined by:

var(--m)*var(--w) + (var(--m) - 1)*var(--g)

…and all the gaps are equal to:

(var(--m) - 1)*var(--g)

…and for the hovered image we have:


We can calculate all of that with our variables:

var(--m)*var(--w) - var(--w)*var(--f) = var(--w)*(var(--m) - var(--f))

The number of columns is defined by --m ,so we divide that free space equally to get:

var(--w)*(var(--m) - var(--f))/var(--m)

…which gives us the size of the non-hovered images. For hovered images, we have this:

var(--w)*(var(--m) - var(--f))/var(--m) + var(--w)*var(--f)
var(--w)*((var(--m) - var(--f))/var(--m) + var(--f))

If we want to control the final size of the hovered image, we consider the above formula to get the exact size we want. If, for example, we want the image to be twice as big:

(var(--m) - var(--f))/var(--m) + var(--f) = 2

So, the value of our scale multiplier, --f, needs to be equal to:

var(--m)/(var(--m) - 1)

For three columns we will have 3/2 = 1.5 and that’s the scale factor I used in the first demo of this article because I wanted to make the image twice as big on hover!

The same logic applies to the height calculation and in case we want to control both of them independently we will need to consider two scale factors to make sure we have a specific width and height on hover.

.gallery {
  /* same as before */
   --fw: 1.5; /* controls the scale factor for the width */
   --fh: 1.2; /* controls the scale factor for the height */

  /* same as before */

.gallery img:hover{
  width:  calc(var(--w)*var(--fw));
  height: calc(var(--h)*var(--fh));

Now, you know all the secrets to create any kind of image grid with a cool hover effect while also having control of the sizing you want using the math we just covered.

Wrapping up

In my last article, we created a complex-looking grid with a few lines of CSS that put CSS Grid’s implicit grid and auto-placement features to use. In this article, we relied on some CSS Grid sizing trickery to create a fancy grid of images that zoom on hover and cause the grid to adjust accordingly. All of this with a simplified code that is easy to adjust using CSS variables!

In the next article, we will play with shapes! We will combine CSS grid with mask and clip-path to get fancy grid of images.

Zooming Images in a Grid Layout originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags: