Read on Twitter
This weekend I did a lot of portfolio reviews for people of various different skill levels.
There were a lot of small problems with easy fixes which occurred a lot.
So, in order to solve them for everyone, here are the most common mistakes I saw, and how to fix them.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten">
There were a lot of small problems with easy fixes which occurred a lot.
So, in order to solve them for everyone, here are the most common mistakes I saw, and how to fix them.
Accessibility:
<buttons> and <a> tags are not interchangable.
<a> tags are links to pages, documents, or positions within a page
<buttons> are interactive elements within the page
Rule of thumb - if the url changes, use <a>, otherwise use <button>
Never nest them.
<buttons> and <a> tags are not interchangable.
<a> tags are links to pages, documents, or positions within a page
<buttons> are interactive elements within the page
Rule of thumb - if the url changes, use <a>, otherwise use <button>
Never nest them.
Accessibility:
Stop turning off the CSS outline on elements.
It& #39;s there to indicate to keyboard-only users which element is in focus.
Turn it off and keyboard-only users are now blind.
Imagine navigating a page with an invisible mouse. That& #39;s what you& #39;re making them do.
Stop turning off the CSS outline on elements.
It& #39;s there to indicate to keyboard-only users which element is in focus.
Turn it off and keyboard-only users are now blind.
Imagine navigating a page with an invisible mouse. That& #39;s what you& #39;re making them do.
Design:
Lots of the designs were great but it was clear which users weren& #39;t confident creating designs.
Many designs resolved uncertainty by adding.
More borders. More colours. More styling.
More !== better
Simple is often far more effective
Lots of the designs were great but it was clear which users weren& #39;t confident creating designs.
Many designs resolved uncertainty by adding.
More borders. More colours. More styling.
More !== better
Simple is often far more effective
UX:
Always write with purpose.
Your site is there for a purpose. You use it to get hired, find freelance work, make sales, or something else.
You have one goal.
Drive your users to it.
If your messaging is confused, your users will be too.
Always write with purpose.
Your site is there for a purpose. You use it to get hired, find freelance work, make sales, or something else.
You have one goal.
Drive your users to it.
If your messaging is confused, your users will be too.
UX:
Always drive users with purpose.
If you want people to hire you, make it as easy as possible.
Portfolio and contact on the homepage.
If they want more info, let them see it.
And when they get there, continue to make it easy to achieve their goal.
Always drive users with purpose.
If you want people to hire you, make it as easy as possible.
Portfolio and contact on the homepage.
If they want more info, let them see it.
And when they get there, continue to make it easy to achieve their goal.
UX:
Social media is not a form of contact.
Social media should never be the end goal of your website.
Users come from social media to your site. Not the other way around.
Send them there, and they& #39;ll never come back.
Social media is not a form of contact.
Social media should never be the end goal of your website.
Users come from social media to your site. Not the other way around.
Send them there, and they& #39;ll never come back.
Accessibility:
Make your content suitable for colourblind users.
Dark backgrounds with light text. Light backgrounds with dark text.
Unreadable content is frustrating.
Inspector now provides a contrast ratio tool. Use it.
Make your content suitable for colourblind users.
Dark backgrounds with light text. Light backgrounds with dark text.
Unreadable content is frustrating.
Inspector now provides a contrast ratio tool. Use it.
Design:
When making content layouts, don& #39;t forget to utilize whitespace.
Empty space isn& #39;t bad. It increases your user& #39;s ability to process things.
The focus should be on one thing at once.
Squishing too much together leaves users feeling confused and/or overwhelmed.
When making content layouts, don& #39;t forget to utilize whitespace.
Empty space isn& #39;t bad. It increases your user& #39;s ability to process things.
The focus should be on one thing at once.
Squishing too much together leaves users feeling confused and/or overwhelmed.
Design:
Fixing small alignment issues makes a big difference.
Your site should have one or two content lines which flow all the way through the site.
Not following these leaves the site feeling far less professional.
Fixing small alignment issues makes a big difference.
Your site should have one or two content lines which flow all the way through the site.
Not following these leaves the site feeling far less professional.
Design:
Consistency is important.
If you create a rule for headings or layouts, stick to it.
Users have to think less because it becomes part of their mental model of your site.
You have to think less because you have a single design for the element.
Win-win.
Consistency is important.
If you create a rule for headings or layouts, stick to it.
Users have to think less because it becomes part of their mental model of your site.
You have to think less because you have a single design for the element.
Win-win.
Content:
Do not underestimate the power of a contact form.
It& #39;s quick. It& #39;s easy. Users don& #39;t have to leave your site, and they can& #39;t mess it up.
It always beats all other forms of contact
Always.
Do not underestimate the power of a contact form.
It& #39;s quick. It& #39;s easy. Users don& #39;t have to leave your site, and they can& #39;t mess it up.
It always beats all other forms of contact
Always.
Content:
Beware of sharing other means of contact.
Do you really want or need the whole internet to be able to see your email address?
Maybe.
What about your mobile number? Or your home address?
Definitely not.
Don& #39;t make it so easy for anyone who& #39;s malicious.
Beware of sharing other means of contact.
Do you really want or need the whole internet to be able to see your email address?
Maybe.
What about your mobile number? Or your home address?
Definitely not.
Don& #39;t make it so easy for anyone who& #39;s malicious.
Accessibility:
Use semantic HTML.
Don& #39;t use <div> for everything.
Use elements which clearly indicate what your intentions are.
<nav><aside><article>
It helps you navigate your code.
It helps others navigate your site. https://www.freecodecamp.org/news/semantic-html5-elements/">https://www.freecodecamp.org/news/sema...
Use semantic HTML.
Don& #39;t use <div> for everything.
Use elements which clearly indicate what your intentions are.
<nav><aside><article>
It helps you navigate your code.
It helps others navigate your site. https://www.freecodecamp.org/news/semantic-html5-elements/">https://www.freecodecamp.org/news/sema...
Content:
Display your portfolios loud and proud.
Stop hiding them behind coloured overlays.
This takes the small image which would make me want to see more, and hides it almost entirely.
Let me see them. Let me get to them (make them linked). Let me see the code too.
Display your portfolios loud and proud.
Stop hiding them behind coloured overlays.
This takes the small image which would make me want to see more, and hides it almost entirely.
Let me see them. Let me get to them (make them linked). Let me see the code too.
Content:
If you know a lot things - technologies, tools, skills, etc - that& #39;s great.
But I don& #39;t need to see everything you know.
What do you care about right now?
What are you best at?
What do you want to be working with?
Focus on those. Let the rest shrink (or disappear)
If you know a lot things - technologies, tools, skills, etc - that& #39;s great.
But I don& #39;t need to see everything you know.
What do you care about right now?
What are you best at?
What do you want to be working with?
Focus on those. Let the rest shrink (or disappear)
Content:
Write your copy from one point of view.
Don& #39;t change partway through. That feels really weird to a reader.
First-person is often best. Even in blogs, it& #39;s best to share your experience with the reader.
I and we, not you and they.
Pick one. Stick to it.
Write your copy from one point of view.
Don& #39;t change partway through. That feels really weird to a reader.
First-person is often best. Even in blogs, it& #39;s best to share your experience with the reader.
I and we, not you and they.
Pick one. Stick to it.
Content:
Be authoritative.
We& #39;re in the knowledge industry.
If you act like you don& #39;t know what you& #39;re talking about, people won& #39;t care.
Whatever you have to say, say it with confidence.
Be authoritative.
We& #39;re in the knowledge industry.
If you act like you don& #39;t know what you& #39;re talking about, people won& #39;t care.
Whatever you have to say, say it with confidence.
Design:
We& #39;re in 2020.
Mobile accounts for more than 50% of website visitors.
You can& #39;t afford to have a website that doesn& #39;t work responsively.
We& #39;re in 2020.
Mobile accounts for more than 50% of website visitors.
You can& #39;t afford to have a website that doesn& #39;t work responsively.
Performance:
Don& #39;t forget to optimise your images (and generally check site performance).
Not everyone has superfast internet like you.
Allow others to see your site in the same way you do.
Don& #39;t forget to optimise your images (and generally check site performance).
Not everyone has superfast internet like you.
Allow others to see your site in the same way you do.
Content:
Wide paragraphs are hard to read.
If your paragraph is more than 900px wide, consider forcing it to wrap.
The more a user has to move their eyes, the less likely they are to retain focus.
Make reading as easy as possible.
Wide paragraphs are hard to read.
If your paragraph is more than 900px wide, consider forcing it to wrap.
The more a user has to move their eyes, the less likely they are to retain focus.
Make reading as easy as possible.
