What settings will work in Graphene Mobile Neo's Display options?

  • brentwz


    WEBSITE: Androids.net.au

    We’re working on a 3-column, 1170px overall width website in the head Graphene theme, pulling affiliated products into it via Datafeedr aggregator.

    (NOTE: The major visual elements incl. header, background etc are temp placeholders to keep my design partner Tracey happy, while I sort out the tech stuff. Once we grasp the interrelation between big screen & smaller mobile versions we can insert the final design items.)

    Which is where we need a little help please.

    With Graphene Mobile Neo, to set it for smartphones etc I’m a bit out of my depth. What is the screen dimension break point? Do we design images for tablet size or for which default smartphone size (horiz or vert)?


    Graphene Mobile Neo Options:—

    1. Display > Header > Custom Header > image, height, url, HiDPI, background colour ????

    2. Display > Custom Background > Background image URL ????

    What dimensions are required here? What’s a good starting point? A diagram with relevant sizes & variables would really help me get a visual handle on how Neo operates.

    Is there detailed documentation on how to set these options & what results we can expect? I can’t find any, sorry.

    Can you please provide basic settings because my trial & error so far – on all the variables – has worn my brain to a frazzle.

    Thanks, folks.


    Syahir Hakim


    Hi Brent,

    Neo is not a responsive theme, so it doesn’t have device breakpoints in its CSS. Whether or not Neo is used when your site is displayed on a tablet is up to you, via settings you can change in the Any Mobile Theme Switcher plugin.

    Generally though, you would design for the highest resolution you want to support. For example, most high end phones today have full HD resolution (1920×1080). If you would like your images to appear super sharp on such phones, you would want to design your header image to this width.

    But as you would imagine a 1920px-wide image would weigh a bit much in terms of file size – which is rarely good for loading time. So you would you have to decide for a compromise – I generally find 640px to 1280px to be high resolution enough. Also consider that not many people actually view mobile sites in landscape orientation on a smartphone.

    For Neo’s Custom Header settings, there are two options – Image URL and HiDPI image URL. You should really use both, and make the non-HiDPI image half the resolution of the HiDPI image. The HiDPI image will only be served on phones with high screen pixel-per-inch count, whereas on lower resolution phones the non-HiDPI image will be served. This gets you the best of both worlds – sharp image on high resolution screens, small image size on low resolution screens.

    As for background image URL, it’s just the URL to the image you’d like to use as the background image. Nothing fancy there.

Viewing 2 posts - 1 through 2 (of 2 total)

  • You must be logged in to reply to this topic.