How to Get a Pixel-Perfect, Linearly Scaled UI

s_801F1F8B02DD1D1B01F3A8CD432798C49451FBC222AD086C6E92AE6397AC3E1B_1624719394166_image.png

Dynamically scaling CSS values based on the viewport width is hardly a new topic. You can find plenty of in-depth coverage right here on CSS-Tricks in articles like this one or this one.

Most of those examples, though, use relative CSS units and unitless values to achieve fluid scaling. That loses pixel perfection and usually introduces text wrapping and layout shifts once the screen goes below or above a certain threshold.

But what if we really do want pixel perfection? What if, let’s say, we are developing a complex real-time analytics dashboard to be viewed on large TVs at a conference room or as some PWA to be opened exclusively on mobile and tablet devices, as opposed to text-heavy blogs and news websites? Those are cases where we need more precision.

In other words, what if we want to scale designs uniformly? Of course, one can scale the content with CSS transforms based on the available width as covered in this article — this way, the correct ratios are preserved.

However, we can also achieve fluid proportional scaling UIs using pixel values in CSS. They scale appropriately based on the device screen real estate, all while preserving their pixel-perfect proportions. Further, we can still use pixel values and automatically convert them to relative CSS units if working in pixels is more comfortable or familiar.

Scaling our UI

Let’s try to implement this awesome dashboard, courtesy of Craftwork. We need to make it in such a way that it scales perfectly and preserves all the texts line counts, margins, image sizes, etc.

How to Get a Pixel-Perfect, Linearly Scaled UI 1

Let’s work in CSS pixel values and use SCSS for speed and convenience. So, if we are to target the title of one of these card widgets, our SCSS might look something like this:

.cardWidget {
  .cardHeading {
    font-size: 16px;
  }
}

Nothin’ fancy. Nothing we have not seen before. Being a pixel value, this will not scale.

This design was created with a container that’s 1600px wide. Let’s assume that at 1600px, the ideal font size for the titles of the cards should be 16px since that’s how it’s designed.

Now that we have the “ideal” container width font size for this width, let’s scale our CSS pixel values accordingly using the current* viewport width:

/*
  1600px is the ideal viewport width that the UI designers who
  created the dashboard used when designing their Figma artboards

  Please not we are not using pixel units here, treating it purely
  as a numeric value.
*/
--ideal-viewport-width: 1600;
/*
  The actual width of the user device
*/
--current-viewport-width: 100vw;

.cardWidget {
  .cardHeading {
    /*
      16px is the ideal font size that the UI designers want for
      1600px viewport width.

      Please note that we are not using pixel units here,
      treating it purely as a numeric value.
    */
    --ideal-font-size: 16;
    /*
      Calculate the actual font size:

      We take our idealFontSize and multiply it by the difference
      between the current viewport width and the ideal viewport width.
    */
    font-size: calc(
      var(--ideal-font-size) * (var(--current-viewport-width) / var(--ideal-viewport-width)
    );
  }
}

As you can see, we treat the ideal font size we obtained from the design as a base and multiply it by the difference between the current and ideal viewport widths. How does this look mathematically? Let’s say we are viewing this web app on a screen with the exact same width as the mockup:

--current-device-width: 100vw; // represents 1600px or full width of the screen
--ideal-viewport-width: 1600; // notice that the ideal and current width match
--ideal-font-size: 16;
// this evaluates to:
font-size: calc(16 * 1600px / 1600);
// same as:
font-size: calc(16 * 1px);
// final result:
font-size: 16px;

So, since our viewport width matches perfectly, our font-size ends being exactly 16px at the ideal viewport width of 1600px.

As another example, let’s say we are viewing the web app on a smaller laptop screen that’s 1366px wide. Here is the updated math:

font-size: calc(16 * 1366px / 1600);
// same as:
font-size: calc(16 * 0.85375px);
// final result:
font-size: 13.66px;

Or let’s say we are viewing this on a full high-definition display at 1920px wide:

font-size: calc(16 * 1920px / 1600);
// same as:
font-size: calc(16 * 1.2px);
// final result:
font-size: 19.2px;

You can see for yourself how even though we use pixel values as reference, we are actually able to proportionally scale our CSS values based on the difference in width between the ideal and current viewport sizes.

Here is a small demo I built to illustrate the technique:

Here’s a video for convienence:

Clamping the min and max viewport width

Using this current approach, the design scales to match the viewport size, no matter how big or small the viewport gets. We can prevent this with CSS clamp() which allows us to set a minimum width of 350px and maximum width of 3840px. This means that if we are to open the web app on a device with 5000px width, our layout will stay locked at 3840px:

--ideal-viewport-width: 1600;
--current-viewport-width: 100vw;
/*
  Set our minimum and maximum allowed layout widths:
*/
--min-viewport-width: 350px;
--max-viewport-width: 3840px;

.cardWidget {
  .cardHeading {
    --ideal-font-size: 16;
    font-size: calc(
      /*
        The clamp() function takes three comma separated expressions
        as its parameter, in the order of minimum value, preferred value
        and maximum value:
      */
      --clamped-viewport-width: clamp(var(--min-viewport-width), var(--current-viewport-width), var(--max-viewport-width);
      /*
        Use the clamped viewport width in our calculation
      */
      var(--ideal-font-size) * var(--clamped-viewport-width) / var(--ideal-viewport-width)
    );
  }
}

Let’s make a helper for the unit conversions

Our code is quite verbose. Let’s write a simple SCSS function that converts our values from pixels to relative units. That way, we can import and reuse anywhere this anywhere without so much duplication:

/*
  Declare a SCSS function that takes a value to be scaled and
  ideal viewport width:
*/
@function scaleValue(
  $value,
  $idealViewportWidth: 1600px,
  $min: 350px,
  $max: 3840px
) {
  @return calc(
    #{$value} * (clamp(#{$min}, 100vw, #{$max}) / #{$idealViewportWidth})
  );
}

/*
  We can then apply it on any numeric CSS value.

  Please note we are passing not pixel based, but numeric values:
*/
.myElement {
  width: #{scaleValue(500)};
  height: #{scaleValue(500)};
  box-shadow: #{scaleValue(2)} #{scaleValue(2)} rgba(black, 0.5);
  font-size: #{scaleValue(24)};
}

Porting this to Javascript

Sometimes CSS doesn’t cut it and we have to use JavaScript to size a component. Let’s say we are constructing an SVG dynamically and we need to size its width and height properties based on an ideal design width. Here is the JavaScript to make it happen:

/*
  Our helper method to scale a value based on the device width
*/
const scaleValue = (value, idealViewportWidth = 1600) => {
  return value * (window.innerWidth / idealViewportWidth)
}

/*
  Create a SVG element and set its width, height and viewbox properties
*/
const IDEAL_SVG_WIDTH = 512
const IDEAL_SVG_HEIGHT = 512

const svgEl = document.createElement('svg')
/* Scale the width and height */
svgEl.setAttribute('width', scaleValue(IDEAL_SVG_WIDTH))
svgEl.setAttribute('height', scaleValue(IDEAL_SVG_WIDTH))

/*
  We don't really need to scale the viewBox property because it will
  perfectly match the ratio of the scaled width and height
*/
svg.setAttribute('viewBox', `0 0 ${IDEAL_SVG_WIDTH} ${IDEAL_SVG_HEIGHT}`)

The drawbacks of this technique

This solution is not perfect. For example, one major drawback is that the the UIs are no longer zoomable. No matter how much the user zooms, the designs will stay locked as if they are viewed at 100% zoom.

That said, we can easily use traditional media queries, where we set different ideal numeric values at different viewport widths:

.myElement {
  width: #{scaleValue(500)};
  height: #{scaleValue(500)};
  box-shadow: #{scaleValue(2)} #{scaleValue(2)} rgba(black, 0.5);
  font-size: #{scaleValue(24)};
  @media (min-width: 64em) {
    width: #{scaleValue(800)};
    font-size: #{scaleValue(42)};
  }
}

Now we can benefit from both media queries and our pixel-perfect linear scaling.

Wrapping up

All of this is an alternative way to implement fluid UIs. We treat the pixel-perfect values as pure numeric values, and multiply them by the difference between the current viewport width and the “ideal” viewport width from the designs.

I have used this technique extensively in my own work and hope that you will find some use of it too.


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
Hiring During A Recession: ✋ 5 Things You Need To Do Differently

2022 is a tough year for the job market.
The COVID-19 pandemic has caused widespread economic disruption, with millions of Americans losing their jobs. And even now, as we’re clawing our way out of a pandemic economy, a period of major economic downturn looks inevitable. 
We learned a lot from the Great Recession of 2008, and while the situation is different this time around, the main lesson is still the same. 
During tough economic times, your hiring process needs to change.
But… are we actually in a recession?
Economists are divided on whether we’re currently experiencing a recession or not. The National Bureau of Economic Research (NBER), the body that usually declares it, is yet to give the official word.
It’s true that back-to-back negative GDP quarters and rising interest rates usually indicate a recession, but the story is more complicated than that.
Recessions in the U.S usually sees:

A sharp decrease in GDP (which we are seeing)
A sharp increase in unemployment (which we’re not)

These two factors usually feed into each other. A decrease in economic output means companies have to cut costs, resulting in layoffs and hiring freezes. People stop spending as much, leading to a decrease in business profit. And on it goes.

But in 2022, the unemployment rate has actually dropped. To 3.5% in July 2022, in fact – the lowest since February 2020.
This is consistent with what we’re hearing on the ground. Everyone we know seems to be hiring and struggling to fill positions. Yet, data shows that there are currently over 11 million unfilled jobs in the U.S.
The economic downturn may be caused by a lack of confidence in spending due to high inflation. This puts a strain on businesses, yes. But in a post-pandemic economy where workers are hard to come by, many business owners may be reluctant to cut costs by laying off workers.
That’s why economists speculate that if we do go into a recession in 2022, it won’t be like any recession that they’ve seen before.
What does this mean for those who are hiring?
This is a unique time for hirers.
We’ve seen the trend of the Great Resignation movement and very high job openings over the past two years.

Source: Bureau of Labor Statistics
Companies are still desperate to make hires, even as the economy is contracting. But this state is unsustainable.
Best case scenario: the economy improves, and output increases. But at some point, the economy may also contract to a point where businesses can no longer afford to make new hires. So they will either put hiring on hold or begin making cuts.
This is why it’s so important for hirers to focus on preparing and making the right hires now.
The market is candidate-driven right now, but that may change very quickly. As a result, recruiters and hiring managers must rethink their strategies and prioritize data-driven hires to help their businesses weather any economic storm.
5 Things You Need to Do Differently
Every recession comes with different challenges. But when hiring during a recession, there are key changes you can make to your hiring practices to ensure that the wheels keep moving, no matter what the world throws at you.
Tip 1: Streamline the Screening Process
The screening process is a lot. 
And this is especially relevant for those hiring in the tech industry.

The key is to make it easy for yourself.
If you can do it in one step, why take two?
Zone in on the key skills that you’re looking for in a candidate and choose the most efficient way to test them. That might mean adding a screening question to the application or one technical test instead of two.
The reality is that most applicants won’t make it to the interview stage, and you need to get to the most suitable candidates as quickly as possible.
The key is ensuring that each stage of the process is designed to assess a specific skill set or quality. This will help you weed out candidates who are not a good fit early on, saving you time and effort in the long run.
We go into a lot more details here on how you can speed up that screening process.
Tip 2: Move Quickly
Time is of the essence, and even more so when you’re hiring during a recession.
Hiring is a costly process, so make sure that you’re not burning money trying to get the perfect candidate. By the time you finish prospecting, they might already be snapped up by another company. Fast and attentive responses also tend to make a better impression on quality candidates.
If you’re scouting for some talent, you can reduce your time-to-hire and increase the chances of getting a response by using tools like Contact Out to get contacts on LinkedIn in seconds.
[embedded content]
It’s also not just about the efficiency of the tool but the accuracy. You can read some of our case studies to see how recruiters like yourself have streamlined their contact hunting process.

(Our email search database is pretty good too, just saying. Give it a shot.)
Tip 3: Focus on Fit
Talent acquisition during a recession is all about strategy.
Make sure you’re making decisions on your hiring plan and candidate selection that is based on the latest recruitment data. Predicting a realistic time-to-hire and anticipating likely issues will allow you to work more efficiently and save your company more money.
(This State of Tech Recruitment industry report is a good place to start if you’re in the tech industry.)
Make sure you’re clear about the role and level of expertise needed in the job descriptions, and focus on the most qualified candidates. It’s important at this time that you make decisions informed by the workplace atmosphere, the team, and the likelihood that the candidate will integrate well into the workplace.
Be aware also that a recession usually sees the older people in the workforce retire, which means that you need to fill spaces in those roles. Try to build succession lines early for a smoother transition and match the qualifications of the candidates to the holes the older employees will leave behind.
Tip 4: Build Your Network
It’s especially important to cultivate your circle of contacts before and during recession years.
Building personal relationships with top talent will make them more likely to hear you out when you’re headhunting. Knowing a candidate more personally will also speed up the screening process.
You can also cast your net wider to reach candidates beyond your immediate area and offer remote work as an option if the role you’re trying to fill allows that. Non-traditional talents and candidates on different continents may be the perfect fit for your business, and you won’t know until you send out feelers in their direction.
Having a wide network also lets you fish for candidates in the talent pool more effectively, and you’ll likely be able to find a guy who “knows a guy” that can get you in direct contact with them. This will help cut down that exhausting process of chasing down emails and phone numbers.
Tip 5: Listen
It’s a difficult time for everyone. Employers want to make sure they and the people that rely on them survive through the lean years. Unsurprisingly, this takes a mental toll on business owners and hiring managers.
Job seekers may also be desperate to land a job – any job, and headhunting candidates may be scared to leave secure positions in their current jobs for a new position.
You hold a lot of power in your role, and the most important thing to do in this situation is to listen.
What do employers need? What do candidates prioritize?
In a long period of insecurity, you might see people with talent turn down dream jobs for one that offers better wages and benefits. But the story is different for every field, and some candidates will turn down better pay and benefits for more job security.
On the flip side – our studies reveal that if you’re a recruiter in the tech industry, you’re more likely to get candidate rejections.

So make sure you respond with empathy during each step of the process, and take it easy on yourself if you’re having a hard time filling roles (especially for the tech recruiters reading this!) 
A recession is a hard time to get through for everyone, but we won’t get through it by being callous about people’s needs.
A little kindness is free and goes a long way in tough times 💖
Recruiting is hard enough…
And recessions make everything harder. But as with everything, being prepared and bracing for the worst will help you weather the storm.
But remember! In times of crisis, put on your own oxygen mask before helping other passengers with theirs.
Your role takes a mental toll, and being in the trenches recruiting during a recession means that you see the front lines of it more than other people. Take care to plan with your mental health in mind. Any strategy that compromises your mental state is unsustainable.
Lean on the resources available to you, and let’s get through this together!

Source
Ready to speed up your recruiting process? Get started with Contact Out for free today.

Read More »
How to nail candidate fit for every tech role 🎯

Source
Achieving candidate fit in tech roles is harder than ever – which is the main reason tech role hire time has increased from 29 to 43 days.
Tech recruiters now spend 20 hours per hire on candidate screening calls alone.
(That’s 50% longer than their counterparts from other industries!)
Recruiters from some companies (Canva, Microsoft, Netflix, and Shopify) now spend more than 10 hours of their week just screening candidates on the phone.
That’s a lot of calls — and a lot of time — spent talking to candidates. Most who won’t meet the hiring manager’s criteria (or who won’t find the job offer appealing.)
But why — and what to do about it?
In this article, we’ll answer both of these questions.
Why finding a fitting candidate is hard from the tech recruiter side
Getting the right candidate fit is the most important thing to get right in any company.
Hiring the right person means lower worker turnover, higher engagement, increased productivity, and greater consistency for operations. 
A hiring manager can have the wrong vision, the wrong skills, and be poor operationally but still succeed if they have great people reporting to them.
In tech, “good on paper” does not mean candidate fit
When searching for the perfect candidate, tech recruiters receive a set of criteria from the hiring manager that are based on what they consider to be quality.
Hiring managers might overemphasize candidate filters that worked in the past (or filters that find them candidates like themselves.) 
They may ask for only candidates who graduated from a top 20 university, who have certain certifications, have specific degrees, or self-proclaimed skills.
Tech recruiters will then diligently run through a process of candidate list building, outreach, and screening, to send hiring managers the candidates they will like.

Source
The reality is, skills and backgrounds — the very thing tech recruiters are filtering for during this process — are poor indicators of tech team success.
Harvard business scholar Frans Johansson talks about this in his groundbreaking study The Medici Effect. High-performing teams (like all teams) thrive when they contain all kinds of geographic, academic, ethnic, and experiential backgrounds.
And tech is no exception. 
Top teams of engineers and developers include everything from PhDs, to dropouts, to candidates who learned their skills mid-career.
Instead of just filtering for the “good on paper” attributes a hiring manager asks for, tech recruiters should identify candidates who:

Have the competency to perform the tasks the company needs
Have the intrinsic motivation to do the work

Measuring competency with take home challenges
Regardless of the candidate’s background, the only way to assess their competency is with a take home challenge.
Live brain teasers (Google famously asking candidates how many golf balls would fit in a Boeing 747) and live coding challenges do assess how tech workers work under pressure. 
But these are neither the work the candidate will do, nor the way they’ll do it.
No engineer works with their manager standing over them watching their performance. And they won’t be working out the relative volume of sports equipment and jet airplanes.
They will, however, be working on the company’s codebase — and on company projects. 
A take home challenge can assess this.
For example, ask the candidate how they would design software architecture for a project similar to one that has recently been completed.

Source
It’s much easier for a head of engineering to assess a candidate’s competency if the problem relates to something that head has recently solved.
A challenge (typically taking 30 minutes to 4 hours to complete) will also help gauge the motivation of the candidate.
Typically, about 70% of candidates will complete a challenge when offered one.
If your rates are lower, either the challenge is too hard (or too confusing), or the candidate loses interest in the role before they will themselves through the task.
Lack of interest usually means the tech recruiter isn’t tapping into the candidate’s intrinsic motivation enough.
Measuring tech candidate intrinsic motivation
No matter a tech worker’s competency, they will only be productive if they have the intrinsic motivation to keep working — despite the inevitable frustration that comes with challenging work.
As world-renowned productivity expert Charles Duhigg writes in his book Smarter, Better, Faster, extrinsic motivation (primarily compensation, status, and fringe benefits like remote work and flex time) are short-term and don’t last. 
Our own recent study confirms Duhigg’s assessment, as tech recruiters reported that candidates care even less about extrinsic motivators than workers from other industries.
The factor tech workers care most about — impact — means “the opportunity to grow the company and make their mark.” 
This is at the top of the list for intrinsic motivators, a list which also includes:

Challenge (goals just daunting enough to deliver a sense of accomplishment)
Personal growth (not professional, job title-related)
Team (and the energy they can provide the candidate)

Source
Tech recruiters deliver candidates with higher productivity, longevity, and quality when they spend their screening call time assessing these four intrinsic motivators for a candidate.
Some good questions to ask to assess these motivators include:

How much do you know about what our company does and why we’re doing it?
How would two years at this job get you two years closer to your personal and professional goals?
What challenges in your professional history have kept you most engaged and why?
Talk about the types of team collaboration you have thrived with in the past.

Level up your tech recruitment
As introduced above, achieving perfect candidate fit in tech roles comes down to talking about what they value. 
Our free report on the state of tech recruitment identifies 10 key takeaways to take the anxiety out of the hardest industry to recruit for.

Read More »
Tech recruiters get rejected by candidates most often — Here’s how to get more positive responses ✨

Tech recruiters have the toughest job in recruitment — by far.
Tech workers are so highly sought after, it’s hard just to get a response. Tech recruiters spend 1.9 hours longer each week doing outreach than recruiters from other industries.
But even when they get a response, tech recruiters face rejection much more often.
In our recent survey, tech recruiters told us that 43% of candidate responses were negative, vs. just 27% for other recruiters.
The top negative responses being:

“I’m not interested in this job”
“I’m not interested in any job”
“I don’t want to be contacted by you under any circumstances”

That means when tech recruiters get an email — ping! — every other response is likely to be a candidate complaining in some way about the job offer.

Source
Tech workers are interested – in the right email!
Despite the difficulty in finding a candidate who matches a job requisition, 80% of tech workers surveyed said they would change jobs this year, and 73% talk to a recruiter each month.
So then, the keys to increasing the rate of positive candidate response in tech recruitment?
Here are the 4 most important ones.

Talk to them about impact.
We mentioned previously that candidates are only interested in one aspect of a job – impact. Or specifically, “the opportunity to grow the company and make their mark.”
Getting clear on that, and focusing on it in the initial email, will start the conversation in the right direction.
For example, instead of simply talking about the salary and job title, mentioning that the candidate could…

“help 10,000,000 introverts exercise without gym anxiety” 

“save coders across the world millions of hours of time” 

…with their work will help them frame why the job matters.
After all, when they change jobs, they have to tell their friends and loved ones. Make it easy for them to put an aspirational reason behind their decision.

Turn rejection into referral.
I use a method recommended by TripleByte co-founder and Y Combinator partner Harj Taggar (which I’ve dubbed “rejection referrals”) to hire many of the 60 new staff brought into ContactOut this year.
Whenever I get a negative response from a tech candidate, I ask them if they can refer someone else.Just doing this one thing increased our positive response rate for product managers in the sparse Singaporean job market by 30%.

Mention the compensation range in the email.
Although compensation alone isn’t usually enough to entice the best tech workers, 79% prefer to see a compensation range in the email. Truth is, “competitive pay and benefits” just won’t cut it in 2023.
Candidates will respond more positively if you include pay transparency in the initial outreach email.
And increasingly, laws are requiring it. With new pay transparency laws cropping up in Colorado, New York City, and Washington state, now is a good time to get ahead of this recruitment trend.
It’s good for you, too. As I mentioned in another blog post, this also saves you and the candidate time. Why spend 30 minutes in a screening call with a candidate only to learn that you can’t afford them?

Save the non-job-related personalization for the P.S.
Personalization in recruitment outreach emails is powerful – but can come across as awkward and insincere if you quickly move from:“Hey Peter, I see we’re both mountain climbers!”
to
“Now, let’s talk about this role that’s open…”
A better way? Open the email with the reason they stood out as a candidate for the job.

“I see you were a top performer at…”
“I see you helped Company XYZ scale from…”
“Person XYZ recommended I reach out to you…”

And save the non-job-related personalization for the p.s. at the bottom of the email.
When you read an email, your eye always goes to the p.s. — so people won’t miss it.

I get about 25% more positive responses with the personalized p.s. than without it.
It turns any cold email warmer. I can mention that you and I both went to the same university, both volunteer for the same cause, or even just to mention how impressed I am about your startup, patent, or cool project.

Level up your tech recruitment
The full study has many more insights that will help tech recruiters perform better in 2022 — get into “the 30% club” and accelerate your own career. Here’s how:

Read More »