Automatic page reloads

Two arrows pointing to each other in a cycle

Testing websites in different browsers is part of the design process. This process is defined by a number of steps like typing in an editor, saving, switching to the browser, hitting F5 to refresh the page, manipulating styles with developer tools, remembering changes, returning back to the editor, applying the changes. As other people have already mentioned in different blog posts, all these steps add up and slow down our work considerably. Instead of finding ways to think bigger and generate new things, we lose our energy and creativity in applying quick, small fixes. There are a lot of web development tools that promise to make our life easier, but using them can introduce even more steps in our process. If we want to make sure that we work more efficiently, we need to reduce the steps that lead to a high-quality end result, measured by predefined metrics. Different people have varying degrees of experience, which is why they'll find different tools to be useful for them. But far too often we see individuals choose the tools that should be used by everyone in a company. With such limitations people aren't really motivated to pay attention to new technology and trends as they happen, because what is expected of them is to be good with the tools they currently use. In a sense, they get paid to follow the established process and strengthen it. The bigger the company, the more processes it usually has and the easier it becomes for them to override the web design process or deprecate it. We can't separate design and business processes easily and if we choose to optimize one, this must go hand in hand with the other. If web designers have to spend their time being part of any seemingly (!)important process within the company, then it wouldn't matter much that their own process is highly optimized. The tension between these two and the power distribution at any given moment can in itself be a political process.

When considering the web design process (bound with execution at the bottom of the aforementioned process hierarchy), we could examine it for repetitive actions, especially ones that will be multiplied by a factor. (In algorithm analysis we are also concerned with the number of distinct steps and their complexity, and its through the elimination of the unneeded ones that an algorithm improves. This shows that process analysis and algorithm analysis have at least one thing in common.) In web design that factor could be the number of browsers and devices we decided to test against or something else. For example, we have to refresh a page once for every browser—IE, Firefox, Chrome, Opera, Safari,—to see if it renders correctly. This means that for every small change in code, we have to switch to every single browser and press the F5 button, if we haven't established an automatic suite of (repetitive) tests to show a centralized dashboard with test results. Although tests are often recommended, their use isn't always justified. With the release of Tincr—a plug-in for Chrome that allows in-browser code editing and immediate rendering of the changes on screen—the constant refreshes could have been removed from our design process. Unfortunately, the browser isn't the best development environment—it can be unstable and distracting. Everyone has their own favorite editor and uses different tricks and plug-ins to do the task faster, but this doesn't encourage free migration among editors, when their functionality isn't normalized similarly to browser functionality. If we wanted to remove the F5 step from our process, it would make sense to seek an editor-independent solution. LiveReload is another browser extension that works slightly differently. We install a server that monitors a chosen directory for changes. Once we go in the browser, we register a certain tab to be automatically monitored for changes in our code by clicking on an icon that injects a script on our page. Once we save a file and go to a browser, we see that our page is automatically reloaded. Thus, we have one step less to worry about without the need to switch editors or do complex configuration. At this point, it is available only for Chrome, Firefox and Safari.

If web design is hard in the sense of studying and applying new technologies and insights, following a predefined set of tiring practices can be even harder. Automatic page reloads are great, but only one way to reduce effort. Now we need to apply similar measures to the entire chain of process events in our specific surroundings.

bit.ly/11Skyga