Web Design Best Practices: 8 Universal Tips Every New Developer Should Consider

As an aspiring web designer, you’ve spent a fair amount of time developing your design and coding skills. However careful you are, it takes time to learn the ins and outs of a profession, and there are many common mistakes new web designers tend to make without realizing.

To help you avoid those pitfalls, we surveyed experienced web designers on what mistakes they commonly see new web designers make—and what can be done to avoid them. Even if you think you know everything you need to know to be successful, there’s value in consistently seeking ways to improve.

“Sometimes developers, not just new ones, settle with their knowledge,” says Claudiu Neaga, team lead at Flipsnack. “They no longer continue to improve their knowledge and the quality of their code. In an ever changing industry, this means mediocrity.”

Web design best practices: 8 Tips for new developers

Looking for a leg up? This advice from those who’ve walked the walk in web development will help you grow as a professional.

1. Actively listen to your clients

As a web developer, you have spent a lot of time building thorough knowledge of what makes a good website. However, as a professional web designer, your job is not to make the best website according to your own metrics, it is to make the best website according to your client.

“I see new web developers [often] want to design their own website for clients and not design based on what the client wants and needs,” says Cyrus Yung, director of Ascelade Pte Ltd. “They tend not to ask a lot of questions about the client’s products or services. Failing to understand the nature of their client’s business is a major mistake.”

The most important part of working with a client is listening to what they need. Demonstrating that you are taking your client’s insights and requirements seriously can be done in simple but effective ways.

“A good way to show your professionalism is to take notes of what a client discussed during the meeting and email the client about the specifics of your conversation,” says Yung. “You can also prepare a set of questions for the client that will further help you with the direction of the web design and web functions.”

2. Code efficiently

Julien Mourer, a front end developer at Poki says one of the biggest mistakes new developers make is over-engineering. In school you may learn how to create a perfect, elegant solution to a coding problem, but Mourer warns that might not always practical.

“It’s super important to know how to do that, but when you start working you discover that making everything ‘perfect’ takes a lot of time and requirements change, so sometimes your beautiful code goes to the bin,” Mourer says. “You need to be pragmatic and try to keep things simple—of course it’s a bit of a balancing act.”

Keep what you’re working on in perspective—and know sometimes you don’t need to reinvent the wheel to be successful. Michael Alexis, owner of Teambuilding, puts it simply.

“Don’t write 10,000 lines of code if you can accomplish the same result in 500.”

3. Don’t lose sight of device-variety

While you might love the canvas a full-sized desktop monitor provides, failing to consider and accommodate the wide variety of devices people use to browse the internet is one of the most common mistakes web developers make, according to Joe Wilson of Volare Systems.

“Have you ever opened an email on your phone and the text is so small you can’t read it? You could pinch zoom to read the email, but more likely, you delete it,” Wilons says. “The same happens when mobile users come to your website. If it’s not optimized for mobile they’ll hit the back button and ignore your site.”

In a smartphone world, making sure your designs translate well to a mobile device is essential. The good news is that software tools like Adobe XD® or InVision® can make this process relatively easy to manage.

4. Hosting services matter

No one wants to spend unnecessary money. That said, the clients you work with may not understand why a strong hosting service could be worth the expense.

“There’s a reason cheap hosting is cheap,” says Curtis Bickler, founder of Expert Media Design. “I had a client whose product made it on a morning news show, and his inexpensive hosting provider couldn’t handle the surge in traffic. There’s no way to tell how much traffic he lost simply because his hosting solutions couldn’t scale quickly to handle the traffic boost.”

Moral of the story? A beautiful design can’t overcome all technical limitations—so make sure your clients understand the potential risks if they’re opting for inexpensive hosting.

5. Give realistic work timelines

Web development projects often involve a fair amount of unexpected bugs or issues in need of resolving. While that’s great for anyone who enjoys the challenge, it can also put work timelines way out of whack from what was originally estimated.

“There are lots of jokes about how web developers can take months or even years to finish a project that was supposed to take weeks,” says Alexis. “If you can be the one that sets accurate timelines and meets these goals, you will stand out.”

Estimating how long a project will take to complete isn’t an easy task—even seasoned developers run into unexpected issues—but you can potentially save yourself some trouble by baking in additional time when asked to provide an estimate.

6. Stay up to date

You probably remember how endearingly ugly early websites looked. The “under construction” gifs, visitor counters and funky left-hand menu navigation bars all look wildly out of date today—and time isn’t stopping its march any time soon. What might look amazing today can age very poorly, so take the time to keep up on trends and changes in the field.

“Read a lot. Read articles, especially from authorities in their respective domains,” recommends Neaga. “Read code from more experienced developers. Check out the source code to frameworks you use and look at the solutions other developers used to tackle the same problem. Learn from others and try to reproduce their solutions.”

Keeping an eye out for new and interesting design changes and taking the time to dig into how they work is hugely beneficial. It helps keep your work fresh and can present new challenges that may expand your skill set.

7. Ask for help

For a new web developer, you may be tempted to pretend that you know exactly what you are doing 100 percent of the time—particularly if you’re feeling a little behind your peers. While putting on a front and trying to look good are nothing new in human nature, don’t stunt your professional growth by refusing to seek out help or advice.

“Spending too much time trying to find a solution to an issue that another more senior person on the team may have encountered many times is a common mistake,” says Andrew Olesko, vice president and director of web development for PaperStreet. “Asking for help can save the team time and resources. Don’t be afraid to ask for help!”

Asking for help can sometimes be the best thing you can do—smart work is just as valued as hard work, so don’t let pride get in the way of asking for help.

8. Seek out a mentor

When you start out at any career, there is a lot of information you do not have. Struggling through the beginning of your professional life alone is not always the wisest option. Working closely with a mentor can make a huge impact on the career of a novice web developer.

“If an experienced colleague can mentor you, you’ll learn tons,” says Mourer. “If you can, do an internship. You can also learn a lot from interesting blogs or medium accounts from savvy developers.”

Interesting in learning more about web development?

There’s a lot to learn about a career in web development. If you’ve been casually learning the ropes up to this point, you may have additional questions about this career field. Learn more about the details in our article, “How Much Do Web Developers Make? And 5 Other Questions About This Coding Career.”

Anjali Stenquist

Anjali Stenquist is a content writer for Collegis Education who writes student focused articles on behalf of Rasmussen University. She is passionate about helping students of all backgrounds navigate higher education.

anjali stenquist headshot

Related Content

This piece of ad content was created by Rasmussen University to support its educational programs. Rasmussen University may not prepare students for all positions featured within this content. Please visit www.rasmussen.edu/degrees for a list of programs offered. External links provided on rasmussen.edu are for reference only. Rasmussen University does not guarantee, approve, control, or specifically endorse the information or products available on websites linked to, and is not endorsed by website owners, authors and/or organizations referenced. Rasmussen University is accredited by the Higher Learning Commission, an institutional accreditation agency recognized by the U.S. Department of Education.

logo-accreditation-acen logo-accreditation-ccne chart-credential-laddering-associates-bachelors-masters 0 Credits 90 Credits 180 Credits 48 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE’S DEGREE Start Here MASTER’S DEGREE PURSUERS End Here BACHELOR’S DEGREE End Here MASTER’S DEGREE chart-credential-laddering-associates-bachelors 0 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS 90 Credits Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE 180 Credits End Here BACHELOR'S DEGREE chart-credential-laddering-healthcare-management 0 Credits 90 Credits 180 Credits 48 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE’S DEGREE Start Here MASTER’S DEGREE PURSUERS End Here BACHELOR’S DEGREE End Here MASTER’S DEGREE chart-credential-laddering-rsb 0 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS 90 Credits Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE 180 Credits End Here BACHELOR'S DEGREE chart-credential-laddering-rsd 0 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS 91 Credits Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE 181 Credits End Here BACHELOR'S DEGREE chart-credential-laddering-rsjs 0 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS 91 Credits Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE 180 Credits End Here BACHELOR'S DEGREE chart-credential-laddering-rsn 0 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS 91 Credits Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE 181 Credits End Here BACHELOR'S DEGREE icon-colored-outline-bank icon-colored-outline-certificate icon-colored-outline-circle-dollar-sign icon-colored-outline-folder-search icon-colored-outline-hand-heart icon-colored-outline-head-blocks icon-colored-outline-head-cog icon-colored-outline-head-heart icon-colored-outline-health-plus-leaves icon-colored-outline-hospital icon-colored-outline-lifelong-learning icon-colored-outline-light-bulb-analytics icon-colored-outline-maginify-glass icon-colored-outline-magnifying-glass icon-colored-outline-monitor-healthcare icon-colored-outline-monitor-paper-search icon-colored-outline-nurse-rays icon-colored-outline-padlock-shield icon-colored-outline-scales icon-bank icon-general-charticon-general-connect icon-general-degree icon-general-discuss icon-general-emailicon-general-find icon-general-haticon-general-heart icon-general-laptop-building icon-general-laptop icon-general-leader icon-general-map icon-general-money icon-general-paperwork icon-general-peopleicon-general-phone icon-general-speak-out icon-head-heart icon-mglass icon-scales rebrand-arrows icon-colored-advance icon-colored-arrows-cross-curve icon-colored-briefcase-star icon-colored-build icon-colored-bulb-analytics icon-colored-certificate icon-colored-continual-development icon-colored-duo-chatbox icon-colored-folder-mortarboard icon-colored-forward-ribbon icon-colored-gears-clock icon-colored-globe-pen icon-colored-growth icon-colored-hand-bubble icon-colored-hand-stars icon-colored-hands-gear icon-colored-head-blocks icon-colored-head-cog icon-colored-laptop-cbe-skyscraper icon-colored-laptop-checkmark icon-colored-laptop-webpage icon-colored-location-map icon-colored-location-pin icon-colored-monitor-paper-scan icon-colored-mortarboard-dollar icon-colored-national icon-colored-people-chat-bubbles icon-colored-person-laptop-checkboxes icon-colored-person-screen-instructor icon-colored-person-whiteboard icon-colored-phone-chatbox icon-colored-police-light icon-colored-prep icon-colored-presenter icon-colored-regional icon-colored-save-time icon-colored-shirt-hat icon-colored-skyscraper icon-colored-state icon-colored-student-centered icon-colored-support icon-colored-world-experience icon-arrow icon-camera icon-filtericon-info-circleicon-mail-forwardicon-play-solidicon-quote-mark-lefticon-quote-mark-righticon-share-square-oicon-spinnericon-tagicon-simple-chaticon-simple-desktop icon-simple-find icon-simple-hamburger icon-simple-phone icon-testimonial-quotes icon-social-facebook-square-coloredicon-social-facebook-squareicon-social-facebookicon-social-google-plus-squareicon-social-google-plusicon-social-instagramicon-social-linkedin-square-coloredicon-social-linkedin-squareicon-social-linkedinicon-social-pinterest-picon-social-twitter-squareicon-social-twittericon-social-youtube-play-coloredicon-social-youtube-playlogo-rasu-horizontal ras-logo-flame ras-logo-horizontal ras-logo-stacked icon-util-checkbox-white icon-util-checkbox icon-util-checked-white icon-util-checked icon-util-chevron-downicon-util-chevron-lefticon-util-chevron-righticon-util-chevron-upicon-util-language-switch icon-util-loading icon-util-open-window-button icon-util-open-window-link icon-util-pdf-buttonicon-util-pdf-linkicon-util-refresh icon-util-x