OXP Mobile First Toolkit

Description

Your theme is responsive. Your site still has problems on a phone that no responsive grid solves: fixed backgrounds render as a stretched mess, every hover effect you designed is dead because there is no cursor, one stray element makes the page scroll sideways and you cannot find which, full-height sections overflow the screen and jump when the browser bar collapses, Safari zooms in when someone taps a form field, and a decorative background video quietly spends several megabytes of a visitor’s data plan.

Four more modules add what a phone screen has no room for: a sticky bar that keeps your main buttons within thumb reach, a back-to-top button, a soft fade at the top and bottom of the screen instead of a hard cut, and a visible acknowledgement wherever a finger lands.

OXP Mobile First Toolkit is one panel of switches for exactly those. It is not a caching plugin, not a mobile theme, and it does not touch your desktop layout.

Every module arrives switched off. Activating the plugin changes nothing about your site until you turn something on, and one button puts everything back the way it came.

Nothing is loaded on a desktop. Not the scripts, not the stylesheets. Whether a visitor is on a touch device is a question only the browser can answer, and a page cache would freeze any answer PHP tried to give, so the decision is made in the browser. A desktop visitor gets a few hundred bytes of inline script that stops on its third line and requests nothing.

The single exception is the horizontal-overflow report, which is a tool for you rather than a fix for your visitor: it also runs on a desktop, because narrowing a browser window is how anyone actually hunts that bug. Its files are only ever loaded for a logged-in administrator, so a visitor still gets nothing.

You pick the vocabulary. One bar at the top of the settings page decides how the whole screen talks: plain, where everything is described by what it does and there is no jargon anywhere; technical, where things are called by their real names and nothing is explained; or hybrid, the plain wording with the technical term in brackets, which is the one to leave on if you would rather pick the words up as you go. It changes the words and nothing else. Your settings do not move and your site does not change.

Every module carries a live preview. Click the eye on a module and a simulated phone appears beside the form, with a switch between “without” and “with”, and it follows your own settings as you change them: move the dead-zone sliders and the bands in the phone move, pick a colour for the sticky bar and the bar changes, choose a tap effect and tapping inside the phone plays it.

Features

• Fixed backgrounds. Repairs background-attachment: fixed, which iOS paints against the element instead of the viewport, turning a tall section into a zoomed-in blur. The image really stays put while the page moves past it, which is what the CSS meant in the first place.
• Hover on scroll. Activates your hover effects as elements pass through the middle of the screen. Your existing CSS is reused as it is: the plugin finds your :hover rules, mirrors them, and works out which elements they belong to, so it does something useful with nothing configured at all. Name your own selector to narrow it down, and choose whether an element stays lit once it has been seen.
• Sideways scrolling (horizontal overflow). Finds the element that makes your page scroll sideways and names it, in a panel only you can see. Reports the deepest offender rather than the twelve ancestors it drags out with it, ignores anything a container already clips, highlights the culprit on the page when you tap its name, and lets you dismiss the ones you have already dealt with.
• Full-height sections (100vh). Rewrites 100vh heights to a unit that measures the screen the visitor can actually see, so a hero neither overflows nor jumps when the browser bar appears.
• Zoom when tapping a field (iOS input zoom). Stops Safari zooming the page in when a visitor taps a form field, without taking pinch-zoom away from them.
• Background videos. Leaves the poster image in place instead of streaming a decorative loop over mobile data. It shows the poster your video already has; it cannot invent one, so a video without a poster is left showing nothing.
• Vertical fade. Fades the top and the bottom of the screen into a colour you choose, so a paragraph or a photograph runs out of view instead of being sliced in half by the edge of the phone. Either band on its own or both, in any colour, and no request at all: it is a few hundred bytes of CSS printed in the page.
• Always-on-screen buttons (sticky CTA bar). A sticky bar carrying your main button, with its own label, icon, link, colour and style (filled, outlined or a gradient), that stays reachable however far the visitor has scrolled. Along the bottom of the screen or along the top. The icons are drawn by the plugin, so they cost no extra request, and the label colour is worked out from the button colour unless you would rather choose it.
• Back to top. Appears once the visitor is far enough down to want it, in the corner and in the colour you pick, and you decide how far down that is. If the sticky bar is on, the button rests just above it rather than on top of it, which is the collision this pair of features otherwise makes on every site that has both. It is the one module you can also switch on for desktop, because a long page is long on a laptop too.
• Tap effects. Draws a short animation exactly where a finger lands on a link or a button, because the finger is covering the thing it just pressed. A pulse or a ripple, in your colour, at your size, duration and opacity, on every tap or only on buttons and links, with an optional short vibration on Android. It stands down entirely for a visitor who has asked their phone for less motion.

Privacy

The plugin makes no external requests, from your server or from anyone’s browser, and stores nothing about your visitors. Everything it needs ships inside the plugin.

Technical details