From 9bfcf0258667cc928b965c6ac7724974d737acbd Mon Sep 17 00:00:00 2001 From: gsigno Date: Fri, 27 Oct 2017 10:06:15 +0400 Subject: [PATCH 1/2] Add picture/srcset section in Images Best practices --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 4d4534e3..57e98bb5 100644 --- a/README.md +++ b/README.md @@ -365,6 +365,10 @@ Minimum required xml markup for the browserconfig.xml file is as follows: > * 🛠 [Imagemin](https://github.com/imagemin/imagemin) > * 🛠 Use [ImageOptim](https://imageoptim.com/) to optimise your images for free. +* [ ] **Picture/Srcset:** ![Medium][medium_img] You use picture/srcset to provide the most appropriate image for the current viewport of the user. + +> * 📖 [How to Build Responsive Images with srcset](https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/) + * [ ] **Retina:** ![Low][low_img] You provide layout images 2x or 3x, support retina display. * [ ] **Sprite:** ![Medium][medium_img] Small images are in a sprite file (in the case of icons, they can be in an SVG sprite image). * [ ] **Width and Height:** ![High][high_img] Set `width` and `height` attributes on `` if the final rendered image size is known (can be omitted for CSS sizing). From e232854b61b93b8b9bd3cb04e10a0f6fff0d3682 Mon Sep 17 00:00:00 2001 From: gsigno Date: Fri, 27 Oct 2017 10:14:12 +0400 Subject: [PATCH 2/2] Move Pixel Perfect/Desktop Browsers/Mobile browsers to CSS Testing + add OS Testing --- README.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 57e98bb5..5fa5569a 100644 --- a/README.md +++ b/README.md @@ -257,18 +257,13 @@ Minimum required xml markup for the browserconfig.xml file is as follows: > * 🛠 [Dirty markup](https://dirtymarkup.com/) -* [ ] **Desktop Browsers:** ![High][high_img] All pages were tested on all current desktop browsers (Safari, Firefox, Chrome, Internet Explorer, EDGE...). -* [ ] **Mobile Browsers:** ![High][high_img] All pages were tested on all current mobile browsers (Native browser, Chrome, Safari...). - * [ ] **Link checker:** ![High][high_img] There are no broken links in my page, verify that you don't have any 404 error. > * 🛠 [W3C Link Checker](https://validator.w3.org/checklink) * [ ] **Adblockers test:** ![Medium][medium_img] Your website shows your content correctly with adblockers enabled (You can provide a message encouraging people to disable their adblocker). -- [ ] **Pixel perfect:** ![High][high_img] Pages are close to pixel perfect. Depending on the quality of the creatives, you may not be 100% accurate, but your page needs to be close to your template. -> [Pixel Perfect - Chrome Extension](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en) **[⬆ back to top](#table-of-contents)** @@ -345,6 +340,14 @@ Minimum required xml markup for the browserconfig.xml file is as follows: > * 🛠 [CSS Validator](https://jigsaw.w3.org/css-validator/) +* [ ] **Desktop Browsers:** ![High][high_img] All pages were tested on all current desktop browsers (Safari, Firefox, Chrome, Internet Explorer, EDGE...). +* [ ] **Mobile Browsers:** ![High][high_img] All pages were tested on all current mobile browsers (Native browser, Chrome, Safari...). +* [ ] **OS:** ![High][high_img] All pages were tested on all current OS (Windows, Android, iOS, Mac...). + +- [ ] **Pixel perfect:** ![High][high_img] Pages are close to pixel perfect. Depending on the quality of the creatives, you may not be 100% accurate, but your page needs to be close to your template. + +> [Pixel Perfect - Chrome Extension](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en) + * [ ] **Reading direction:** ![High][high_img] All pages need to be tested for LTR and RTL languages if they need to be supported. > * 📖 [Building RTL-Aware Web Apps & Websites: Part 1 - Mozilla Hacks](https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1/)