Don’t judge a website by its design
Have you ever seen a situation when someone releases a new website, and people start talking: the color scheme is wrong, it is too 2002, images are too big, its ugly, animations are slow and this kind of bull shits. I have seen that many times, a lot of noise about nothing, I don’t think anyone why talks put himself in creator’s shoes. It is better if we just try to understand why is like that? I would say: don’t judge a website by its design, because it is not everything, there are so many other aspects of a web development.
As a web developer, the first thing that I want to do is to examine how that website is created and what kind of technologies are used. Of course, very often is not possible to find answers for those questions if you don’t know the developer.
What I choose to do is start looking into the page and test things like performance and accessibility ( because I really care about those ) so I could have a better idea how the website is working. For that I use few tools and methods:
Network resources
Usually, that is the very first thing I do, I open the network tab in chrome dev tools and check loading time, the number of network request and size of the page, after that I repeat using network throttling on 3g and mobile screen size. Just trying to understand how much resources that page takes to load in different devices and conditions.
Page Speed Insight
Another easy performance test is to run Google PageSpeed Insight, it measures your site speed and gives a score up 100 points, good performance should have at least 80p on mobile and desktop. The tool also shows errors and recommends you how to optimize and fix your site. In that way, I can see what kind of weaknesses a certain page has.
Animations and transitions
Another step is to check how animations and transitions are made, for good performance those animations needs use only CSS transform property but I see many developers are trying to animate props like height or width ( because that is easy ).
Responsiveness on different devices
Checking if the page uses responsive images, very often you could find that page servers large images for mobile screens. In 2017 we must use srcset, every modern browser supports that.
Lighthouse
it’s another great tool created by Chrome team which gives you a lot of performance insides.
Accessibility
A different from performance but also super crucial aspect of any website is accessibility, I use few tools for that:
- Starting with Audit tab in DevTools
- Going through aXe chrome plugin
- Lighthouse provides some data as well.
- and if I want to go deeply with that I open Safari VoiceOver
Those are basic methods and tools I apply, there are more* but I don’t want to spend too much time on other people’s sites, ~10 min should be enough to learn more about a specific project. Also, don’t want to say that a proper design and UI is not important but you know, not everything is a just beautiful picture. When your site is slow, potential users presumably will never manage to visit your creature. We need to think about performance as part of user experience, and faster internet will not solve that problem, at least not next 10 years.
*Other tools I like to use as well:
- PWA Metrics: https://github.com/paulirish/pwmetrics
- SpeedRacer: https://github.com/ngryman/speedracer
- WebPageTest: https://www.webpagetest.org/
- perf-tool: https://github.com/devbridge/Performance
- WhatDoesMySiteCost: https://whatdoesmysitecost.com
