Tags: screens

35

sparkline

Thursday, January 20th, 2022

Screenshots

I wrote about how I created a page on The Session with instructions for installing the site to your home screen. When I said that I included screenshots on that page, I may have underplayed the effort involved. It was real faff.

I’ve got an iPhone so generating screenshots (and video) from that wasn’t too bad. But I don’t have access to an Android phone. I found myself scouring the web for templates that I could use to mockup a screenshot of the address bar.

That got me thinking…

Wouldn’t it be cool if there were a service that generated those screenshots for you? You give it a URL, and it spits out screenshots of the site complete with overlays showing the installation flow on Android and iOS. It could even generate the img markup, complete with differently-scaled images for the srcset attribute.

Download the images. Copy that markup. Paste it into a page on your site. Boom! Now you’ve got somewhere to point your visitors to if you’d like them to install your progressive web app.

There are already some services out there for generating screenshots of mobile phones but they’re missing is the menu overlays for adding to home screen.

The devrels at both Google and Microsoft have been doing a great job of promoting progressive web apps. They’ve built tools to help you with tasks like generating icons or creating your web app manifest. It would be sooooo nifty if those tools also generated instructional screenshots for adding to home screen!

Thursday, December 23rd, 2021

Even more writing on web.dev

The final five are here! The course on responsive design I wrote for web.dev is now complete, just in time for Christmas. The five new modules are:

  1. Accessibility
  2. Interaction
  3. User interface patterns
  4. Media features
  5. Screen configurations

These five felt quite “big picture”, and often quite future-facing. I certainly learned a lot researching proposals for potential media features and foldable screens. That felt like a fitting way to close out the course, bookending it nicely with the history of responsive design in the introduction.

And with that, the full course is now online. Go forth and learn responsive design!

Thursday, February 4th, 2021

Continuous Typography / MK

Sounds like some convergent thinking with the ideas behind Utopia.

I think that the idea that that any typographic attribute (including variable font parameters) can be a function (linear, exponential, stepped, Bezier, random, or otherwise) of any given input variable (user preference, screen dimensions, connection speed, time of day, display language, or whatever else) is an incredibly powerful one, and worth exploring as an aesthetic as well as a technical proposition.

Here’s a demo you can play with.

Thursday, April 2nd, 2020

Visual Design Inspiration from Agency Websites–And Other Tangential Observations | Jim Nielsen’s Weblog

Tyring to do make screenshots of agency websites is tricky if the website is empty HTML with everything injected via JavaScript.

Granted, agencies are usually the ones pushing the boundaries. “Pop” and “pizazz” are what sell for many of them (i.e. “look what we can do!”) Many of these sites pushed the boundaries of what you can do in the browser, and that’s cool. I like seeing that kind of stuff.

But if you asked me what agency websites inspired both parts me, I’d point to something like Clearleft or Paravel. To me, they strike a great balance of visual design with the craft of building for an accessible, universal web.

Friday, January 3rd, 2020

A short history of body copy sizes on the Web

A look at the trend towards larger and larger font sizes for body copy on the web, culminating with Resilient Web Design.

There are some good arguments here for the upper limit on the font size there being too high, so I’ve adjusted it slightly. Now on large screens, the body copy on Resilient Web Design is 32px (2 times 1em), down from 40px (2.5 times 1em).

Thursday, January 2nd, 2020

B612 – The font family

B612 is an highly legible open source font family designed and tested to be used on aircraft cockpit screens.

Available as a web font.

Sunday, January 27th, 2019

10 Year Challenge: How Popular Websites Have Changed

Side by side screenshots of websites, taken ten years apart. The whitespace situation has definitely improved. It would be interesting to compare what the overall page weights were/are though.

Tuesday, June 26th, 2018

Untold AI: The Untold | Sci-fi interfaces

Prompted by his time at Clearleft’s AI gathering in Juvet, Chris has been delving deep into the stories we tell about artificial intelligence …and what stories are missing.

And here we are at the eponymous answer to the question that I first asked at Juvet around 7 months ago: What stories aren’t we telling ourselves about AI?

Monday, May 28th, 2018

TANK (short film by Stu Maschwitz) - YouTube

This fun little film gives me all the feels for Battlezone …but then watching the excellent “making of” video really made me appreciate the love and attention to detail that went into this.

TANK (short film by Stu Maschwitz)

Wednesday, August 23rd, 2017

Interface font family

Interface is a font for highly legible text on computer screens.

And it’s free!

Friday, December 23rd, 2016

BLIND : Rogue One

The on-screen interfaces for Rogue One have just the right retro feel next to those for The Force Awakens.

Sunday, November 27th, 2016

Teasing

Caption Blockquote Chapter 1 Formats Index About the author Table of contents

Wednesday, October 5th, 2016

First Time User Experiences

Krystal’s excellent annotated collection of onboarding examples.

Tuesday, October 4th, 2016

How to prototype in the browser | GDS design notes

This is a clever quick’n’dirty way of prototyping iterations on an existing site using dev tools and screenshots.

Saturday, January 24th, 2015

Flying Toasters | After Dark in CSS

For people of a certain age, this will bring back memories of a classic screensaver.

If you had told me back then that the screensaver could one day be recreated in CSS, I’m not sure I would’ve believed it.

Saturday, September 20th, 2014

The Scourge of Helvetica Neue Light | Clagnut

Richard never rants.

Here’s Richard ranting.

Tuesday, July 29th, 2014

ZX Spectrum Screenshotter Example - an album on Flickr

Over 700 screenshots of ZX Spectrum games, captured by Jason Scott. Some of these bring back memories.

Wednesday, July 16th, 2014

How to build the sensory web by John Allsopp

John peers behind the surface veneer of the web’s current screen-based setting:

The challenge for us as developers and designers for the web becomes less about screens and pixels and buttons and much more about how the web augments our lives, both actively and passively; how it makes us know ourselves and our homes and workplaces and environments better.

Saturday, June 14th, 2014

rel=search on Flickr

Here’s a nice little UI addition to Chrome. When you focus on the URL bar, if the current site has site-specific search discoverable via rel=”search”, then you get a greyed-out hint to press tab so you can start searching the site.

rel=search

Wednesday, April 23rd, 2014

Responsive design testing tool – Viewport Resizer

A handy little bookmarklet for quickly checking how a site might look at different screen sizes, and you can customise it to use whichever screen sizes you like.