Posted on

The Complete Guide to Project Management Jobs – 2021

Companies across every industry have recognized the importance of effective project management. From IT to healthcare, construction, marketing, and more, a project’s success starts with a project manager.

According to the Project Management Institute, project management jobs are expected to grow by 33% through 2027, creating 22 million new jobs.

With the demand for qualified project managers at an all-time high, it’s an excellent opportunity to start a career or advance your career in this space. But “project manager” is such a broad term. This guide will explain the different types of project management roles and job titles.

Why Are Project Management Jobs So Important?

Aside from the high demand, project managers steer the ship for different teams. This job entails much more than just telling people what to do. The best project management jobs require skills related to risk management, resource allocation, budget management, and more.

You’ll also need to have soft skills like leadership, communication, and the ability to manage the different personalities on a team. Project managers must be able to wear multiple hats on a daily basis to do this job effectively.

Without a good project manager, the chances of an organization achieving its goals decrease dramatically.

3 Tools to Improve Your Project Management Career

To have a successful career in project management, you need to be comfortable using project management software. If you’re well-versed with modern technology, you’ll qualify for better project management jobs.

#1 — Trello

Trello is one of the most popular project management tools on the planet. It’s used by over one million teams worldwide, including household names like Google and Costco. If you’re a project management beginner and looking to get your feet wet with project management software, Trello is the best place to start. Unlike other tools out there, Trello has virtually no learning curve. The web-based Kanban-style boards are easy to deploy and improve the way you track tasks at scale.

Your team will love Trello as well, as it has everything they need to work collaboratively on tasks and ongoing projects. Get the most out of Trello by taking advantage of power-ups and no-code automation. This will help streamline your workflow and boost the productivity of your team. Trello is free for basic use, and business plans start at $10 per month. Try the business-class version of Trello for free with a 14-day trial.

#2 — Zoho Projects

Zoho Projects is a versatile cloud-based project management tool. It’s used in industries like construction, education, real estate, consulting, marketing, software development, and more. From task management to collaborating with remote teams, Zoho Projects is an all-in-one solution to accommodate your needs.

The feature-rich software has tools for time tracking, reporting, work breakdown structures (WBS), project baselines, notifications, and more. You can use it to plan sprints, set dependencies between tasks, identify critical tasks, and even manage budgets. Zoho Projects lets you switch between task lists, Kanban boards, and Gantt charts with ease. The software is free for up to three users, but I’d recommend a premium plan for business use. Premium packages start at $5 per user per month, and you can try it free for ten days.

#3 — Teamwork

Teamwork isn’t as well-known as some of the other project management tools on the market today. But the software is still trusted by 20,000+ businesses and 6,000+ agencies. Some of its customers include Netflix, PayPal, Spotify, HP, and Disney, so you know it’s a reliable platform.

I like Teamwork because it’s so powerful yet really simple to use. It’s a great way for portfolio managers to oversee multiple projects at scale, and it’s perfect for PMOs to handle the office-side of managing projects. It has solutions for resource management, time tracking, task management, reporting, and more. Small teams with up to five users can use Teamwork free forever. Pro plans start at $10 per user per month, and you can try any paid plan free for 30 days—no credit card required.

The Basics of Project Management Jobs

The core skills of a project manager typically remain the same across the board. But here’s a closer look at the different types of project management jobs. These range from entry-level jobs to positions with the most prestigious titles and everything in between.

IT Project Manager

As the name implies, an IT project manager oversees technical projects. This position could be a full-time role within an organization or outsourced to a specialized firm for a specific type of project. For example, a company could hire a third-party agency for mobile app development. Software development would fall into the IT project management scope.

Aside from software and applications, other areas for IT project management could involve security, backend infrastructure, internal platforms, SaaS, and anything else requiring a technical background.

Construction Project Manager

This is another project management job with a self-explanatory title. A construction project manager is a specialized role in the construction industry. Anyone in this field needs to have a firm grasp of what it takes to design and build the project at hand.

Construction project managers typically have relationships with contractors, suppliers, engineers, and other people needed to complete a construction project. From building a house to a commercial remodel, construction project managers would oversee these types of jobs.

Digital Project Manager

A digital project manager job is a bit broader. But essentially, any project that falls within an online industry would fit this category. Examples include online marketing, content creation, and perhaps even digital sales or digital product development.

It’s common for digital project managers to use agile project management methodologies. They leverage different types of project management software to collaborate with their teams and track deliverables.

Legal Project Manager

Legal project managers typically have a background in law. It’s a versatile role that can encompass process management for internal legal operations and manage legal projects for clients.

For example, legal project managers can help lawyers make sure that client expectations are being met. They’ll plan and track key deliverables and milestones of a particular legal project while managing the budget and resources as well.

Senior Project Manager

A senior project manager has lots of experience within a particular company or industry. This experience typically translates to an added level of responsibility. Senior project managers will usually oversee larger projects with bigger teams and higher project budgets.

Sometimes a person who has worked at the same company for a long time could eventually earn the title of senior project manager. The title change could result in a pay increase as well. But ultimately, the role remains the same. Some organizations like to staff a few senior project managers as a way to appease clients. It’s another way of showing clients that the “A-team” is on the job.

Project Director

A project director, also known as a project lead, is often designated to senior project managers who are assisting with a project. This person won’t be as hands-on as a traditional project manager. But they’ll be available to sponsor and support the project team and may work alongside another project manager who is handling day-to-day workflows.

Project directors are typically reserved for larger projects. This person might not always have a background in project management either. Instead, a project director could have more expertise with the product or deliverable that the team is working to create.

Program Director

Program directors typically manage a program of work, or sometimes multiple programs. The program director role could oversee multiple projects within a specific department of a business. If you’re a program director, you’ll likely have traditional project managers working under you and reporting to you on the status of their projects.

Portfolio Manager

As the name implies, portfolio managers oversee a portfolio of projects. This is a common role within agencies, although it can also be given to people working directly within an enterprise organization.

Portfolio managers don’t concern themselves with the day-to-day tasks and deliverables from a project team. Instead, they focus on the big-picture goals of a company. Project portfolio managers need to make sure that each project generates an acceptable ROI, so they’ll focus more on budgets, risks, and resources.

Project Administrator

A project administrator is one of the most common entry-level jobs within project management. This person is only responsible for a single project and supports the team by focusing specifically on administrative tasks.

Project Support Specialist

Project support specialists, also known as project support officers, are commonly seen in the public sector. It’s an entry-level project management job that acts as an assistant to the project manager. If you can’t land the outright role of project manager, you might get started as a project support specialist until you’ve learned enough to manage your own team.

Project Controller

The role of project controller is typically seen within industries like construction and engineering. This is another entry-level position that has somewhat of a unique role based on the project in question. A project controller might act as a hybrid version between someone who coordinates a project and a person who focuses solely on project planning.

PMO Analysts and Specialists

PMO (project management office) analysts and specialists support a project instead of managing it from start to finish. Part of the supporting role will vary on the analyst’s area of expertise. For example, you could fill a PMO role that specializes in risk management or law.

3 Tricks For Better Project Management Jobs

If you’re interested in getting a different job within project management, either for higher pay or new challenges, these quick tricks will get you started in the right direction:

Trick #1: Improve Quality Standards

Getting a project done and getting a project done right are two very different things. All too often, project managers put so much emphasis on completing a project on-time and under budget that the quality of the final deliverable suffers.

I’m not saying that you should exceed your project timeline estimates or project budgets, but you need to find a way to prioritize quality throughout each stage of the project life cycle.

Start by defining quality standards with project stakeholders and sponsors from the beginning. Make sure your team understands these standards and find a way to measure them with real KPIs.

Another great way to improve the quality of projects is by assigning a specific QA role on your team. This person will handle testing and other quality assurance tasks to hold everyone else on your team accountable.

Your project management career has a greater chance of taking off when the quality of your deliverables is higher than expected.

Trick #2: Set Realistic Expectations

Project managers are in high demand. These jobs can pay six figures, and you can even find project management roles paying upwards of $140,000. With that said, don’t expect to land a job like this if you’re fresh out of school.

Like most careers, you need to start at the bottom and work your way up. I’d be surprised if you can find a company that’s willing to trust with a 20-person team and a $10 million budget as your first job. You might not even be the sole project manager of a team for quite some time.

Start with an entry-level position and learn the ropes. There’s nothing wrong with starting as a project administrator or a project support specialist. You can’t set your eyes on jobs like a senior project manager or project portfolio manager until you’ve been around for 10-20+ years.

Trick #3: Negotiate

Project managers need to learn to negotiate daily to do their jobs effectively. You can apply those same negotiation skills outside of actual projects to further your project management career as well.

Whether you’re a beginner or an experienced manager, start by negotiating your salary. Sometimes a simple ask will be enough to get a pay raise.

Alternatively, keep your eye on other project management jobs that you qualify for. Those open positions can be used as leverage for your career. Asking for more responsibilities can be part of your negotiation process as well. This could lead to you managing larger projects and ultimately getting a higher-paying job title.

Posted on

The Complete Guide to Project Management Process

At its core, project management is all about execution. From small projects to large, complex, and everything in between, proper execution comes down to following the right process.

Project managers need to do much more than just remind their teams about deadlines and upcoming meetings—they must have a firm grasp of the entire project life cycle.

This guide will dive into the different phases and processes of a project. It will ultimately help beginners and experienced project managers alike improve their management skills and deliver better results.

What is the Project Management Process?

There are lots of different project management methodologies. But regardless of the method in place, all projects have two things in common—projects are completed in phases and follow an established process through each stage.

According to the Project Management Institute (PMI), there are five project management processes:

  1. Project Initiation
  2. Project Planning
  3. Project Execution
  4. Project Monitoring and Controlling
  5. Project Closing

Understanding these systematic elements as a whole will help project managers determine what must be accomplished before moving to the next stage in the process.

4 Tools to Improve Your Project Management Process

The best project managers rely on tools to ensure the project management process runs smoothly. Whether you’re a complete beginner or experienced manager, these are the top tools that you should take into consideration:

#1 — Zoho Projects

Zoho Projects is one of the most powerful and flexible project management tools on the market today. It’s used throughout projects for construction, marketing, software development, education, consulting, testing, real estate, and a wide range of other industries. The software has everything you could possibly need to manage the project life cycle and collaborate with your team, regardless of their location.

The tool comes with an intuitive user interface and integrates with dozens of third-party business apps that your organization uses on a regular basis. It comes with features for task management, time tracking, reporting, dependencies, and more. Use it to manage sprints and see a complete overview of your total project portfolio. There’s a free version of Zoho Projects that supports up to three users. Most companies sign up for the Premium package, at a minimum. Paid plans start at $5 per user per month. Try Zoho Projects for free with a 10-day trial.

#2 — Favro

Favro isn’t quite as well known as some of the other project management tools out there. It’s an all-in-one solution for collaborative planning for agile teams. The software is flexible enough to accommodate the needs of marketing teams to software developers. From backlog management to sprint planning, Favro has it all. It’s an excellent solution to solve problems associated with remote work. Your entire team will benefit from its real-time collaboration features.

Overall, the tool is packed with features to simplify the project management process. It comes with solutions for project roadmaps, project scheduling, team planning, and more. Favro integrates with popular tools like Slack, Google Drive, Jira, Zapier, and other useful business apps. The software works best for smaller teams using agile project management. Plans start at $10.20 per month, and you can try it free for 14 days.

#3 — Teamwork

Teamwork is trusted by 20,000+ businesses and 6,000+ agencies across the globe. Big brands like Netflix, HP, Panasonic, PayPal, Spotify, and Disney all rely on Teamwork for project management. The software is the perfect balance between simple and powerful. It’s easy for non-technical users to figure out but packed with features to accommodate a wide range of needs and use cases.

Compared to other tools on the market, Teamwork really stands out from the crowd with its project portfolio management tools. For project managers that oversee multiple projects simultaneously, this software makes it easy to implement and track the process of each one through a single source of truth. It comes with tools for time tracking, task management, resource management, reporting, and more. You can integrate Teamwork with QuickBooks, Zapier, Dropbox, Xero, HubSpot, and other tools that you’re already using. The software is free forever for up to five users, and paid plans start at $10 per month. Try Teamwork for free with a 30-day trial.

#4 — Wrike

Wrike is another popular solution in the project management category. It’s used by 20,000+ organizations, including household names like Airbnb, Dell, and Google. I like Wrike because it’s so versatile. The same software can be used to accommodate marketing teams, professional services organizations, product development teams, creative teams, and more. It’s used for project management, resource management, agile project management, remote work, and plenty of other use cases.

One of the reasons why Wrike is so popular is due to its advanced workflow automations. This helps streamline the project management process from start to finish. Wrike also has solutions that leverage AI for risk prediction. This is a huge component of managing crucial stages within any project. Small teams of up to five users can use Wrike for free. But to get the most out of this software, you’ll definitely want to sign up for a premium plan. Those start at $9.80 per user per month. Try Wrike for free with a 14-day trial.

The Basics of the Project Management Process

As previously mentioned, there are five phases in the project management process. We’ll discuss each one in greater detail below.

Project Initiation

The first stage in the project management process is initiation. In this phase, project managers must define the project scope at a broad level. You’ll need to find a way to turn an idea into a tangible goal.

The budget, estimated timeline, goals, and project constraints will all be defined during the project initiation. Key stakeholders will be identified, and the project team will be determined as well.

Arguably the most important part of the initiation phase is feasibility. PMs must remove vagueness from the idea, so clear end goals can be established. You won’t be diving into any technical details of the project just yet, but the general overview has to get clarified.

For example, let’s say a manufacturing facility is tasked with building an electric scooter. The design, battery, and other details will not be established in the initiation phase. The only certainty here is that an electric scooter will be built within a specific time and budget.

Project Planning

The project planning phase of the process is a bit more in-depth. Now it’s time to establish a project roadmap.

Project managers are tasked with creating a project schedule and identifying the technical aspects of what needs to happen. This includes tangible goals and deliverables. Regardless of the project management methodology in place, project planning is arguably the most important part of the project management process. This step lays the foundation for the rest of the phases, so don’t cut corners or take this lightly.

By the end of this phase, the project manager should have a detailed blueprint that explains the entire project from inception through completion.

Planning also involves risk mitigation. Project managers need to identify potential risks and develop a plan to minimize those problems, should any issues arise. Put some contingencies in place and be ready to implement changes that can prevent bottlenecks and delays down the road.

The final part of project planning is establishing a communication plan with stakeholders. From status updates to general input and regular meetings, all of this will be identified during the planning phase.

Project Execution

The project execution phase is when the project team puts the plan into action. It’s the stage in the project management process where the actual work gets completed.

It’s the project manager’s job to establish a methodology and workflow for the team to follow. Stakeholders don’t need to be bothered with these details, but the management methodology will define clear guidelines for the entire team.

Project managers will communicate with stakeholders on a regular basis throughout the execution process, on a schedule previously defined during the planning stage. This helps ensure that everyone is on the same page and the project runs according to plan.

Project management and team collaboration software make this much easier for everyone involved. It’s the best way for project managers to boost their team’s productivity while keeping everyone in the loop.

Let’s jump back to the electric scooter example. During the execution phase of this project, the scooter will be developed from start to finish.

Project Monitoring and Controlling

The monitoring and controlling process of project management actually runs parallel with the execution stage. Project managers use this to ensure tasks are completed on time and deliverables are met.

Depending on the project management methodology in place, managers have different ways to ensure that nobody on the team is deviating from the original plan.

For example, if you’re using an agile methodology like Scrum, you might hold daily standup meetings as a way to monitor what your team is working on.

Project managers must also track the costs and resources being used throughout the project. This helps ensure that everything is being completed within the predefined budget.

Project Closing

The last stage of the project management process is the closing. This is when the project ends after its final delivery.

If you’ve hired third-party contractors or outside help to complete the project, those contracts will be terminated during this phase. All paperwork and filing to indicate the end of the project will happen during the closing process as well.

It’s essential for project managers to hold a final meeting with their team after the project completion. This is a great opportunity for everyone to reflect on the project to determine what went well and what needs improvement. Closing meetings help improve the performance and productivity of teams as they work on future projects together.

Project managers should also complete a final report of the project covering all of the details from start to finish. This report will be kept on file so anyone within the organization can access it at a later date.

3 Tricks For Project Management Process

The project management process is very involved. But in my experience, these quick tricks will make your life much easier.

Trick #1: Use Project Management Software

Running a project without PM software in today’s day and age is essentially setting up your team for failure. There are so many moving parts throughout the project management process that keeping track of everything without software is unrealistic and inefficient.

As a project manager, you can use this software to create a project timeline, track your budget, assign tasks to your team, and monitor progress. Project management software is also the best way to run reports and share updates with stakeholders.

In addition to the tools listed earlier in this post, check our complete list of the best project management software on the market today.

This guide also contains helpful resources on how to choose the right project management software for your unique situation. Regardless of your project scope or the project management methodology you’re using, the guide has something for everyone.

Trick #2: SMART and CLEAR Goal Planning

As previously stated, the project planning phase is arguably the most important stage within the project management process. But taking a broad idea and turning it into a tangible goal is easier said than done.

To simplify this step, I recommend using SMART or CLEAR goal planning. These are two acronyms that can help you clearly define intentions and purpose.

SMART stands for:

  • Specific
  • Measurable
  • Attainable
  • Realistic
  • Timely

CLEAR stands for:

  • Collaborative
  • Limited
  • Emotional
  • Appreciable
  • Refinable

By working these goal-setting methods into your project planning, it can help you define your project scope much faster, in a way that’s clearly communicated with your team and stakeholders.

Trick #3: Think Big-Picture

Lots of project managers fail because they put too much attention on smaller details of the project that should ultimately be handled by the project team.

While it’s still your job to establish the process, timeline, and tasks associated with execution, you shouldn’t be putting all of your efforts into how each team member is completing their tasks. Let your team hold themselves accountable for their work. Project managers should act as a resource if team members run into issues or have a problem.

Micromanaging is ineffective, and your time will be better spent focusing on the big picture of the project. This helps ensure that resources are allocated effectively and the project is completed on time while staying within budget.

Posted on

looking for the name of software

Dear all
I'm trying to track down the name/existence of software that I used in 1999 to 'write' a financial reporting system - it was a curious mix of spreadsheet with programming capability... Would any of you know about this? Its name was similar (-ish) to Visual Basic, but it wasn't VB itself... The way I was asked to use it was to collate financially reported information from a series of European entities and then present them in a specific format for the client. The client was Synstar (pan European disaster recovery computing service), since taken over by HP.

The reason I'm interested in tracking it down - is (curiosity, it's really bugging me that I can't remember its name

Posted on

looking for the name of software from

Dear all
I'm trying to track down the name/existence of software that I used in 1999 to 'write' a financial reporting system - it was a curious mix of spreadsheet with programming capability... Would any of you know about this? Its name was similar (-ish) to Visual Basic, but it wasn't VB itself... The way I was asked to use it was to collate financially reported information from a series of European entities and then present them in a specific format for the client. The client was Synstar (pan European disaster recovery computing service), since taken over by HP.

The reason I'm interested in tracking it down - is (curiosity, it's really bugging me that I can't remember its name!!... and also) to find out if there is something equally as logical, easy to pick up and user friendly that I could use. I would like to be able to take data from individual small/medium sized businesses and then have a lovely usable (customised) report pop out neatly the other end... I realise that there will be cloud based software that exists for this... but I'm enthusiastic enough to want to try for myself... (and I'm supposed to be studying/have teenage children/husband/housework and this would be a lovely excuse to do something that is not related to those... ).

Posted on

Planning for Responsive Images

The first time I made an image responsive, it was as simple as coding these four lines:

img {
  max-width: 100%;
  height auto; /* default */
}

Though that worked for me as a developer, it wasn’t the best for the audience. What happens if the the image in the src attribute is heavy? On high-end developer devices (like mine with 16GB RAM), few or no performance problems occur. But on low-end devices? It’s another story.

image at multiple screen sizes

The above illustration isn’t detailed enough. I’m from Nigeria and, if your product works in Africa, then you shouldn’t be looking at that. Look at this graph instead:

Nowadays, the lowest-priced iPhone sells for an average of $300. The average African can’t afford it even though iPhone is a threshold for measuring fast devices.

That’s all the business analysis you need to understand that CSS width doesn’t cut it for responsive images. What would, you ask? Let me first explain what images are about.

Nuances of images

Images are appealing to users but are a painstaking challenge for us developers who must consider the following factors:

  • Format
  • Disk size
  • Render dimension (layout width and height in the browser)
  • Original dimension (original width and height)
  • Aspect ratio

So, how do we pick the right parameters and deftly mix and match them to deliver an optimal experience for your audience? The answer, in turn, depends on the answers to these questions:

  • Are the images created dynamically by the user or statically by a design team?
  • If the width and height of the image are changed disproportionately, would that affect the quality?
  • Are all the images rendered at the same width and height? When rendered, must they have a specific aspect ratio or one that’s entirely different?
  • What must be considered when presenting the images on different viewports?

Jot down your answers. They will not only help you understand your images — their sources, technical requirements and such — but also enable you to make the right choices in delivery.

Provisional strategies for image delivery

Image delivery has evolved from a simple addition of URLs to the src attribute to complex scenarios. Before delving into them, let’s talk about the multiple options for presenting images so that you can devise a strategy on how and when to deliver and render yours.

First, identify the sources of the images. That way, the number of obscure edge cases can be reduced and the images can be handled as efficiently as possible.

In general, images are either:

  • Dynamic: Dynamic images are uploaded by the audience, having been generated by other events in the system.
  • Static: A photographer, designer, or you (the developer) create the images for the website.

Let's dig into strategy for each of this types of images.

Strategy for dynamic images

Static images are fairly easy to work with. On the other hand, dynamic images are tricky and prone to problems. What can be done to mitigate their dynamic nature and make them more predictable like static images? Two things: validation and intelligent cropping.

Validation

Set out a few rules for the audience on what is acceptable and what is not. Nowadays, we can validate all the properties of an image, namely:

  • Format
  • Disk size
  • Dimension
  • Aspect ratio

Note: An image’s render size is determined during rendering, hence no validation on our part.

After validation, a predictable set of images would emerge, which are easier to consume.

Intelligent Cropping

Another strategy for handling dynamic images is to crop them intelligently to avoid deleting important content and refocus on (or re-center) the primary content. That’s hard to do. However, you can take advantage of the artificial intelligence offered by open-source tools or SaaS companies that specialize in image management. An example is in the upcoming sections.

Once a strategy has been nailed down for dynamic images, create a rule table with all the layout options for the images. Below is an example. It's even worth looking into analytics to determine the most important devices and viewport sizes.

Browser Viewport HP Laptop PS4 Slim Camera Lens / Aspect Ratio
< 300 100 vw 100 vw 100 vw/1:2
300 - 699 100 vw 100 vw 100 vw/1:1
700 - 999 50 vw 50 vw 50 vw/1:1
> 999 33 vw 33 vw 100 vw/1:2

The bare (sub-optimal) minimum

Now set aside the complexities of responsiveness and just do what we do best — simple HTML markup with maximum-width CSS.

The following code renders a few images:

<main>
  <figure>
    <img src="https://res.cloudinary.com/...w700/ps4-slim.jpg" alt="PS4 Slim">
  </figure>
      
  <figure>
    <img src="https://res.cloudinary.com/...w700/x-box-one-s.jpg" alt="X Box One S">
  </figure>
      
  <!-- More images -->
    
  <figure>
    <img src="https://res.cloudinary.com/...w700/tv.jpg" alt="Tv">
  </figure>
</main>

Note: The ellipsis (...) in the image URL specifies the folder, dimension, and cropping strategy, which are too much detail to include, hence the truncation to focus on what matters now. For the complete version, see the CodePen example down below.

This is the shortest CSS example on the Internet that makes images responsive:

/* The parent container */
main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

img {
  max-width: 100%;
}

If the images do not have a uniform width and height, replace max-width with object-fit and set the value to cover.

Jo Franchetti’s blog post on common responsive layouts with CSS Grid explains how the value of grid-template-columns makes the entire layout adaptive (responsive).

See the Pen
Grid Gallery by Chris Nwamba (@codebeast)
on CodePen.

The above is not what we are looking for, however, because...

  • the image size and weight are the same on both high-end and low-end devices, and
  • we might want to be stricter with the image width instead of setting it to 250 and letting it grow.

Well, this section covers "the bare minimum" so that’s it.

Layout variations

The worst thing that can happen to an image layout is mismanagement of expectations. Because images might have varying dimensions (width and height), we must specify how to render the images.

Should we intelligently crop all the images to a uniform dimension? Should we retain the aspect ratio for a viewport and alter the ratio for a different one? The ball is in our court.

In case of images in a grid, such as those in the example above with different aspect ratios, we can apply the technique of art direction to render the images. Art direction can help achieve something like this:

For details on resolution switching and art direction in responsive images, read Jason Grigsby’s series. Another informative reference is Eric Portis’s Responsive Images Guide, parts 1, 2, and 3.

See the code example below.

<main>
  <figure>
    <picture>
      <source media="(min-width: 900px)" srcset="https://res.cloudinary.com/.../c_fill,g_auto,h_1400,w_700/camera-lens.jpg">
      
      <img src="https://res.cloudinary.com/.../c_fill,g_auto,h_700,w_700/camera-lens.jpg" alt="Camera lens">
    </picture>
  </figure>
  
  <figure>
    <picture>
      <source media="(min-width: 700px)" srcset="https://res.cloudinary.com/.../c_fill,g_auto,h_1000,w_1000/ps4-pro.jpg"></source>
    </picture>
    <img src="https://res.cloudinary.com/.../c_fill,g_auto,h_700,w_700/ps4-pro.jpg" alt="PS4 Pro">
  </figure>
</main>

Instead of rendering only one 700px wide image, we render 700px x 700px only if the viewport width exceeds 700px. If the viewport is larger, then the following rendering occurs:

  • Camera lens images are rendered as a portrait image of 700px in width and 1000px. in height (700px x 1000px).
  • PS4 Pro images are rendered at 1000px x 1000px.

Art direction

By cropping images to make them responsive, we might inadvertently delete the primary content, like the face of the subject. As mentioned previously, AI open-source tools can help crop intelligently and refocus on the primary objects of images. In addition, Nadav Soferman’s post on smart cropping is a useful start guide.

Strict grid and spanning

The first example on responsive images in this post is a flexible one. At a minimum of 300px width, grid items automagically flow into place according to the viewport width. Terrific.

On the other hand, we might want to apply a stricter rule to the grid items based on the design specifications. In that case, media queries come in handy.

Alternatively, we can leverage the grid-span capability to create grid items of varied widths and lengths:

@media(min-width: 700px) {
  main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(min-width: 900px) {
  main {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
  }
  figure:nth-child(3) {
    grid-row: span 2;
  }
  figure:nth-child(4) {
    grid-column: span 2;
    grid-row: span 2;
  }
}

For an image that is 1000px x 1000px square on a wide viewport, we can span it to take two grid cells on both row and column. The image that changes to a portrait orientation (700px x 1000px) on a wider viewport can take two cells on a row.

See the Pen
Grid Gallery [Art Direction] by Chris Nwamba (@codebeast)
on CodePen.

Progressive optimization

Blind optimization is as lame as no optimization. Don’t focus on optimization without predefining the appropriate measurements. And don’t optimize if the optimization is not backed by data.

Nonetheless, ample room exists for optimization in the above examples. We started with the bare minimum, showed you some cool tricks, and now we have a working, responsive grid. The next question to ask is, "If the page contains 20-100 images, how good will the user experience be?"

Here’s the answer: We must ensure that in the case of numerous images for rendering, their size fits the device that renders them. To accomplish that, we need to specify the URLs of several images instead of one. The browser would pick the right (most optimal) one according to the criteria. This technique is called resolution switching in responsive images. See this code example:

<img 
  srcset="https://res.cloudinary.com/.../h_300,w_300/v1548054527/ps4.jpg 300w,
          https://res.cloudinary.com/.../h_700,w_700/v1548054527/ps4.jpg 700w,
          https://res.cloudinary.com/.../h_1000,w_1000/v1548054527/ps4.jpg 1000w"
             
  sizes="(max-width: 700px) 100vw, (max-width: 900px) 50vw, 33vw"
  src="https://res.cloudinary.com/.../h_700,w_700/v1548054527/ps4.jpg 700w"
  alt="PS4 Slim">

Harry Roberts’s tweet intuitively explains what happens:

When I first tried resolution switching, I got confused and tweeted:

Hats off to Jason Grigsby for the clarification in his replies.

Thanks to resolution switching, if the browser is resized, then it downloads the right image for the right viewport; hence small images for small phones (good on CPU and RAM) and larger images for larger viewports.

The above table shows that the browser downloads the same image (blue rectangle) with different disk sizes (red rectangle).

See the Pen
Grid Gallery [Optimized] by Chris Nwamba (@codebeast)
on CodePen.

Cloudinary’s open-source and free Responsive Image Breakpoints Generator is extremely useful for adapting website images to multiple screen sizes. However, in many cases, setting srcset and sizes alone would suffice.

Conclusion

This article aims at affording simple yet effective guidelines for setting up responsive images and layouts in light of the many—and potentially confusing—options available. Do familiarize yourself with CSS grid, art direction, and resolution switching and you’ll be a ninja in short order. Keep practicing!

The post Planning for Responsive Images appeared first on CSS-Tricks.