Review daily weather design

[JulianNorton]

What's the current situation?

@kendrick has generously submitted daily card designs

What do you recommend?

Before development begins, I recommend inviting feedback from users to help improve the design. Creating a prototype and testing with https://peek.usertesting.com/ would be a free way to get eyes on it.

Specifically, I don't yet know if this is best served on the bottom of the site, or on a separate page.

[unycorn]

Seeing as how this is quick way to get the information, we could put it at the top and then have users scroll down in order to obtain more details. I'll work on a prototype for the top and the bottom and then some testing could be done to find which one is better.

[JulianNorton]

@unycorn that sounds like a great idea, looking forward to it.

[JulianNorton]

Technical perspectives should be considered as well. If we have 5 separate SVGs, that may increase the transfer size to over 10k. There may only be enough resources for 2 or 3 days on the single page.

[kendrick]

Love the prototype & test approach!

If we have 5 separate SVGs, that may increase the transfer size to over 10k. There may only be enough resources for 2 or 3 days on the single page.

I haven't spelunked enough to see if there's a concrete web perf budget for the project, but generally speaking, 5 SVGs can be relatively "cheap." As a point of reference, I have a work project with 67 icons that are bundled into an SVG spritesheet that is 54 kB. Happy to dig into the details of this if there's interest.

[JulianNorton]

@kendrick Normally you'd be 100% correct. One of the core values & considerations of weather-10kb is to deliver the page in under 10kb excluding the favicon. Originally weather-10kb was a project from: https://a-k-apart.com/

Hence the historic self-inflicting size consideration.

[kendrick]

Facepalm. The perf budget is right there in the project name! 😆

On Mon, Oct 9, 2017 at 9:52 PM, Julian Norton notifications@github.com wrote:

@kendrick https://github.com/kendrick Normally you'd be right. One of the core values & considerations of weather-10kb is to deliver the page in under 10kb excluding the favicon. Originally weather-10kb was a project from: https://a-k-apart.com/

Hence the historic self-inflicting size consideration.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/JulianNorton/weather-10kb/issues/176#issuecomment-335344600, or mute the thread https://github.com/notifications/unsubscribe-auth/AALiTwdQL0n6NFT6wabH13VHfd5AKxpoks5sqtvVgaJpZM4PzK6x .

[Tardog]

Massive props to @kendrick for the wonderful card designs! I can’t think of anything to improve them further. Looking forward to the prototype.

I also agree with the approach proposed by @unycorn – in fact, I’ve seen a lot of weather sites displaying cards for weekly forecast at the top. It’s a solid approach, and as a user, I like it a lot to have a quick overview of the next days before scrolling down to see the forecast for the current day.

That said, I believe the app would benefit greatly from refactoring current and future SVGs into a spritesheet. There are a lot of automated build tools for this, so nobody would be forced to manually build or modify the sprites and the CSS referring to them.

But we should create a separate issue for that task. What do you think?

[JulianNorton]

@Tardog regarding a sprite-sheet, I created a separate issue to discuss:

https://github.com/JulianNorton/weather-10kb/issues/182

[JulianNorton]

https://i.redditmedia.com/_JaalF0d6SUBAw5yiCCpxltOWJ3-4EzkmLQbtBNleoM.png?w=673&s=db5630a1714529dd69df6bc97c6a7b33

Nice design ^ I like how it makes the immediate day larger than the future.

[JulianNorton]

@unycorn Were you able to make any progress on a prototype? Happy to take over if you're too busy.

[JulianNorton]

https://github.com/JulianNorton/weather-10kb/issues/193 Moving forward on a sample implementation

[JulianNorton]

Closing to clean-up issue backlog