Hello, my name is: Amy

A Day Apart Chicago

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/

Interface Inventory https://docs.google.com/presentation/d/1GqFmiDV_NqKi36fXAwD3WTJL5-JV-gHL7XVD2fVeL0M/preview?slide=id.p

http://cssstats.com

https://www.webpagetest.org/ -> race with competitors

https://wpostats.com

http://goodkickoffmeetings.com/

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

http://patternprimer.adactio.com/ https://github.com/adactio/Pattern-Primer

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-

class prefixes?

  • .c- ui components
  • .l- layout styles
  • .u- utility
  • .is- .has- state-based classes
  • .js- - javascripts

.cn-c-btn .cn-c-btn__icon .cn-c-btn--secondary

Link Dump

UI components

Layout

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.

Conditional Loading

72% of sites weigh the same on small AND large.

Aggressive Enhancement?

'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.

Touch

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

https://patrickhlauke.github.io/getting-touchy-presentation/

dan mall's mobile menu turns into a hamburger when clicked.

Straight up 'Menu' performs the best.


Use modernizer or something ot add a .js class to the body if there is javascript. So then you can say with .js nav { display: block} or whatever


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

Images

BFG.

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

Compressive Images

File size vs. Image Quality.

SourceSet Article

Video -> fitvids.js

Maps

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/

Conditional Lightboxes.

Modules

http://shouldiuseacarousel.com/

Interesting Pattern -> Tabs to columns.

Forms

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

Fixed positioning

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

Comments