Don’t be so slapdash.
For those who are just getting started with web development and want to do it properly.
My name is Laurence. My passion for the web started in 1995 when I discovered a WYSIWYG editor hiding alongside an installation of Internet Explorer; it was called FrontPage Express.
Finding that bit of software whilst browsing the files on the family computer was a dawning moment in my life. I realised I didn’t need hundreds of pounds, to be Bill Gates or to have a degree in computer science to make a website; anybody could.
I was 12 years old and I could make a website. I could upload something from the family computer and someone on the opposite side of the world could access that something immediately. That fact is amazing. It blew my mind. It still blows my mind.
After a little tinkering with FrontPage Express, I discovered a hidden layer of markup and inline styles underneath the visual WYSIWYG output. I tinkered some more.
I soon realised that what works for me doesn’t work for everybody. Whilst doing some field testing (aka. asking a cousin if they like my site) it was apparent what I was seeing wasn’t what they were. It was a mess on their screen but pixel perfect on mine. Why? A different monitor with a higher resolution was the reason.
I now had to consider so much more than fixed pixels and aligning to the left/right of the viewport if I wanted my website to display as intended for everybody.
Continually trying new methods and techniques I became rather good in comparison to what was being output by professional studios. Pre-2000’s I hadn’t considered progressive enhancement but I did always ensure my work would render correctly on any browser that was available.
I also hated the thought of a user requiring an additional browser plugin to view content; that’s as wrong (and annoying) now, as it was back then.
Over the years I’ve continued to hone my skill set and refine the quality of my work. I’ve always had the thought that I want to write my code as coherently as possible so interested developers could pick it apart and learn how I made something.
23 years later, I’m still truly in love with the web and what it has become. Although I’m now writing code as coherently as possible so a colleague doesn’t murder me out of confusion.
You’ll be pleased to know I’m not using FrontPage Express anymore, it sparked my fire but it was replaced relatively quickly.
If you’re interested I’ve been through a few development tools but in recent years; Atom with various extensions is my weapon of choice for development and Figma is my not so secret weapon for design.
Try them, embrace them; they are your friend.
What is Progressive Enhancement?
Put simply, progressive enhancement is about getting the core basics of a site working first, something that will just work no matter what browser or screen size the website it is being viewed on. Then you enhance it as and when necessary for newer and newer browser technologies until you reach today’s browser releases. Only enhance what you need to. Keep it simple.
Start by getting your HTML correct, then enhance it visually for the most basic of browsers.
Personally, I’m not targeting a specific browser – I’m simply using basic HTML and CSS that I know will work on any device.
If targeting a specific browser helps you understand this concept then go for Internet Explorer 8. Remember, it doesn’t need to be the most attractive but always, ALWAYS ensure the content is coherent on the old git. It could literally look like a word document. That would be perfect as long as it’s not broken and the user can get the data they came for.
Why bother writing correct markup? Because that’s what the web understands, it’s beneficial to both humans (including those with disabilities) as well as other computer systems – especially those that power the search engines.
My point being; if you ensure your markup is accessible and correctly formatted (so everybody can get the information within your site coherently); you automatically give yourself a head start with any search engine optimisation too.
It’s not difficult to get your markup correct. Just think of it as a formal document that should read and make sense without any custom styling; just the basic styling built into the browser is enough to make correct markup legible.
There are multiple elements you can use to correctly markup your website; HTML5 especially brought with it a lot of elements to make your markup even more accessible. I’m not here to teach you how to write proper markup but you should definitely visit Mozilla for a fantastic and easy to understand reference of what elements are available and how to use them.
Once you have your markup written correctly, the next step is to make it beautiful.
We use Cascading Style Sheets to enhance the default browser styling. Yes, that’s right; styles are an enhancement of your HTML. They are not the same thing. They are not one. They are separate. Treat them that way.
These days we can do some crazy things with CSS, including animation but fundamentally; styles are used to enhance your website’s presentation. That’s all styles aim to do and they do it well.
Styles are where you really need to think about browser support. Start with the most basic, standard CSS properties for the core experience you want to deliver. Start with the small screen and work your way up to large displays using @media queries. Then enhance the layout with even more modern properties and queries.
To ensure simplicity don’t try to make a single HTML element do too much work.
Sure it’s nice to challenge yourself to see what you can do with a single element but for clarity and maintainability feel free to add a new HTML element to your markup if the job of one element is getting cluttered.
Keep it refined. Keep it simple.
As always – the best results are when you keep it simple.
As with all things in life; practice will make perfect. You will progress and make better websites the more you create, play and develop them. Just don’t think you can take shortcuts with progressive enhancement, as you can’t. It may visually work but if you want to regard yourself as the best of the best then there’s only one true direction to take.
If you’re building for the web, for users all over the globe to access your work within seconds in the browser – you simply must adhere to the principles of enhancement. The information within your site should not be blocked because of a dependency you believe every user must have to view your amazing work. Nobody else cares that much and they will find an alternative source of the information they require – which will increase traffic to the alternative source and rank them higher in search engines pushing your project to the bottom of the pile.
What I fundamentally don’t believe is that progressive enhancement adds time to a project build… as it doesn’t.
As with most industries – some people are just doing a 9 till 5. Sure, they can make a website, but they don’t love it, it’s not their passion.
I’m passionate about the web development. I hope you are too. I hope to work with you one day.
I’ve worked with a few “Mr. Day Jobs” though. We all have. They’ll happily squirt out a project for the insta-gains and praise from their peers but will inevitably struggle with maintainability.
Their client wonders why their site doesn’t work on their investors old, out of date laptop, so fallbacks are implemented after much arguing about how “the investor needs to update their browser”. The fallbacks increase download time which in turn hits the sites SEO rank even more. Now the site is clunky rather than graceful. Now it’s a chore rather than a joy for Mr. Day Job to work on the project. The project fails. The client is unhappy. Mr. Day Job moves on to his next project.
It’s all a time consuming, bloated way of working that introduces larger issues. If the project was initiated with progressive enhancement the end result would be more polished, more refined, faster, leaner, more accessible and easier to maintain out of the box.
Everybody wins with progressive enhancement.
Keep up the good work.
Laurence Archer; Advantec