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

web designer with headphones working on computer

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.”

About the author

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.

What Is Reactive Attachment Disorder

Related Content

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-msn chart-credential-laddering-nursing-programs chart-credential-laddering-nursing DNP MSN RN to BSN LPN to RN Bridge Accelerated BSN Professional Nursing ADN Practical Nursing Diploma Pre-Licensure Post-Licensure 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-location-pin 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-person-presenter-screen icon-colored-outline-scales ras-logo-flame ras-logo-horizontal ras-logo-stacked 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-health-plus-leaves icon-colored-hospital-building 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-cheer-star 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-triangle-arrow-up-plant icon-triangle-calendar-pencil icon-triangle-clock-rotating-arrows icon-triangle-display-gears icon-triangle-hand-right-speech-bubble icon-triangle-laptop-coding-brackets icon-triangle-mortarboard icon-triangle-paper-ribbon icon-triangle-person-cheer-star icon-triangle-person-juggle icon-triangle-triple-people-chat-bubble icon-modality-campus icon-modality-field icon-modality-online icon-modality-residential icon-arrow icon-bank icon-camera icon-filter icon-general-chart icon-general-connect icon-general-degree icon-general-discuss icon-general-email icon-general-find icon-general-hat icon-general-heart icon-general-laptop-building icon-general-laptop icon-general-leader icon-general-map icon-general-money icon-general-paperwork icon-general-people icon-general-phone icon-general-speak-out icon-head-heart icon-info-circle icon-mail-forward icon-mglass icon-play-solid icon-quote-mark-left icon-quote-mark-right icon-scales icon-share-square-o icon-simple-chat icon-simple-desktop icon-simple-find icon-simple-hamburger icon-simple-phone icon-spinner icon-tag icon-testimonial-quotes icon-util-checkbox-white icon-util-checkbox icon-util-checked-white icon-util-checked icon-util-chevron-down icon-util-chevron-left icon-util-chevron-right icon-util-chevron-up icon-util-circle-arrow-down icon-util-circle-dot icon-util-language-switch icon-util-loading icon-util-open-window-link icon-util-pdf-link icon-util-refresh icon-util-x rebrand-arrows icon-social-facebook-colored icon-social-facebook-square-colored icon-social-facebook-square icon-social-facebook icon-social-google-plus-square icon-social-google-plus icon-social-instagram-colored icon-social-instagram icon-social-linkedin-square-colored icon-social-linkedin-square icon-social-linkedin icon-social-pinterest-p-colored icon-social-pinterest-p icon-social-twitter-colored icon-social-twitter-square icon-social-twitter icon-social-youtube-play-colored icon-social-youtube-play graduate-cap-star-coin hand-coin hand-heart nurse-stethoscope-rays card-send-smile person-yoga-pose suitcase-star