Making theme mobile friendly?

I have not yet used any plugin who makes a website completely responsive. I always make it responsive by myself or install a theme that is responsive. Basically just make a different css file and add your media queries in it and then add styles in it. How you want your website looks when it on mobile and how it looks when it is viewing on ipad devices. If you don't these tech stuff then just do a search on google that how to make your website responsive and you will see some good tutorials. I mostly nowadays used bootstrap framework that is best to make your website responsive in less time.

It's easier to build a responsive theme from scratch than to go in and patch an existing theme. That being said, it's not that difficult. Use your existing theme as a "template" and re-create each file, writing responsive CSS. As far as which file...it's your css mostly, but some changes may need to be made to any / every file to make fluid elements respond nicely.

CSS and js files. But css mostly.

Editing a theme that isn't responsive is not advisable. Why not use a theme that is device independent already, saves you time.

If you want to convert your simple website into response you should use proper coding and html5 source, i don't think plugins can help in this scenario in perfect way.

Yes, this can be done using CSS and some HTML code changes.

Also based on how complex your design / layout is, it can be a good idea to start with a responsive theme as base and then customize it as per your needs.

Here is a simple way that might help you and is pretty easy to do. For example if you had a image in your index.php file that was 500px wide and 500px high. This is how you would embed it.

<img alt="Image" src="image.jpg" style="width:500px;height:500px;" />

If you where to shrink your browser down or pull that page up on a phone the image would run off the screen. So a simple way to get it to resize is you wrap it in a div that is the size of the image and then put the width and height of the image to 100%. So it would look like this.

<div style="max-width:500px;max-height:500px;">
<img alt="Image" src="image.jpg" style="width:100%;height:100%;" />
</div>

Then the image will resize with the browser. To do this on a whole page is more spacific to that page, but you can use this idea to get it done. Hope that helps.

A really fast alternative solution: http://www.warriorforum.com/mobile-m...-10-steps.html

humm, its very important that your site must be mobile friendly. Google considered the responsive site as a ranking factor now a days. So, develop your site mobile friendly.

I'm working on a framework to help with this very issue that is superior to bootstrap for certain use case scenarios. If you are interested let me know and I can share what I made so far, I think its pretty nifty.

There are few ways that can make site responsive.

- Choose a responsive WordPress theme, and redesign website
- Design a mobile app for your website, and redirect to the app when people viewing your website using mobile
- Bootstrap your current theme and make it responsive. There are many tutorial on how you can do that.. (but usually takes very long)

You can write media-queries in the css to make your site scale properly in mobile devices.
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website - Smashing Magazine

From my experience of over 10 years of web development, to make a great mobile website, i would suggest you plan to develop your website in mobile first.

Mobile website has small screen and need to adjust well pixel by pixel detail.

Here are steps that I used to develop for our clients:
1. WireFrame:
-> Develop a mobile website draft from wire frame. (layout how it will look, add functionality to it)

2. Photoshop Design:
-> Base on wire frame look, do photoshop design.

3. Markup Mobile Responsive - (Mobile first, then web)
-> markup for mobile responsive.

Technology to use:
* CSS3
* HTML5
* Bootstrap Framework
* Javascript & jquery

* Note: usually this step, when you use only css or html5 to try to make your website responsive.
They usually don't work the whole way like you want to. To make it work, you need the combination of css, html5 and javascript to hide or move things around.

Library like this is a good start:
Bootstrap · The world's most popular mobile-first and responsive front-end framework.

4. Web Development
-> After markup phase then usually the developer took over and develop it into a real functional website.

If you follow my steps, I'm sure you will make a good mobile website yourself.
If you get stuck and need help, I'll be glad to help.

Trung (Kenny) Ngo

Speaking from experience, you're better off creating a new theme altogether. A responsive one, built from scratch, instead of relying on some plugins that might give you more headaches than building a new theme would.

Like what some people here said who know what they are talking about is that you only need to control the look and feel using CSS.

You'll edit the CSS file using CSS3's media rule.

style.css
OR

Use any of these front-end frameworks:

1. Bootstrap
2. Zurb Foundation

If you want to focus on your web application not too much on the design of it use any of the frameworks above speed up your development. They'll make sure that your web app is responsive.

Its better to create theme from scratch. You will have to edit many files but most important is style.css

You can also always create a new mobile site in a subdomain or directory and redirect each page to the corresponding mobile page.

Just because you're making your current theme responsive, doesn't mean it's going to be a good experience/layout for your mobile visitors.

CSS and HTML and JS ... I created my static website for mobile friendly and it is working great with me but it is so hard working to code because Google updated all website masters tools to have to make all website to be mobile friendly and so I have done

You can also always create a new mobile site in a sub domain or directory and redirect each page to the corresponding mobile page.

To take an existing non responsive theme and edit it to make it responsive requires an in-depth knowledge of HTML, CSS, and media queries. It is not a simple cosmetic fix like so many web site owners think it is.

Making a theme responsive is quite difficult on its own. But you if you are using a framework like bootstrap, the code you have to write is much less and it is well structured and the grid layout helps a lot.You have to modify any file having a view. If you are using frameworks, then you only have to modify the templates or views (in a Model-View-Controller framework). And by modify, i mean add responsive classes.

Before you do anything - check this post out...

http://www.warriorforum.com/mobile-m...-steroids.html

Hope it helps...

in my opinion, it is better to create a separate mobile optimized site and have the visiotr redirected to that site when they visit your webpage.

There are different actions you want your user to take when they visit from a mobile device. If you use the same site for both... you can't build the custom layout which will give you the best chance at converting your visitor in desired action you want.

In your situation having a new mobile optimized website will be the best option instead of converting existing template to responsive.

You can do it easily by css. Please contact with me i will help you. Thanks