Let's get started! π
Dropping a website out into the wild web is a big deal, so making sure every last detail is tightened up first is key.
I mean, you wanna make sure your site looks slick on phones and tablets, not just desktops(Responsiveness). And you want real people to be able to find and use your site too(SEO).
This list I put together runs down 14 must-do things - covering stuff like usability, accessibility, SEO optimizations, backup plans if things go sideways, SSL to keep things secure and using CDNs to speed up load times.
All the crucial boxes to check so your site is locked and loaded before releasing it on the world. π
TL;DR β±οΈ
- Responsiveness π±
- Accessibility βΏ
- Usability π
- Short Loading Time β±οΈ
- SSL Certificate π
- Optimize Images π
- Use Fallbacks π
- Double-Check Links and Forms βοΈ
- 404 Page and Favicon π«π€
- Minify Files π¦
- Professional Domain π
- SEO π
- Use a CMS π₯οΈ
- Bonus Tips π
1. Responsiveness π±π»
Nowadays, making your website responsive is an essential part of web development. Make sure your website looks good on laptops, desktops, phones, and tablets.
Test your website with every popular browser. It needs to be compatible with most newer versions of all browsers.
You can never know what device and browser some of your users will use to access your website.
There'll be at least one trying to run it on an old Galaxy S3 with an outdated version of Samsung Browser. π²
2. Accessibility βΏ
Web accessibility is about designing and developing websites and technologies that people with disabilities can use.
In simple words, a website should be accessible to everyone, which means even a person with disabilities should understand, navigate, and interact with it.
There are many factors you should implement when developing a site.
Some of them are: adding keyboard navigation, Using ARIA roles, using enough colour contrast between the text and background, adding alt text to all images, and using descriptive names for links. π
3. Usability π
Usability measures how well a specific user can use a site to achieve a defined goal effectively and efficiently.
Make sure your website is easy to use. A user should be able to find what he needs quickly and easily.
You need to look at each element on your website just as a visitor would. The text should be easy to read on mobile devices and other standard devices, and you should make your navigation clear and easy to understand.
Content should be the same on both versions of your website. π΅οΈββοΈ
4. Short loading time β±οΈ
Website page load speed is one of the most important things you should consider.
You should not make your users wait for a long time; the user experience of your website becomes terrible.
Your website should load as quickly as possible, and also site speed has become one of SEO's top priorities nowadays. π
5. SSL certificate π
SSL stands for Secure Sockets Layer.
An SSL certificate enables you to use HTTPS for secure data transfer, and it will ensure your website is encrypted so hackers can't intercept any of your data.
Not only will this put your visitors at ease, but it'll also boost your website's SEO since SSL is now part of Google's search algorithm. π
6. Optimize Images π
No matter how optimized your website is, images will always be one of the slowest-loading elements on the page.
So optimizing images on your website is essential.
It's always better to avoid TIFF or BMP images and stick to JPEGs and PNGs.
Also, you should avoid empty image src code lines. Before deploying your site, optimize your pictures across web pages; otherwise, it will affect your page loading time. πΈ
7. Use Fallbacks. Make sure to use fallbacks π
A "fallback" is nothing more than additional options to deliver to a browser if the browser cannot render a specific HTML tag, CSS property, or script.
Fallbacks are most commonly utilized with HTML5 tags and CSS3 properties, both new and may not be fully supported in some browsers. π‘οΈ
8. Double-check all links and forms βοΈ
Before deploying the website, always check all your links, buttons, forms, etc. Are they working correctly or not?
It happens pretty often that the links that work when developing may not after deploying in production.
And same goes for buttons and forms. Always check for broken links and documents. π«π
9. 404, Favicon. π«π€
404 page is significant because a visitor may mistype or click on a bad link, so you don't want the visitor to see an ugly error warning.
Ensure you've set up a custom 404 page on your website to prevent this. π§
10. Minify Files π¦
Minification is the process of minimizing code and markup in your web pages and script files.
It's one of the main methods to reduce load times and bandwidth usage on websites.
The primary goal is to remove redundant or unnecessary data such as spacing and comments. π§Ή
11. Professional Domain π
If you want your website to look professional, buy a professional domain.
Don't use domains like '.netlify.app', '.vercel.app', etc.
Many beginners can't afford a professional domain, but a professional domain always looks better than a subdomain. πΌ
12. SEO π
SEO is one of the most important topics you should care about.
SEO improves your site's rankings in search results.
But also, the primary purpose of achieving high rankings is to attract more traffic & convert that traffic into customers. π
13. Use a CMS π₯οΈ
CMS stands for Content Management System.
If you use a CMS, it will be easy for you to change any content in a CMS rather than editing the code repeatedly.
Another benefit of using a CMS is that if your website's content is created and edited by non-technical people, they need to have a good GUI interface. π€
14. Bonus tips π
- Make sure your websites donβt have any significant vulnerabilities. π‘οΈ
- Put scripts at the bottom. Put stylesheets at the top. π
- Use a CDN (Content Delivery Network). π
- Avoid redirects. π
- Use caching. π
Wrapping Up π
Getting ready to put your website out into the world? I feel you. It's scary but thrilling! As you prep for launch day, keep these 14 things in mind and they'll help you build a site that wows from the inside out.
It's a lot to consider but worth it to create something you're proud of. Just keep making improvements.
Your website is never really done,
View it as a living evolving thing! π±
Connect With Me: Linktree
I hope you found this article helpful β€οΈ
Happy Coding! π
Thanks for 11671! π€
Top comments (30)
The MOST important Point is missing: GOOD CONTENT
Nothing is as important as good content.
There is so much useless content no the internet:
SEO Text (endless paragraphs of meaningless text in the hopes to please the gods of the search engines). AI generated text which adds no value to the knowledge we have. Outdated or misleading information. Useless or hard-to-find information.
Please, please make content the top priority.
If there is good content, users are willing to accept the most bloated and hard to use website.
If there is no good content, users will not care about the good craftsmanship you showed off on this website.
In our shop, we donβt even spin up a dev instance until we have 100% of the content for the site, and itβs gone through our in-house content manager.
sure, content is the most important thing
A lot of issues, altough it is not allmighty, can be spotted simply by using Lighthouse built-in Chrome devtools (F12). It will auto-check your page load and warn you about common flaws and problems. Just note, that running it towards your local dev server will give you much more optimistic results than the live site will (in terms of page loading speed). There are also services to mimic slow and unreliable networks even during development.
Also, it is always worth to check your HTML syntax towards the official validator, although with frameworks it is now less common to make mistakes.
I just wanted to say that this is a really great list.
For images, one can use elements as well as SVG files for performance/optimization boosts.
You can use defer to make it feel like the site is faster for JS and images.
Critical CSS is another idea but is kind of hard to figure out.
Another speed warning is about font-loading issues, or @import statements in CsS that can block the page.
Yes, optimizing images is important for improving website loading speed. While JPEGs and PNGs are popular formats, using an image format like WebP can offer significant benefits in terms of file size and quality with modern browsers today.
WebP is designed to provide good image quality but with smaller file sizes than other formats. This helps to reduce the amount of data that needs to be loaded, reducing page load time and improving the user experience.
To use WebP, you must create copies of your images in this format and then integrate them into your website. If the browser supports WebP, it will load this image, while browsers that do not support it will load the image in a different format if available.
In addition, consider using online or desktop image optimization tools to reduce file size without affecting quality too much. This will help to reduce page load time and optimize the user experience.
Here are some additional tips for optimizing images for your website:
By following these tips, you can help improve your website's performance and provide a better experience for your users.
From my experience for smaller images like thubmnails or logos .webp is not such a bit deal. Sometimes it is even bigger than original .jpg.
Or is it because of some compression settings? I am using GIMP.
yeah, for small images it's not that a big deal. BTW you can adjust the size of the image in gimp by adjusting the quality and alpha quantity that ask just before exporting the webp image
Optimizing your images can be achieved by using this online tool
shrinkme.app/
Don't forget about SVG!
Also, elements instead of![]()
gives you the flexibility on file sizes.
Great tips! Iβm just starting. Any CMS recommendations to use?
Strapi is great tool , used it before
Django CMS or Wordpress
Pretty big deal to miss a CMS when deploying. There's something horribly wrong if you miss that.
Amazing brother keep it up
Thank you for the tip, will follow ππΌ
Cool! Nice post.
I would add testing and improve performance and rendering cycles and finally automate checks for vulnerabilities.
Thanks for providing tips for websites... I will surely focus on these factors before deploying the site π
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more