Home Forums Weaver Xtreme Theme Suggestions for new features for phone display layout?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #69548
    Weaver
    Keymaster

    Hi, all.

    As it stands, I think that Weaver Xtreme does a very good job displaying sites on Mobile devices.

    But… The styling of Weaver Xtreme was really designed before viewing sites from phones became the majority viewing options, and maybe some of the current phone view defaults could be changed or improved

    So, it might be possible to add tweaks or other options to override existing mobile styling, or even just change the styling to better display on phones.

    I think one of the major phone capabilities now is how to display sidebars – top or bottom on phone. But that’s not perfect.

    This forum has an example of a “broken” display on mobile, and that is the login dialog at the top left sidebar. At the moment, the login ends up at the bottom. But if it were to be at the top, then there’s would be too much login stuff at the top. There’s really no nice way to have the more complex login/register/post login view of that widget for phones. Just one example.

    Other issues I’ve heard are display of images and their alignment, as well as just the look of the mobile hamburger menu.  And maybe alternate ways to display the header HTML / Widget area on mobile?

    So, if you have any suggestions for improvements to the phone layout, I’d appreciating hearing from you. And ideally, these changes could be simple “checkbox” or “list selection” options.

    No promises – and it might take until Weaver Xtreme 5.1 to get in there (V5.0 is just around the corner).

    Thanks – weaver

    #69557
    hkp
    Participant

    Hi @Weaver,

    Thanks for the invite. Agreed that Weaver Xtreme already does a great job on mobiles. I am as user, rather than a developer, so my thoughts are from that position. Also, some may be WP core related, rather than theme related. FYI, our Google user stats are 77% phones, 17% desktop, 6% tablets.

    1) Menus

    We use both Primary and Secondary menus and one for Mobile, which works great.
    With Scrambler’s help, I managed to get Hamburger icons and custom titles on the phone menus.

    That process used 2x different methods to achieve, so while the Hamburger icons seem to be same size – and I think they are – the menu title name fonts are slightly different in height, but the closest I could get to a match.

    It would be nice to have 1x method to achieve these menu titles for phones so all fonts match size-wise.

    2) Phone Screen Size

    My phone display is: 544 x 720; DPI: 320; Evaluated Size: 5.3″ and testing 5x different browsers today, all have different page heights with a noticeable % difference. Widths match though.

    That visible page height may be critical when designing some site applications.
    You might want to consider defining and having on record what are the phone and screens sizes you are working to for your design and responsiveness optimizations, as well as the browser you typically use, so we can know those for comparison purposes in tweaking dimensions and fonts.

    3) Sidebar

    For me, the sidebar works well and aligns predictably below page and post contents.

    However, since the recent WP announcement that sidebars are now a Block Widget zone and I needed to install a plugin to use classic widgets, now I find installing images (icons) in the sidebar is quite problematic, as padding and margin settings there seem quite unpredictable now.

    Solutions which work in a normal page/post, do not now display correctly in the sidebar, and square images become rectangular and change size, from one to another…..

    I have also found that the underlining of hyperlinked text no longer works in the footer, as it used to do. Just saying…

    4) White Space

    In the Desktop view, it is good to have a bit of white space and freedom on a website page. But in the limited width of my phone screen, large left-tabs and indents of white, look silly to me and make the pages less easy to read. The following are what I use to improve on the current defaults.

    a) Indents

    On Weaver II the indent default was 30px. Now it is 40px. I can manually change <p style="padding-left: 40px;"> to say <p style="padding-left: 20px;">

    It would be nice to be able to change that by a selection setting, rather than text editing.

    Also, having 1x indent option to match exactly the Bulleted List indent would be great. I use that all the time (at 15px as I recall).

    b) Lists ( ol and ul )

    For readability on a phone, I often add in line spacing to the <li> list using <li style="margin-bottom: 15px;">.

    Being able to more easily space out lists to match the normal vertical text spacing would be great.

    c) Space after periods and punctuation

    I find reading on phones difficult, especially when the next word is hyperlinked and made bold. A bit cramped.

    I also find it easier to have a 2x space after periods in a sentence. Just helps me read more easily.

    I have a plugin to do that for me, “Extra Sentence Space”, but it is dated (2 years) and no longer works on phones. Now I insert &emsp; and &ensp; to obtain spaces when I really need them, but it is too time consuming to do in normal text and anyway, WP removed them in the Visual edit tab.

    A fix to “Extra Sentence Space” would be great so that all my old formatting would start to work again…. Perhaps incorporated into Xtreme as a standard option?

    Yes… I agree it is beyond the scope of your glorious kind offer, but Christmas will soon be here…. and that one on my list…. 😊

    I hope this helps.
    Regards and thanks,
    Angus

    #69565
    hkp
    Participant

    5) Xtreme & WP Images

    For many years I have been using Cloudinary to host and deliver my site images.

    It would be great if all Xtreme and WP images could be made capable of being delivered from a third party source.

    Typical images:
    a) weaver-xtreme/assets/images/gr.png
    b) /favicon.ico
    c) /apple-touch-icon.png (if it is still relevant)

    Regards and thanks,
    Angus

    #69584
    Weaver
    Keymaster

    RE:

    c) Space after periods and punctuation

    I find reading on phones difficult, especially when the next word is hyperlinked and made bold. A bit cramped.

    I also find it easier to have a 2x space after periods in a sentence. Just helps me read more easily.

    I have a plugin to do that for me, “Extra Sentence Space”, but it is dated (2 years) and no longer works on phones. Now I insert &emsp; and &ensp; to obtain spaces when I really need them, but it is too time consuming to do in normal text and anyway, WP removed them in the Visual edit tab.

    A fix to “Extra Sentence Space” would be great so that all my old formatting would start to work again…. Perhaps incorporated into Xtreme as a standard option?

    This one is not easy. For one thing, what is the end of a sentence? It has elements of real grammar understanding: A. B. Name / Dr. / St. / Pkwy. / etc. / i.e. / and on and on.

    And if this is to happen automatically, when would you want it to be done – after writing, then change permanently? Or just when actually outputting the text (I would call this the correct solution, but it would be VERY VERY difficult to always get right)? And depending on other things, there can be issues with generating a leading space on a new line.

    And depending on the current font size selected in whatever browser the viewer is using, there can be much different results. I don’t think there is such a character called (“end of sentence space”).  And of course, you’d probably want to do it differently for a full screen vs a tablet vs a phone.

    Non-trivial to do it correctly.

    This article has a fairly extensive discussion of the whole issue: https://en.wikipedia.org/wiki/Sentence_spacing

    So I think this goes beyond anything a single theme can handle, even if that theme author created the very first real parsing grammar checker, as I did.

    #69586
    hkp
    Participant

    @Weaver

    Thank you for considering this and for your reply.

    I was not seeking an automatic solution, but a simple capability for manual insertions of spaces as needed.

    Thus a 1x <spacebar> input gives a single <space>
    A 2x <spacebar> gives a 2x space e.g. an &ensp;
    A 3x <spacebar> gives a 3x space e.g. an &emsp;

    I don’t know how the “Extra Sentence Space” plugin achieves that, but that is all it does. As I mentioned, after a WP Core update a year ago their plugin still works on desktops but not phones.

    Their information says:

     c2c_extra_sentence_space_punctuation
    The ‘c2c_extra_sentence_space_punctuation’ filter allows you to customize the punctuation, characters, and/or symbols after which double-spacing (when present) is preserved. By default these are ‘.!?’.
    Arguments:
    $punctuation (string): The default characters after which double-spacing should be preserved. Default is ‘.!?’.

    FYI their url is https://wordpress.org/plugins/extra-sentence-space/
    where they provide more technical explanation of how it works.

    Thanks again for considering this. Much appreciated.
    Angus

    #69588
    MMWBAdmin
    Participant

    Hi,

    Was wondering wether less use could be made of  wvr-hide-phone and s-hide (display:none)?

    On mobile – in my case = http://www.mmwb.nl – the site-title, site-tagline, header-image, header-html, wvrx-menu-html, header-widget-area, infobar, primary-widget-area and and secondary-widget-area are suppressed by class=s-hide. Together with a menu containing about 200 (sub)items the DOM is over 1300 elements. Even on mobile the header image gets downloaded and the post slider (for desktop) is in the DOM. (But perhaps I’m doing something wrong & I understand it’s hard to know before hand what device/screensize is requesting the page.)

     

     

    #69589
    scrambler
    Moderator

    @MMWBAdmin You may want to open a thread on this with a link to the site and specifics so we can look at it.

    Worst case we may have a workaround.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.