I’ve got about 100 websites that I built awhile back and that the customer now wants “mobile friendly” By that, I assume he means, just more readable on a handheld and not an app-like display? Google says they prefer Responsive website but other places I’ve read, say no.
I have most in php bec I use a lot of includes and other minor php things
Is there an easy way to do this? Do I really need to change all the code attributes that don’t jive for mobile? Sorry for not reading all the posts first. I was hoping someone could give me the info in a nutshell.
Getting a responsive display isn’t all that hard. It essentially means your site has to be fluid, and when you drag yoru browser window smaller/larger, the screen updates accordingly and gives you a proper display and good UX.
Really it just comes down to your site being fluid and using media queries to alter the display, if needed. You shouldn’t need to change any PHP code or anything .Just CSS and maybe HTML.
Getting a website to work in mobile comes down to your website being fluid . Nothing complicated.
Easily done with media queries. Though not really needed for body text, on a responsive page the fonts will generally stay the same size, just the container gets narrower and longer.
The VW, VH and VMIN values are great for scaling things like title banners, but not yet universally supported yet. You can still use the media queries as fall back for these if you use them.
We have a series of websites that need converting (for not much money) so I have been thinking of ways to automate.
Images:
Using Responsive Images (php) to server the correct image to the device. Lazy-load (unviel) all images (jquery/zepto) to cut out images that are not in view (also got it working on most of our sliders). Then scale it with CSS.
Layout:
Media queries (and polyfill for IE). To break when needed, for the most part two stage, drop 2/3 cols below the first and use max-width instead of width and then scale using percentage widths.
Navigation:
I have written a CSS menu for the mobile as it works perfectly but sidr is prettt cool, Then JQuery/zepto for the main menu to replace it as needed.
For the most part you can get a site meeting the google requirements pretty quickly.
If your site depends on hover, then you’ll have a lot of work to retrofit, because devices don’t recognize rollovers or hover events, just click events. This is especially bad if your navigation depends on hover to get to the drop-down options.
If you have many images on a page, you’ll want to use lazy load so they’ll load only as the user scrolls to their location.
If you use very large images or heavy coding on a page, then users may not return to it because waiting for that image or code to download is eating up their bandwidth charges. I use JS to detect screen size and refrain from loading the large background image for smaller screens, and substitute the rotating banner for a still image.
Check that your links make sense for mobile. For instance, hide download links for mobile, especially if they involve wallpaper, PDFs, or programs designed for desktop use.
I might be wrong but i’ve done css hover events on my website pages, including my main mega dropdown menu, and when on a mobile i just need to click them to get them to open the same as if i had hovered. Is this not the case for most mobile devices?
one of the main things needed is setting the max-width to 100% on images etc so they don’t break out of the viewport. Most of what you will need to do is amending your stylesheets so you have a mobile friendly one.
Use the google mobile checker to make sure it is labelled as mobile frendly so your rankings are harmed.
If the hover triggers are on anchors then some devices will treat a first touch as a sort of hover and open the menu however that often leaves you with no way to close it unless you click another link so you end up with a hover menu obscuring the page unless you navigate away or find some other in page element to click.
Devices vary though and older iphones also needed cursor:pointer added and some devices may work on elements other than anchors but is not wholly consistent. The surest way to make it works is to initiate a click menu in JS for those devices to be sure.
. Nothing complicated.