Forem: Kelechi Odigbo

From Figma to Pixel Perfect Execution.

Kelechi Odigbo — Thu, 08 May 2025 15:17:07 +0000

As a frontend developer, you've probably worked with designers and clients that quickly become 'naggy' about your execution of their designs in code. Sometimes it feels like they don't understand the flexibility and inconsistencies involved in maintaining a functional site across different platforms.

Having some design background myself, I understand the time and attention that designers commit towards every single detail in their design. They just want to see their work come alive how they planned it.

As frontend developers, it is our job to ensure users have as smooth an experience as possible. To achieve this, it is important to represent the intricate solutions doctored by the designer in the final implementation of the UI.

Having said all that, here are some tips that should guide you to a near-pixel-perfect finish:

1. Pixel Perfect Handoff

It all starts from the designer's table. Ensure the final version of your project's design is properly organised with all the details that you are expected to implement. Here's a quick checklist to guide you:

Ensure all items are aligned properly and all frames are named properly.
All recurring values/styles should ideally be defined as variables or styles within Figma. Even if they are not, you can define these values, colors, texts as variables in your css.
Clear definition of components, their states and variations. It is important that you understand how components are intended to function, so that you can do a better job in recreating those components.
Ensure you understand the layout grid and spacing system used in the design. A good design handoff should have clear and consistent use of the grid and spacing systems.
All necessary assets, like images and icons should be made available in the right exportable formats and resolutions.

2. Pixel Perfect Execution

Now it's time to actually build the UI using all the information you got from the designer. Small inconsistencies while transitioning between the design and implementation can lead to a final UI that feels substandard to the original design. Here are some general tips that will help you work around those inconsistencies:

Proper usage of design assets - Make sure you export all assets(images, icons, illustrations etc.) in the correct format. Since user experience is your priority, ensure the exported assets are not too large so they don't cause performance bottlenecks. Use tools like Tinypng and ImageOptim to reduce image sizes without loosing too much quality.
Proper Conversion of values - While inspecting elements in the Figma design, values for spacing, padding, font-size etc. are going to be defined in pixels(px). For better responsiveness and to avoid accessibility issues, it is better to use values like rem and em in your css. Browsers usually have a default font size that applies to the html element of a page and affects it's children elements. Rem is basically a division of your pixel value by that default font size.

Let's say the default font size is 16px(which is the most common for most browsers), a spacing value of 60px in your Figma file would convert to 60/16, which will equal 3.75 rem in your css. Plugins like Figma hand-over can help make that conversion process easier in your Figma app.

To make the conversion more intuitive, you can set the default font-size in your html element to 62.5% i.e

html {
  font-size: 62.5%;
}

this sets the default font size to a fraction of the original(10px put of 16px) and allows you to make easier conversion of px values to rem. For example, a 60px spacing value will now equal 6rem.

Start with the layout - After defining variables and structuring your project properly, create the skeleton(layout, containers, grids) that your components are going to live on. Start by defining general spacing, position and structure of the parent elements. If you are using a grid system, create the general grid layout and smaller grid definitions for sub-containers.

3. Pixel Perfect Production

Okay, you made it, you were able to pull off a near-perfect implementation that the designer and stakeholders would love. However, the entire point is to get the perfect implementation to the end user, not the designer, not stakeholders. Users are going to be using your application in all sorts of ways and from different devices, so it's best you anticipate that. Here are some tips to ensure a consistent final output for your different users:

Properly test the responsiveness and accessibility of your app using suitable breakpoints to reduce layout inconsistencies between devices.
Pixel peeking - There are always going to be minor differences between the original design and a browser render of your implementation. However, pixel peeking by overlaying a screenshot of the design over your browser can help you spot minor visual deviations you might not have noticed when eyeballing. You can play with opacity values of overlaid screenshots or use plugins like PixelPerfect extension in chrome to trace element positions and make adjustments where necessary.
Cross browser testing - As frontend developers, we all know some browsers can be a pain in the a** when testing your final implementation(especially that one browser). However, It is important to properly test your application in the most popular browsers(chrome, Firefox, Safari, Edge) and on different devices, to avoid UI issues.
Iterative testing - Involving the designers and stakeholders in the testing process is crucial. Making iterative adjustments based on feedback would ensure the entire team arrives at the same destination.

Conclusion

Although it's almost impossible to execute and maintain a pixel perfect implementation of your UI design across borders, it is your job to come as close as possible to achieving that. With great attention to detail, patience and the tips discussed in this article, you are closer to delivering a final output that will satisfy all parties involved.

3 Major Metrics to Measure your Site's Performance

Kelechi Odigbo — Tue, 08 Apr 2025 19:32:55 +0000

As a site owner, especially for consumer-facing websites, it is very important that you monitor your website's performance and ensure that all your code and assets are optimised to create the best user experience possible for your users. if users feel your website is buggy or slow, they'll quickly bounce to the next option. A poorly optimised website will also struggle to attract natural traffic from google and other platforms which are designed to test your website on certain metrics.

In this post, we'll be discussing 3 of the most relevant metrics which you can use to measure the performance of your website.

1. Largest Contentful Paint (LCP)

Your website's LCP is the time it takes the browser to load the largest element on your webpage. Even though the largest element can be any Video, Image, Text etc. on the loaded page, it is usually the first image or video in your website's viewport once your page is loaded. This metric is very important because it creates your user's first impression of your website. Tools like PageSpeed Insights can show the LCP(in milliseconds) and Largest element of your webpage. Using simple techniques like compression, proper image formatting, responsive media etc. you can quickly improve your site's LCP and improve your overall site speed.

2. Interaction to Next Paint (INP)

In simple terms, this means how long it takes your website to respond to user interaction(e.g clicking a button, clicking a link, typing in a form etc.). It is measured by considering all user interactions during page visit and selecting the longest time-to-visual-feedback after an interaction. You can view your sites INP metrics in the performance tab of your chrome devtools. Some techniques to improve your INP include:

Avoid long-running thread-blocking tasks(use asynchronous code instead)
Make third party request asynchronous, use setTimeout, or just remove third party dependencies if they significantly reduce performance
Avoid unnecessary computations inside event handlers
Provide immediate visual feedback after interactions, even if interactions take time to process(e.g spinners, animations)

3. Cumulative Layout Shift (CLS)

This basically defines how shifty your website is. If you've visited any website where the text and content just randomly moves as images and other content become visible, you'll know how disruptive and frustrating it can be. CLS aims to measure how often and how much this shifts occur. CLS mostly focuses on shifts that happens without user input(shifts after interactions like clicking a button are not considered). The CLS for your website can be seen in the performance rab of your chrome devtools. Other tools like Google Pagespeed Insight and GTMetrics can also be used to measure your site's CLS. A CLS of 0.1 or less is best for a good user experience. Here are some tips to make your website less shifty:

Always specify width and height attributes for your img and video tags. This allows your browser to properly allocate space on the screen for these elements while they load. Also allocate spaces for ads, embeds and iframes. If you're unsure about the exact dimensions, reserve a sufficient size the element might occupy.
Avoid dynamically injecting content above existing content. Unless the content will be injected due to user interaction, allocate space for the dynamically injected content beforehand.
When using custom fonts, use font-display: swap; to make your browser display a fallback font initially and swap to your custom font after it's done loading. This can reduce the impact of the change on your site's layout

Having a well optimized website can have proven signficant impact on lead conversion and user retention. Using the techniques and monitoring the metrics mentioned in this article can quickly improve your user experience.

Which other vital metrics do you know?

5 Techniques To Draw Your Users Into Your Site

Kelechi Odigbo — Tue, 01 Apr 2025 05:18:49 +0000

As a company owner, you want to retain users on your site for as long as possible, so you can engage them with your offers and generate leads —right?. Information on increasing user retention is all over the internet. Most posts suggest techniques like;

Optimising your load times
Easy navigation
Responsive design
Creating engaging content

and so on. All these techniques are great but also already expected when building a site in 2025. To give you an added advantage over other sites, I compiled a list of tips to immerse your users into your web experience. As a user, I noticed patterns across sites where i spend extended periods and with my web developer experience I was able to pin-point some subtle strategic decisions by the site builder that I believe kept me hooked.

1. Gradually Loaded Content

This is one of the more common but often overlooked techniques to make your website more engaging. In an attempt to convey a fast load-time, most websites like to display the entire content of the webpage immediately the page loads. More engaging websites load the main section first (usually the hero section) and then the rest of the webpage is exposed to you as you scroll or interact with items on the page. Fade-in animations, text animations, orientation switching etc are techniques you can use to load your content gradually. Combining these techniques with lazy-loading can keep your users more invested in your site journey without sacrificing performance.

2. Gamification

If you frequently get hooked while playing a mobile or computer game you realise that the game is designed to keep you playing. Game designers spend a lot of time in researching ways to keep you immersed in the gaming experience. Applying some of the techniques used in games in your website can significantly increase user engagement. Implementing the complex graphics and controls used in games in your website will have performance consequences, however, you can adopt some of their techniques in making your site more engaging. Most popular stores and social media platforms already use some of these techniques to keep users glued to their sites. A good example of a gamified platform is the Shein mobile app. Interactions are incentivised with a reward system. Rewards can include a fun animation when a button is clicked, progress bars/count, mouse interactions, scroll animations, sound feedback etc. For example, the progress bar and scroll animations in The Avenging Lama are designed to guide you to the end of the webpage. These techniques should only be used where applicable and should be applied very subtly to avoid confusion and fatigue.

3. Multi-dimensional content

Where you can, you should use 3d objects, icons, media, animations etc. Using 3d items gives your users a more physical experience of your site which feels more realistic. By 3d i don't necessarily mean the blender-like animations like those in this site - NationalGeographic(into the Amazon), instead i mean a multilayered animation, manipulating text and other items using shadows and size to convey depth. An example is Trupaste

4. High Quality Media and content

This one sounds pretty obvious right? but a lot of websites still miss the mark in using high quality media in their websites. Sometimes, the difference between a basic website and a top-notch 'classic' website is in the quality of their images, videos, font, animations. For example, The Louis Vuitton Website has a very basic webpage and would be relatively easy for a web developer to recreate. However, by using high quality model/product pictures, fonts they are able to convey class and relate with their users on that level. Site owners should invest in high quality content which is way cheaper with new image-generating AI tools like Google lab's Image FX. By using lazy loading, conditional rendering and other techniques you can ensure performance is not significantly diminished.

5. Tell a story

From the hero section to the footer of your webpage, through the different pages and interaction, there should be an intertwining story you are trying to tell. This helps users connect better to your brand or company. Videos, text write-up, CTA's etc. are all opportunities to direct the flow of your story. Your story can be in form of an underlying theme, tone of message or an actual story —You decide! It's your story.

Conclusion

Making your site immersive and memorable is important if you want to retain your users. Highly engaged users are more likely to return to your website and more likely to convert. Crafting a compelling web experience requires the application of delicate web-development techniques. Using the techniques listed in this write-up and others across the web, you will be able to draw your users into the impactful experience that is your website. Thanks for reading!

Testing Dev api automation 2

Kelechi Odigbo — Tue, 09 Apr 2024 14:43:27 +0000

Hello DEV, this is the second post is to test the DEV api