Add phone outline, re-shoot and process images #130
Conversation
|
Thanks for sending over the set of changes. I think it would make a lot of sense for us to update the documentation so there is some guidance on how to take a screenshot. @housseindjirdeh do you have any opinions on this direction? |
|
I think an explanation on how and with what settings you can take a screenshot with Chrome should suffice. Maybe requiring some post processing might be a bit much to ask as it requires someone to install some tools and figure out how they work. |
There was a problem hiding this comment.
In general, I'm in favour of this direction as it simplifies the need for every contribution to also submit a phone frame with their screenshot.
I'd like to ask for two changes:
- Use an Android frame (perhaps from a Moto G4 or Nexus 5X). As PWAs are currently primarily loaded on Android hardware (looking forward to Service Workers being a default in iOS/Safari in the future!), I think that makes sense.
- Add a note about which DevTools emulation preset should be used to get out the right screenshot size (to the readme). Nexus 5X might be a pretty straight-forward option here if we go for this in 1.
|
Thanks so much for this @rl-king, and apologies on my part for being hands off this project. I completely missed this. I agree that this will pose an issue with all PRs coming in. @addyosmani and I are currently in the process of going through each of them so once that's done, I'll take this on. Agreed on having a note for which device preset to use on DevTools. I'll add that as well! |
This PR fixes #14.
Re-took screenshots of all implementations with Chrome on iPhone6-view and processed them all with
pngquant.Creates an outline of a generic modern smartphone with 44lines of Scss.
Reduces network load on desktop (with images) from 7.2mb to 3.3mb. Which is still not really small. The height of the screenshots could be halved, but this would make them less nice on a hdpi display.
One issue with this PR might be that all current pull requests will have the 'wrong' image with a phone in it.
If you'd like I'll update the docs on how to take a screenshot
Example