Web Browsers for Responsive Front-End Development & Testing

Web Browsers for Responsive Front-End Development & Testing

by | Sep 1, 2020 | Blog, Roundup

Updated January 14, 2021. See this twitter thread for details.

Several Web Browser apps want to make it easier for people & teams to test and develop Responsive Websites and Web applications iteratively.

These apps are different from services that offer static screen captures of web pages across various popular browser versions and operating systems. Such browser snapshot services have been around for a while and are certainly a helpful tool – especially when trying to do QA for legacy browsers that you plan to support.

In contrast, these specialized Web Browser DevTools focus on allowing Front-end devs to see a realtime synchronized view of responsive web content scrolling within multiple viewport ‘panes’ simultaneously.

This approach enables a website builder to review and compare the same design across various screen dimensions. Scanning multiple renderings all at once can help a developer iteratively fine-tune their layout to perform well on different device sizes.

While this multi-view in a single app approach may never truly replicate testing on the native target devices, such a browser can help you improve your coded results much quicker than a device lab alone.

Here’s a roundup of these unique web content viewing solutions.

Blisk

“Blisk is the first developer-oriented browser. It provides businesses with a development workspace for the teams and freelancers to develop and test modern web applications twice faster.”

Emmet Re:view

Emmet Re:view “A browser extension for displaying responsive web-pages in a side-by-side views to quickly test how it looks at different resolutions and devices.”

LT Browser by LambdaTest

LT Browser “Perform free automated and live interactive cross browser testing on 2000+ real browsers and real devices online.”

Polypane

Polypane “Improve your web dev workflow. All the tools you need to build responsive, accessible and performant sites five times faster.”

Responsively App

Responsively App “A dev-tool that helps with faster responsive web apps development. A must-have tool for all web developers. Free and Open Source!”

Sizzy

Sizzy “The browser for developers. Stop wasting time and speed up your development workflow.”

Here’s a copy of this list in an Airtable database that you can bookmark, follow or copy. If I missed any, please let me know or reply to this Twitter thread.

A Roundup of New Tools That Mingle Visual UI Design & Code

A Roundup of New Tools That Mingle Visual UI Design & Code

by | Nov 3, 2018 | Blog, Roundup

I’ve been intrigued by the potential endgame of a single environment that could satisfy the needs and modes of operation for both visual UI designers and developers. Convergence of tools has been a theme of my “Looking Ahead” new year blog entries for 2017 and 2018.

Typical UI Design tools still offer an excellent working model for quickly manifesting design ideas at any level of fidelity. Many of us know of situations where a well-executed mockup that took 30 minutes to render in a design tool (drawing pictures of screens) might get a dev estimate of many hours or days to execute (QA’d production code).

As long as that dynamic exists, many designers will continue to prefer WYSIWYG drawing tool interfaces over working directly in code – especially when they are early in the ideation process.

Popular tools like Figma, Sketch and AdobeXD continue to make moves toward exporting out to React and potentially other libraries. However, as of now, these are one-way, and the real deal will be bi-directional or zero-conversion options.

Here’s a roundup of new tools looking to shorten or even eliminate the distance between drawings of screens and production-ready code (in alphabetical order).

Alva

Alva – “Alva lets you design interactive products based on components engineered by your developers. And guess what – we are entirely open source.”

Haiku

Haiku – “Design components that snap into any codebase: Unlock your creativity with the world’s most expressive UI builder”

Interplay

Interplay – Fast prototyping that combines the power of design systems, production code components and live collaboration.”

Iterative.ly

Iterative.ly – “Iterate on top of your live app using your design system. Launch an experiment in under 10 minutes. Continuously improve your product.”

Modulz

Modulz – “The visual code editor for designing and building digital products—without writing code.”

Supernova

Supernova – “Design and development tool unlike anything you’ve experienced. #nomoresnippets – always a production-ready code.”

Avoid Huge Pendulum Swings in Design Trends Like the F*(#@+g Plague

by | Nov 27, 2013 | Blog

OK, bear with me for a minute on this one. So, if you’ve ever watched “Project Runway”, you will probably recall Heidi Klum’s matra of “(in Fashion) One Day You’re In & the Next Day You’re Out” – this coming from a woman who’s managed to remain a model for 20+ years on a show that’s in it’s 12th season. Ironies aside, she’s basically right.

In design, especially any kind of digital design, the trend of ‘what’s in’ is churning at an ever-increasing clip. In addition to this, there’s a growing emphasis on trends being driven by what I’m inclined to describe as a ‘swinging the pendulum’ principle. It has become vogue to swing wildly in the exact opposite direction of any trend on ascension, as if this, is in and of itself, is an aesthetic vision worthy of utmost respect. For example ‘design above the fold’ turns into ‘There is no fold.’

Extreme Swings in Website Design Trends

Extreme Swings in Website Design Trends: http://house.pl/kampania/ compared to http://motherfuckingwebsite.com

This article was basically touched off after spotting a new extreme swing, as represented by these two sites: “This is a motherfucking website.” and “Words“. These sites are actually very interesting and useful, because they are stand-outs abuzz on twitter – for the moment. They are created by intelligent folks as sign posts or warnings – don’t blindly worship at the altar of design fad X, and lose sight of principles Y and Z. They are extreme aesthetic reactions to the perceived negative side-effects of well intentioned, but increasingly popular design trends, spawning a wake of crap in their hapless application by folks who may have temporarily lost sight of what’s important. (more…)