How do you convert a website so that it becomes mobile friendly

[Richard_35]

I have a website that is not mobile friendly, its designed in plain html and css
how do i make the website responsive
how do i make the menu go small on a mobile device and allthe elements to fit properly

[diafol]

That.s a ridiculous amount of info for one single forum question. Retrofitting a site is painful. Best thing to do is design for mobile first and then add stuff for bigger screens. That.s a broad stroke though. Alternatively dedign a separate mobile site and make your old site fluid to deal with tablets. This has its own issues.

You can find loads of scripts to create hamburger menus at certain breakpoints. You can use frameworks like bootstrap to help create responsive elements but this may be overkill. Regardless, you woildn.t compile every module in bs.

[john_111]

Read up on media queries.

These set widths based on screen size with some sizes chosen to correspond to a few popular sizes of devices. You create a series of these media queries in your css file, set to be triggered if the screen is below or above the sizes you wish to use (called breakpoints). It also means that to do this easily, you have to set div widths in percentages although your trigger points are in pixels. Then your divs' width becomes based on a percentage of the device screensize, and some parts can end up stacked vertically on small screens, but on wider screens they are the way you first thought of your layout on a normal screen. You can test how it works by simply dragging the browser window to smaller sizes of course. This can look strange when you test it, but the devices with smaller screens don't usually let you resize the viewport, so the sudden change you see on your normal sized screen when resizing to test just doesn't happen.

Images also have their size defined as a percentage, and expand / contract to fit the div they are in.

There are lots of code samples you can find via google, and by choosing one that looks like your original design you can slot your site into it.

Some people simply bypass media queries and only use percentage widths throughout, but google is looking for the media query code when it says your site is not mobile friendly, so it's better to use the media queries.

To do all this, set up a new folder on your computer for the new version and concentrate on getting a single page to work, starting with the layout and filler text. Then use this to create lots of copies into which you place the content from your real site. Or if your site has a single layout used throughout, you can simply replace the existing css file with the new one you make for the test pages.

As stated above it can be a hassle as you ight have a few odd layouts you've used to fit a couple of pages, and it is not a quick process. Each such page with divs that are only used in a few places needs their own style fitted in each of the media queries you use.

The media queries only need to hold the data about div sizes and font sizes, and you can get away with only a couple of breakpoints, although you might find sample code that has four or more breakpoints, which is really a bit unnecessary most of the time.

Personally I find advice like design for mobile first to be unhelpful, as it is the design process for mobile and normal screen where you have gone wrong to begin with, which is why you are asking for help!

I find the demand for responsive sites a waste of time - phones now have bigger screens, and if you turn them from portrait view to landscape, most non-responsive sites work okay! Only those with fixed large widths go wrong demanding lots of horizontal scrolling to be viewed properly, and you can zoom in the view a bit as well. Even a simple min-width, max-width on divs can give an acceptable result. But google rules and it's algorithm punishes sites which are not responsive using media queries. So we have little choice in the matter even though the tiny low resolution mobile screens that started this drive are now rarely used and we are repeatedly solving a problem that has gone away. Just to keep google happy.

[gentlemedia]

I find the demand for responsive sites a waste of time - phones now have bigger screens, and if you turn them from portrait view to landscape, most non-responsive sites work okay!

Not necessarily true! Have a look at any websites' Google Analytics and you will be surprised how many small resolutions there are still in use. Here's also a list from Device Atlas with most used screen resolutions in 2016.
https://deviceatlas.com/blog/most-used-smartphone-screen-resolutions-in-2016

Responsive web design is not just a matter of squeezing and stretching. It’s about delivering one website countless ways depending on the width of the screen and the capabilities of the device. For example instead of stacking everyting ontop of eachother for small screens, you can divide certain content into tabs or accordions to overcome really long pages. And integrate swipe gestures wherever this may be suitable for touch screens.

[diafol]

There are many ways to skin a cat. It will all change soon when the big players start ranking sites i different ways and some new idea explodes onto the scene. Remember making rounded boxes with corner images? Anyhow, look at your target audience and typical usage. Mobile is not going away. Most kids do not use PCs or laptops these days - they do almost everything on their phones. Sites that do not support mobile are deemed "weird", "old fashioned", "doomed to fail" or become "irrelevant".

Smartphones may be bigger, screenwise, but portrait view ain't that big. Have a look at DW in desktop view and it's pretty unusable unless you start zooming in. Less said about the mobile view the better!

[brothman01]

media queries.

[Violet_82]

I agree and disagree with diafol.
Don't try convert your website to support mobile/tablets etc, I'd be very surprised if you can actually do that, but regardles, as diafol said, it will be incredibly painful and you will reach the point where you think you're wasting your time. You will.
In terms of approaches, I disagree with starting from mobile first - although people probably use more mobile devices than desktop and this surely is an argument in favour of starting with mobile first - but remember that it's actually easier to hide not needed elements than it is to create them ad hoc, meaning, if you start from desktop and go all the way to mobile (via tablet that is) all you've got to do is to hide what you don't want mobile users to see with, literally, just a line of jquery.
Another thing to bear in mind is backward compatibility: how far are you going with browsers? Some old versions of IE don't support media queries so you might end up displaying a mobile site on a desktop (if your IE version is old enough). Not critical, but worth bearing it in mind.
In my personal experience it's easy enough to create well defined break points to fit most devices. It is kind of difficult to go through the all things in a post, best to look at some examples. I've done an old website some time ago where I store useful code, and it's responsive. Have a look at it, play around with it and you will see what I mean http://antonioborrillo.co.uk/web-development/home.html. It probably has some good tips on how to go about responsiveness, granted it is a bit old, but still valid.
Good suggestion from diafol to use bootstrap. I hate it though, but depending how much you know about HTML, CSS etc, it might be useful.
HTH

[diafol]

Just a gentle retort on mobile-first :)

Why load something, just to hide it? One point is that mobiles are generally slower and many people have hard limits with regard to their capacity. I don't think every site needs to be mobile-first, but if you're building a site where your main audience is using mobile tech - the share seems to be growing at quite a rate - then a lot of thought needs to be put into it - not just an afterthought as to what to hide or reposition. Designing for mobile first, does put you in a different mindset - it makes you design lean - cutting out the bloat. You will find fanboys and girls for mobile-first and mobile-last and a veritable theme park of stuff in between, but a healthy appreciation of the specific experiences you wish your visitors to receive at "different breakpoints" (for want of a better term) is to be expected from the modern designer.

[gentlemedia]

I agree with diafol! Hiding content is hiding the problem, not a solution to it.