Brad Frost talks all things Style Guides.
Super awesome idea of being able to have a overall design language across web/app/word etc. https://brand.ai/
Re: Performance Budgets https://timkadlec.com/2014/11/performance-budget-metrics/
https://www.webpagetest.org/ -> race with competitors
20 Second Gut test. Rank from 1 to 10 how happy they'd be if it was their site.
People Parts Products. Gives you a good idea of what things should be included in the style guide, and who's responsible for those. https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742#.d798jwurn
Swoop and Poop
Frontend Guidelines Questionnaire: https://github.com/bradfrost/frontend-guidelines-questionnaire/
css DOM independence. try and flatten out your css so it's more translatable.
Global Namespace .cn-
.is-.has- state-based classes
- https://www.sketchapp.com/ <- apparently makes a lot of things really easy in terms of layout design.
Let content, not device-widths determine breakpoints.
Tech Crunch -> 8 different break points for header; hero has only 3. Basically write media queries for components versus.
Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! -Stephen Hay
Perhaps use major and minor breakpoints. Major being grid and overarching layout, minor being fluctuations in header (as an example).
element/container queries. Treating everything like a little iframe.
72% of sites weigh the same on small AND large.
'The Thing' vs. 'Not the thing'
Perhaps lazy load 'Not the things':
- Default behavior is perhaps the 'not the thing' pages will go to their own page on mobile.
- But if has ajax compatibility you load the content in the same page.
- If the screen is large enough to include the widgets, then load them in.
Be more deliberate with how you introduce complexity
Power rangers video regarding adding components; 'Webpage Activated'
Boston Globe had a weather widget example.
It's OK for users to get different things so long as it's always accessible.
conditional loading doesn't have to just work on screen size. could also work based on features (geolocation, etc)
BUT.... large screen doesn't mean fast connection. Network is hard to detect (boomerang library tries to do this, burns through battery).
Be mindful of every http requests you do.
Perhaps the server will have to help out with some of this stuff. User server side as perhaps a scalpel. Don't default to it but it's here if you need it.
Days where all designers can do is go in and remove things.
Perhaps build a chrome extension that overlays the 'natural touch' area on mobile version when you're using the chrome inspector. scotthurff.com/posts/how-to-design-for-thumbs-in-the-era-of-huge-screens
dan mall's mobile menu turns into a hamburger when clicked.
Straight up 'Menu' performs the best.
Use modernizer or something ot add a
be careful with using z-index and such things on mobile. sometimes they trigger the item underneath.
Use mobile as a site to revisit your navigation.
In navigation have an 'all' link perhaps that could show all the links. The Guardian does this. Helps the user understand, hey! this is an area for navigation.
--> Perhaps put MJC.com's navigation at the bottom on touch?
Complex Navigation with Few clips
Maybe in your style guide specify the breakpoints that images should be created? Perhaps image weight?
Grumpicon and filament group have a way to easily create SVG sprite
File size vs. Image Quality.
Video -> fitvids.js
Super interesting idea is that on mobile instead of dealing with shitty scroll experience to include a link to a native maps experience. http://bradfrost.com/blog/post/adaptive-maps/
Interesting Pattern -> Tabs to columns.
Cut out the noise -> Get to the point sleekly
Inline validation -> Parsely library http://parsleyjs.org/
input type="number" pattern="[0-9]"
ziptastic (auto fills city/state) https://www.getziptastic.com/ enter zipcode and determine city/state
might feel a bit claustrophobic, esp on mobile.
filamentgroup -> fixed-fixed
Headroom.js -> Shows header only if it seems like you are trying to scoll up to find the header.
orientation change. perhaps don't use on landscape mode.
SASS -> Deprecated pattern flag. Salesforce uses this.
Lonely planet actually wrote an API to manage their styleguide, which is crazy interesting! bascially makes sure that everyone HAS to use theie styleguide
Perhaps I'm going to make MJC.com into a static site w/assemble so I can better use a pattern lab.
To help with naming things, blur out the content as to direct the conversation to exactly the structure you are talking about.
When you're finished changing, you're finished. - Ben Franklin