Como melhorar a legibilidade de textos na Web
Aprender como apresentar texto longo na Web, como postagens de blog, é uma habilidade de design valiosa para aprender. A boa notícia é que o CSS atual já fornece todas as ferramentas necessárias para melhorar a legibilidade de textos na Web.
Tornar um artigo legível — especialmente um que seja longo, técnico — não é muito fácil. Aprender o básico sobre como melhorar a legibilidade do texto na Web certamente trará um grande impacto positivo na experiência do leitor de seus conteúdos.
Pré-requisitos
Para este tutorial, você precisará de 2 arquivos:
index.htmlglobal.css
Crie-os em uma pasta em sua máquina ou use este modelo de projeto no CodePen.
HTML-base e conteúdo
O HTML para este projeto é bastante autoexplicativo — é um artigo com conteúdo, com vários elementos HTML — então, primeiro, pegue todo o seguinte trecho de HTML e cole em seu arquivo index.html:
<!doctype html><html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <title>Improving readability demo</title> <link rel="canonical" href="https://piccalil.li/blog/tips-and-notes-about-freelancing" /> <link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" /> <link rel="stylesheet" href="global.css" /> </head> <body> <article class="[ post ] [ flow ]"> <h1>Tips and notes about freelancing</h1> <time datetime="2020-07-31" class="text-500 gap-right-300 color-secondary" ><em>31st July, 2020</em></time > <p> It´s rolling onto 2 years since I went back independent and fully freelance, but over the 11+ years I´ve been working in design and the web, I´ve probably done around half of that as a freelancer in some capacity. </p> <p> Lots of people are experiencing either redundancies or work issues at the moment and although, at the time of writing, we are in a global pandemic: now is a great time to go freelance. </p> <p> In this article, I´m going to share with you some tips that have helped me make a success out of this freelancing stuff. I hope by the end that you will feel more confident about going freelance. I must point out that the advice is mainly centered around working with clients, rather than say, doing contract development work, but hopefully you´ll get some benefit if that´s you. Let´s dig in. </p> <h2 id="heading-freedom">Freedom</h2> <p> The "F" in Freelance stands for "Freedom". It doesn´t really, but freedom is exactly what you get when you go freelance. This freedom for me has enabled two key things: ownership of my time and flexibility to diversify what I do. </p> <p> I went back to freelancing in September 2018 after being made redundant from an agency. For at least 12 months after that, I worked in a similar role, as a freelancer: working only with clients and contracting for other agencies, along with a brief stint of guest-lecturing at the local University. Although the work was mostly the same-I even inherited a client from my old job-I worked a lot less per week. This is because I didn´t work a "normal" 9-5, but instead worked 10-4 (roughly). Those hours certainly add up. </p> <p> Because the work was quite steady, I didn´t need to do much admin and business development stuff, either. This is a very valid way of going about freelance and I think it could appeal to someone who is comfortable working almost like they have a day job. The reason you work a lot less time like this as a freelancer is simple: no company bullshit. You are the boss of your own time and I promise you: you will make so much more of the time you do spend working. </p> <p> Back to flexibility again, because being freelance gives you <em>lots</em> of that. Although I started working like the above, I knew I wasn´t going to be happy doing just client work alone. I´ve done agency stuff for so many years now that frankly, even the best client work doesn´t give me much satisfaction. I decided at the end of last year that now was the time to build an education business instead and that´s where <a href="//piccalil.li">Piccalilli</a>, the site you are on was born. </p> <p> The reason I mention this in a section about flexibility is because I´m very much transitioning into this new world. I still work for clients, but a lot less so, so I can build Piccalilli up. Granted, I´ve worked a hell of a lot more this year than last year, but the hope is by next year, I can work <strong>even less</strong> than a typical 10-4 day, thanks to the work I´m doing now. </p> <p> This transition model works well too because client work pays the bills and it takes the pressure off getting lots of revenue from a business. I´m very lucky that Piccalilli is doing much better than anticipated, so I´m speeding up that transition. Because I have the flexibility as a freelancer, that is possible too. The key is that flexibility completely empowers you to work how <strong>you want to work</strong>. </p> <h2 id="heading-get-comfortable-with-money">Get comfortable with money</h2> <p> There´s two parts to focus on here: being comfortable talking about money and being comfortable with your personal finances. </p> <p> I´ll start with talking about money. You <strong>have</strong> to be comfortable talking about money with clients. In fact, when a new enquiry lands in my inbox, <strong>the first thing I do is ask them what their budget is</strong>. </p> <p> So much time is wasted by being coy about money. A client needs to have a budget to hire you and let me tell you, if they refuse to tell you what that budget is, <strong>that´s a massive red flag</strong>. That refusal could be down to mistrust on their end, though-they might think you´ll use that budget to send them an over-inflated quote. I´d tackle that by saying something like this: </p> <blockquote> <p> "In order to work out what we can achieve on this project, we really need an idea of budget. It could just be a ballpark, like £5-10k. Creating an estimate for you without this knowledge of our limitations would be a futile exercise because I have no idea what the limits of this engagement are." </p> </blockquote> <p> The second part on this section is your own finances. <strong >You need to know exactly how much money you need to survive every month</strong >. I have a spreadsheet that tells me how much money to take out of my business with a combination of fixed and variable costs. This helps me firstly not get stung by the tax office and secondly, informs me of how much I need to earn to survive each month. </p> <p> An easy strategy to start with is try to earn your <strong>current full-time salary</strong>-especially if you are a sole trader (we´ll get to that). It´s a solid toe-dip approach into freelance. </p> <p> Moving on from that approach: try to <strong>double your salary</strong>. This is because building up a buffer will make life a <em>lot</em> easier on a number of fronts. Firstly, it´s "get fucked" money. What I mean by that is if a client turns out to be a nightmare, you can tell them to get fucked, knowing that you have a buffer to support you. This is useful for if your client turns out to be doing very unethical worth, like <a href="https://www.vox.com/recode/2019/7/30/20728147/tech-company-ice-contracts-foia-microsoft-palantir-concur-dell" >working with ICE</a >, for example. That empowerment is everything. </p> <p> This leads nicely in to calculating how much you charge for your work. The first point on this is <strong>never work for free</strong>. If a client demands free spec work, bin them off and focus on other new clients instead. </p> <p> I personally charge in 2 week sprints, usually, unless a project is very short, where I will charge a flat rate. For contracting work-say for an agency-only then will I charge a day rate. Sprints and day rate work normally requires a <strong>minimum commitment</strong> from them. Flat rate requires at least 50% up-front, which we´ll get more into later. </p> <p> My day rate is <strong>much higher</strong> than my sprint rate. This is because day rate work tends to come with more risk, so I account for that by charging more money. It also reduces my ability to schedule efficiently, because this sort of work can drag on much longer than anticipated, so again, the client is going to pay for that disruption. </p> <p> In terms of how much to charge: this comes down to knowing how much you need. Get your monthly outgoings spreadsheet, take the total and <strong>triple it</strong>. "Why the hell?!?", they scream. We triple it because there´s a darn good chance you will experience <strong>very quiet spells</strong>, so charging a lot more for your work when you have it builds up your buffer to get you through these times. You get more ammo to tell awful clients to fuck off, and getting to that goal of doubling your full-time salary gets easier. </p> <h2 id="heading-get-good-at-organising-your-time"> Get good at organising your time </h2> <p> Those who know me well, know that I organise everything to within an inch of its life. I do all of this organising in <a href="https://www.notion.so">Notion</a> and <a href="https://apps.apple.com/gb/app/things-3/id904237743">Things</a>. Notion is the main hub of planning, scheduling and client communications (yep, you read that right). Things is what I use to manage my tasks. I did previously do this in Notion and before that, in a bullet journal, but now, Notion is the main bullet journal and Things does its job well for me. </p> <p></p> <figure> <img src="https://piccalilli.imgix.net/images/blog/freelance/freelance-1.jpg?format=auto&q=60&w=1500" alt="My things app with a list of today´s tasks" loading="lazy" /> <figcaption class="measure-medium text-400"> <p> I prioritise my tasks with