How to Make a Freelance Portfolio Site Work on Phones

Coworkism earns from purchases made through the MaviGadget links in this post.

A mobile-friendly freelance website uses a responsive layout, text you can read without zooming, buttons you can tap, images that load quickly and a way to contact you in one step. Open your site on your own phone first: whatever frustrates you there is frustrating clients too.

Why does a phone-friendly site matter for freelancers?

Many prospective clients first see your work on a phone, for example after tapping a link in a message, a social profile or an email. If the site is awkward to read or the contact form is hard to use, they can leave without saying a word, and you never find out.

Search is part of it too. Google states that it predominantly uses the mobile version of a site's content for indexing and ranking. Anything missing or broken on the mobile version can therefore affect how your site appears in results.

How do I test my site on a phone?

Start with a real test, then use a tool.

1. Open your site on your own phone, on mobile data as well as Wi-Fi if you can.
2. Try to do what a client would: read your services, open a portfolio piece, find your rates or process, and send an enquiry.
3. Ask a friend with a different phone to do the same and tell you where they got stuck.
4. Run your address through PageSpeed Insights, which reports on loading performance and usability for mobile visitors.

Note that Google's older standalone Mobile-Friendly Test has been retired, so use PageSpeed Insights or the reports in Google Search Console instead.

What should I fix first?

Is the layout responsive?

A responsive theme adjusts to the width of the screen. Mainstream builders such as WordPress, Squarespace and Wix offer responsive templates. If your site is old and fixed-width, switching template is often the quickest fix. Check the template's description and preview it on a phone before committing.

Can people read it?

• Use a plain, clear font and a size you can read without pinching to zoom.
• Keep paragraphs short and use real headings.
• Make sure there is strong contrast between text and background.

Can people tap the right thing?

Fingers are less precise than a mouse. Buttons and links need enough size and spacing so a tap does not hit the wrong thing. Google's guidance on tap target size and spacing explains why and how to check it. Pay special attention to your menu, your contact button and any links packed into a footer.

Do the images load quickly?

Large photos and portfolio images are the usual cause of slow pages. Resize them to the size they are actually displayed at, compress them and avoid autoplaying video. Portfolio pages with many large samples are worth special attention.

Is contact easy?

Put your email, a short form or a booking link where it can be reached in one tap. Test the form on a phone, including the keyboard that appears, and check that you actually receive the message.

Which mistakes do freelancers make most?

• Pop-ups that cover the screen. They are hard to close on a small display and annoy visitors.
• Too much on the home page. Lead with who you help, what you do and how to reach you.
• Hidden content on mobile. If something is important enough for desktop, it should be on mobile too.
• Old technology. Flash is no longer supported by modern browsers, so any content built on it will not show.
• PDF-only portfolios. Large PDFs are slow and fiddly on a phone. Offer web pages instead, with the PDF as an extra.

Should I design for mobile first?

For a freelance site, yes, it is a good habit. Designing the phone version first forces you to decide what matters most: your offer, proof of your work and a clear next step. The desktop version can then add space and extras without changing the essentials.

How do I fit this into a busy week?

Do not try to fix everything at once. Make a list from your phone test and tackle one item at a time, starting with whatever stops a client from contacting you. If you work from different spots, your connection matters when you test and update the site, so see our remote worker's guide to reliable internet. If you often work away from your desk, a portable home office kit keeps you ready to make fixes anywhere. And if you use coworking days to meet clients, ask other members to test your site; our post on using coworking spaces to grow your business has more on that.

For work gadgets that help day to day, you can also look at Mavigadget's collection of gadgets for work.

The takeaway

Treat your phone as the first place a client meets you. Test the site there, fix what blocks reading, tapping and contacting you, and keep checking after any redesign. Small repairs add up to more enquiries.