#2912 - Hybrid responsive theme
-
By Chris Graham
- Added
- 4 views
| Identifier | #2912 |
|---|---|
| Issue type | Feature request or suggestion |
| Title | Hybrid responsive theme |
| Status | Completed |
| Tags |
Risk: Breaks themes (custom) |
| Handling member | Chris Graham |
| Addon | core_themeing |
| Description | The current theme uses separate mobile/desktop modes, with a small amount of responsive design for tablets running on desktop mode.
We can fairly easily make a hybrid mode, whereby responsive design is used in addition to the separate mobile/desktop modes. We can do it via a new Tempcode directive that outputs full media rules on desktop mode, while compiling simplified (low bandwidth) rules on mobile mode. Instead of something like this: .foo { {+START,IF,{$MOBILE}} width: 100%; {+END} {+START,IF,{$NOT,{$MOBILE}}} width: 600px; {+END} } We'd do: {+START,MODE,mobile} .foo { width: 100%; } {+END} {+START,MODE,desktop} .foo { width:600px; } {+END} On mobile mode this would compile to... .foo { width: 100%; } On desktop mode this would compile to something like... @media screen and (min-device-width: 320px) and (max-device-width: 640px) { .foo { width: 100%; } } @media screen and (min-device-width: 641px) { .foo { width:600px; } } Somewhere we would define what the pixel ranges of the mobile and desktop modes are. The advantage of this is it keeps the default theme pretty simple, while allowing a nice response theme for desktop, and an optimised theme for mobile. It actually makes the responsive coding simpler, as you don't have to keep copy-and-pasting the device widths, and I think it looks cleaner. You could still use media rules to get greater specificity. |
| Steps to reproduce | |
| Related to | |
| Funded? | No |
The system will post a comment when this issue is modified (e.g., status changes). To be notified of this, click "Enable comment notifications".
Comments
It's important as users will be expecting responsive design nowadays, regardless of us having a very good mobile mode.
Users will probably expect our own site to use responsive design, so it will need refreshing also.
I am actively developing a responsive theme based off a default theme using the Theme Wizard. The design I'm using is 12-column with breakpoints at 600 and 1000px. I realize dual-breakpoints complicates the design, but I decided upon this setup as it offers more flexibility. My design is 300px up to 1920px wide.
The first change I made was to add max-width: 100%; and height:auto; to img, like this:
img {
border: 0; /* Some (older?) browsers imply a border for linked images */
max-width: 100%; /* Responsive image 1 of 2 */
height: auto; /* Responsive image 2 of 2 */
}
FYI, width: 100%; had unintended consequences as it caused other graphics to grow excessively, such as the breadcrumbs graphic.
I have quite a few other changes I've made in global.css, including customizations that wouldn't apply to developing a default hybrid responsive theme. However, I can share any of the changes I've made if you'd like to review, as some of them may be helpful.
When you say 2 responsive options, are you referring to 1) the Bootstrap option and 2) a more open ##column / panel option? Or do you mean 1) a panel option and 2) a ##column option?