Responsive CSS: Goals and long-term planning

[iangreenleaf]

Short-term goals:

• Have a decent default small-screen viewing experience so that Plans is functional on mobile
• Serve this to all small-screen clients (under a certain size limit, perhaps?)

Long-term goals (maybe? not set in stone):

• Support mobile responsiveness for different stylesheets
• Support responsive images and media queries and whatever other mobile enhancements will make life better
• Allow Plans to easily adapt to future changes in the display landscape

Current status:

The HTML & CSS is mostly the same as in the PHP version. So far the only work I'm aware of was #86/#89. We've decided to drop the old interfaces (#92), so thankfully the only interface HTML we'll need to work with is Postmodern.

Previous work in PHP was documented in grinnellplans/grinnellplans-php#179.

[hannaliebl]

I'm happy to look into this. I can't give a good estimate now, but in a few hours I'll poke around and give my impression. My initial feeling is that this is doable before release.

[jamesprior]

Yeah, I was hoping that we could add basic bootstrap styles to all the templates and only serve the core bootstrap CSS to clients we can identify as being mobile. My thought was to keep the same view templates for mobile and desktop without breaking the existing desktop CSS. I'm not sure if that plan would work though, just an idea.

--James

On Mar 15, 2016, at 10:50 AM, Hanna Liebl [email protected] wrote:

I'm happy to look into this. I can't give a good estimate now, but in a few hours I'll poke around and give my impression. My initial feeling is that this is doable before release.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
#132 (comment)

[hannaliebl]

Bootstrap is mobile first by default, though, so it should work regardless. Any modern CSS grid system will use media queries and sane defaults, so I think, personally, conditionally-served CSS is unnecessary (though maybe within the context of this project it is?) I forgot, I made this a long time ago using the existing markup plans had at the time, and so assuming the media-viewport tag is there (and I used some jquery for the menus I think), responsive styles are easy enough to add, even with just one media query. I'm sorry, also, I didn't really do a good job looking into this last night - I will give myself the upcoming weekend to investigate, if that's ok.

[iangreenleaf]

After discussing this with a bunch of people, I've come up with a rough plan of action. I've opened a new milestone to track these steps and will be breaking out the specific tasks into tickets there. I think I'll leave this open as kind of a place for general discussion, at least for a while.

Here's the game plan, in order:

1. Drop old interfaces, port old stylesheets to new interface (Drop old interfaces and migrate CSS #92)
2. Add meta viewport tag (Add viewport meta tag to allow for future responsive stylesheets #89)
3. Make changes to HTML layout to support responsive design (is anything needed here?)
4. Provide simple responsive CSS defaults that most stylesheets can use (Provide base stylesheet with responsive defaults #139)
5. Pull updates from Reset password through email #4 into all the core Plans styles (Make all official styles responsive #141)
6. Do some outreach for other custom stylesheet authors (Third party stylesheet outreach #140)
7. Make a new default stylesheet for new plans users (New default stylesheet #142)