Responsive design commit series#1878
Conversation
Use the default font size and allow users to adjust up or down if necessary. 75% can be quite hard to see on modern high-resolution screens, for example. Signed-off-by: Dan Scott <[email protected]>
If the width of the display media is greater than 960px, then we can set the min-width and max-width accordingly. Otherwise, let's leave that unspecified and let the content respond to the the device. Signed-off-by: Dan Scott <[email protected]>
If we work with a relative unit like ems then the design can be more responsive. In this case, 40px was a huge amount of padding on smaller screens; use 0.5em padding and increase that on larger displays. Also, remove the CSS declarations that were made redundant by subsequent declarations. Signed-off-by: Dan Scott <[email protected]>
Allow table elements to display as inline-block elements on smaller screens. Definitely not perfect, but allows the content to be viewed without pinching and zooming or scrolling back and forth. Signed-off-by: Dan Scott <[email protected]>
2em in an h1 is a lot of white space; cut that in half and it works reasonably well on small and big screens alike. Signed-off-by: Dan Scott <[email protected]>
Also use generally accepted HTML5 html and meta elements, instead of XHTML, to simplify and avoid potential quirks. Signed-off-by: Dan Scott <[email protected]>
|
Before much more effort is expended in this direction, lets take a step
back.
I am really not convinced at all that the Schema.org site needs to be
redone with with 'responsive design'.
guha
…On Mon, Apr 2, 2018 at 8:02 AM, Dan Scott ***@***.***> wrote:
This branch includes a series of commits meant to improve the responsive
design of schema.org for device display, and is meant to be the first
steps towards addressing #490
<#490>. More can certainly
be done, but this is much more usable than the current experience, and
makes very little impact on existing large-screen displays.
------------------------------
You can view, comment on, or merge this pull request online at:
#1878
Commit Summary
- Responsiveness: remove global font-size: 75%
- Responsiveness: set min-width and max-width only for large media
- Responsiveness: specify padding in ems not px
- Responsiveness: property table display
- Responsiveness: less whitespace at page start
- Responsiveness: add a meta viewport
File Changes
- *M* docs/schemaorg.css
<https://github.com/schemaorg/schemaorg/pull/1878/files#diff-0> (38)
- *M* templates/developers.tpl
<https://github.com/schemaorg/schemaorg/pull/1878/files#diff-1> (5)
- *M* templates/full.tpl
<https://github.com/schemaorg/schemaorg/pull/1878/files#diff-2> (5)
- *M* templates/fullReleasePage.tpl
<https://github.com/schemaorg/schemaorg/pull/1878/files#diff-3> (5)
- *M* templates/genericTermPageHeader.tpl
<https://github.com/schemaorg/schemaorg/pull/1878/files#diff-4> (5)
- *M* templates/homepage.tpl
<https://github.com/schemaorg/schemaorg/pull/1878/files#diff-5> (6)
- *M* templates/schemas.tpl
<https://github.com/schemaorg/schemaorg/pull/1878/files#diff-6> (5)
- *M* templates/siteDebug.tpl
<https://github.com/schemaorg/schemaorg/pull/1878/files#diff-7> (5)
- *M* templates/tocVersionPage.tpl
<https://github.com/schemaorg/schemaorg/pull/1878/files#diff-8> (5)
- *M* templates/wrongExt.tpl
<https://github.com/schemaorg/schemaorg/pull/1878/files#diff-9> (5)
Patch Links:
- https://github.com/schemaorg/schemaorg/pull/1878.patch
- https://github.com/schemaorg/schemaorg/pull/1878.diff
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#1878>, or mute the thread
<https://github.com/notifications/unsubscribe-auth/AFAlCl71uCTbdLCM_lu4t86rmcLmSfDoks5tkj2XgaJpZM4TDpHk>
.
|
|
Google's "Mobile-Friendly Test" at https://search.google.com/test/mobile-friendly?id=TacwddyZ3zuudEcsBMGrIQ says "Page is not mobile friendly: This page can be difficult to use on a mobile device" and lists the following major issues:
The branch I offered tackles the worst of these issues via minimal changes to the current schema.org CSS and code. It's 2018. Having a website that requires zooming & side-to-side scrolling on phones, or that requires manually changing font size on hi-res laptop and desktop screens simply to be legible, stopped being acceptable years ago. And yes, many of us do consult schema.org on phones and hi-res laptop and desktop screens. |
|
Thanks for this @dbs ! We do need improvements in this direction. Do you have a test site with this material up on appspot somewhere, or shall I publish a copy from your Github branch? |
|
(well I went ahead and posted it at http://responsive-test-200723.appspot.com/Event just to take a look...) |
|
This looks fine to me.
guha
…On Tue, Apr 10, 2018 at 4:23 PM, Dan Brickley ***@***.***> wrote:
(well I went ahead and posted it at http://responsive-test-200723.
appspot.com/Event just to take a look...)
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#1878 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AFAlCqJ5wnHv2tij8wfcdYSRjhQdV-JRks5tnT7YgaJpZM4TDpHk>
.
|
|
I'm merging this in, but we have a minor conflict with the CSE fixes I've also just merged into master: #1857 The CSE fix puts generic header tags into a dedicated sub-template file which gets included during template processing:
@dbs 's fix had a charset declaration in each file, using a different notation:
I'm resolving the conflict in favour of the abovementioned CSE-fix from #1857 for now. Do we have any evidence that the http-equiv notation is any less mobile-friendly? It would be trivial to also add the charset attribute too, but let's not do it without reason. |
|
@danbri
|
Resisted the urge to use self-closing tag...
|
@dbs thanks, how '90s of us! I've merged this with the CSE fixes and updated to HTML5. Previously we had most of the site in Polyglot semi-XMLish, but I think that ship has sailed, so I've left this as
rather than
|
3 participants
This branch includes a series of commits meant to improve the responsive design of schema.org for device display, and is meant to be the first steps towards addressing #490. More can certainly be done, but this is much more usable than the current experience, and makes very little impact on existing large-screen displays.