Skip to content
This repository has been archived by the owner on Feb 8, 2018. It is now read-only.

mobile first #3063

Closed
wants to merge 6 commits into from
Closed

mobile first #3063

wants to merge 6 commits into from

Conversation

chadwhitacre
Copy link
Contributor

Following on from #2938, this PR inverts our design to be mobile first.

Over the 4 years we have slowly moved away from device specific breakpoints in favour of content specific breakpoints, i.e. adding a breakpoint when the content is no longer easy to consume.

http://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints

  • Pick major breakpoints by starting small, then working up
  • Pick minor breakpoints when necessary
  • Optimize text for reading
  • Never completely hide content

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/how-to-choose-breakpoints

@chadwhitacre chadwhitacre mentioned this pull request Jan 6, 2015
Merged
39 tasks
@chadwhitacre
Copy link
Contributor Author

Rebased on master now that #2938 has landed.

@chadwhitacre
Copy link
Contributor Author

Rebased on #3064.

@chadwhitacre chadwhitacre force-pushed the mobile-first branch 2 times, most recently from 33f27cc to 9f95c7d Compare January 6, 2015 18:05
This was referenced Jan 6, 2015
Merged
Merged
@chadwhitacre
Copy link
Contributor Author

Rebased on master.

@chadwhitacre
Copy link
Contributor Author

"Mobile first" means using min-width media queries instead of max-width: start with the smallest screen size and then work our way up. Right now we start with the large size and constrain our way down. My plan for this PR is to perfectly invert the media queries, leaving everything looking exactly the same from the outside. That'll take some work but I think in terms of an incremental strategy it's the best way forward. The path I've started down is to make UI changes as part of the process, and I think that sets the plow too deep. We don't need another mega-PR like #2938.

@chadwhitacre chadwhitacre mentioned this pull request Jan 14, 2015
Closed
@chadwhitacre
Copy link
Contributor Author

Rebased on master, having previously left off to go do #3078 #3068 #3071 #3072. I left off b58a9a8. It doesn't apply cleanly so I'm debating whether to try to apply it or just redo it.

@chadwhitacre
Copy link
Contributor Author

I feel stuck on this because IA needs to get cleaned up more first. The slew of #30* PRs cleaned up the IA for the About pages. In #3220 I'm looking at IA for the whole of Gratipay.com.

@Changaco
Copy link
Contributor

Changaco commented Mar 4, 2015

If you feel stuck it means that you've deviated from the plan:

My plan for this PR is to perfectly invert the media queries, leaving everything looking exactly the same from the outside.

@chadwhitacre
Copy link
Contributor Author

If you feel stuck it means that you've deviated from the plan:

Indeed. I'll see if I can rein this back in ...

@chadwhitacre chadwhitacre mentioned this pull request Mar 7, 2015
Closed
4 tasks
@chadwhitacre chadwhitacre mentioned this pull request Mar 16, 2015
Closed
@chadwhitacre
Copy link
Contributor Author

IRC

@chadwhitacre chadwhitacre added this to the Redesign milestone Aug 10, 2015
@chadwhitacre
Copy link
Contributor Author

Didn't end up landing this on the Redesign milestone, and now it's drifted. Closing.

@chadwhitacre chadwhitacre deleted the mobile-first branch October 1, 2015 02:02
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
No reviews
Assignees
No one assigned
Labels
TeamX
Projects
None yet
Milestone
Redesign
Development

Successfully merging this pull request may close these issues.
2 participants
@chadwhitacre @Changaco