Make WordPress Core

Opened 11 years ago

Closed 11 years ago

#25013 closed enhancement (wontfix)

Twenty Fourteen: Improve support for larger viewports

Reported by: nhuja's profile nhuja Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.8
Component: Bundled Theme Keywords:
Focuses: Cc:

Description

Shouldn't the content width extend 100% to the browser width?

In addition, I think the theme will look better if we add some breathing space. I am a minimalist fan and this one looks a bit crowded all over.. :)

Attachments (2)

ticket25013.patch (1.4 KB) - added by eherman24 11 years ago.
Increased width to 100%, Dropped down sidebar
text-overlap.png (757.8 KB) - added by eherman24 11 years ago.
text overlap on scale example

Download all attachments as: .zip

Change History (19)

#1 @rmccue
11 years ago

  • Component changed from General to Bundled Theme
  • Summary changed from The demo doesn't seem to extend 100% to Twenty Fourteen: The demo doesn't seem to extend 100%

@eherman24
11 years ago

Increased width to 100%, Dropped down sidebar

#2 @eherman24
11 years ago

  • Keywords has-patch added
  • Version set to trunk

I have adjusted the width to stretch the entire screen size, and dropped the sidebar down on mobile devices and made responsive. I added the patch as an attachment, I'm not sure how to submit a patch.

Last edited 11 years ago by eherman24 (previous) (diff)

#3 @eherman24
11 years ago

  • Keywords needs-testing added

#4 follow-up: @MikeHansenMe
11 years ago

Attaching the patch here is correct. It looks like you patch has duplicate max-width: 100%; on line 522, 523. As far as full width layout, I am not a huge fan. It can make the content lines really long on large monitors (1920px). Would be good to discuss in todays theme chat.

#5 in reply to: ↑ 4 @eherman24
11 years ago

Replying to MikeHansenMe:

Attaching the patch here is correct. It looks like you patch has duplicate max-width: 100%; on line 522, 523. As far as full width layout, I am not a huge fan. It can make the content lines really long on large monitors (1920px). Would be good to discuss in todays theme chat.

I will do my best to be there for that. Thanks for the feedback Mike

#6 @iamtakashi
11 years ago

With the same reason MikeHansenMe mentioned above, I don't like the idea of making the theme to expand 100% to the browser width. The main content area can be really wide on a bigger monitor and it would make difficult to read. Twenty Fourteen is meant to be a magazine theme and readability is crucial for a content-heavy site (any website really).

My personal rule of thumb is that around 55 to 75 characters per line including space is comfortable to read, and I designed the base theme (Further) along with the rule.

I'd vote to leave as it is - having a maximum 1260px wide.

#7 follow-up: @eherman24
11 years ago

While I do agree with both you in regards to readability , having a completely responsive site requires the ability to scale up as well as scale down.

As it sits right now it is only scalable up to 1260px wide. Anything wider results in the entire site left justified with a ton of dead space that does not match the theme.

Having a large dead area of white space to the right of the header and content area is less than ideal. Maybe moving forward we discuss scalability of the theme in regards to larger monitors. (sorry if this was discussed in the theme meeting today, unfortunately I couldn't make it as I needed to be at a work meeting)

Last edited 11 years ago by eherman24 (previous) (diff)

#8 follow-up: @MikeHansenMe
11 years ago

One alternative that was mentioned during the meeting was moving the max up to 1600px and increasing the font size so it is still readable. WHile still in favor of leaving it at 1260 (this is wider than most). The above is a reasonable alternative.

#9 in reply to: ↑ 8 @eherman24
11 years ago

  • Keywords has-patch needs-testing removed

#10 @celloexpressions
11 years ago

  • Keywords needs-patch added
  • Summary changed from Twenty Fourteen: The demo doesn't seem to extend 100% to Twenty Fourteen: Improve support for larger viewports

On those lines, we could bump up the font size, as well as potentially the sidebar width(s), and extend the largest breakpoint to around 1600px.

Twenty Thirteen's post format background colors extend to 1600px, then there is a solid background color beyond that. I think it's worth finding a way to style the theme out at least that far to truly support the higher end of responsiveness. It should be totally possible to maintain the appropriate characters per line. We could also try things like multiple columns (CSS3 columns), but that's considerably more ambitious.

If the theme itself can extend that far, we can also remove the custom background UI, which is a big plus.

#11 in reply to: ↑ 7 @iamtakashi
11 years ago

  • Keywords needs-patch removed
  • Summary changed from Twenty Fourteen: Improve support for larger viewports to Twenty Fourteen: The demo doesn't seem to extend 100%

Replying to eherman24:

As it sits right now it is only scalable up to 1260px wide. Anything wider results in the entire site left justified with a ton of dead space that does not match the theme.

Having a large dead area of white space to the right of the header and content area is less than ideal.

I would call it as "margin" rather than "dead space" and I don't see the necessity to fill the all the space available. In my opinion, a fluid layout is much difficult for users to make their site look good because of image size and font size etc.

#12 follow-up: @eherman24
11 years ago

One minor issue I have run in to with the twenty fourteen site, is as you begin to scale down the width of your browser window and the 'Featured Content' at the top begins to scale down, text starts to become overlap with the content below, but only for a breif moment in between break points.

It is a minor issue, but one I caught as I was playing with the dimensions. I believe this happenes at around '1244px' for the first content box, and at '1144px' for the second content box.

I've attached a screenshot for a better understanding of what I am talking about. There is also probably a better location to be bringing up an issue such as this, so sorry if I am in the wrong location.

Last edited 11 years ago by eherman24 (previous) (diff)

@eherman24
11 years ago

text overlap on scale example

#13 in reply to: ↑ 12 @iamtakashi
11 years ago

Replying to eherman24:

There is also probably a better location to be bringing up an issue such as this, so sorry if I am in the wrong location.

Like you suspected, the issue would be better to be reported in a separate ticket. Let's focus on the original topic here. Could you open a new ticket about the issue?

#14 @eherman24
11 years ago

Sorry about that. I've opened up a new ticket, regarding the new issue, here #25033

Last edited 11 years ago by eherman24 (previous) (diff)

#15 @celloexpressions
11 years ago

Was reverting the summary and keywords in comment:11 accidental (looks like a simultaneous edit conflict)? I think that summary is broader/more appropriate.

#16 @SergeyBiryukov
11 years ago

  • Keywords needs-patch added
  • Summary changed from Twenty Fourteen: The demo doesn't seem to extend 100% to Twenty Fourteen: Improve support for larger viewports

#17 @lancewillett
11 years ago

  • Keywords needs-patch removed
  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

Discussed at length in Twenty Fourteen office hours today. Decide on wontfix, and authors can use Custom Background color and image to style the right margin to blend differently with the design if they'd like (it's a light gray by default).

IRC log

Note: See TracTickets for help on using tickets.