Making theme mobile friendly?

by Haship
27 replies
Is it really difficult to make a theme mobile friendly if it's not now (without any plugins)?

What file should be edited in order to make changes (like index.php etc)?
#friendly #making #mobile #theme
  • Profile picture of the author WPThemeGuru
    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.
    {{ DiscussionBoard.errors[10010762].message }}
  • Profile picture of the author MadHu5tle
    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.
    {{ DiscussionBoard.errors[10011003].message }}
  • Profile picture of the author Member8200
    Originally Posted by Haship View Post

    What file should be edited in order to make changes (like index.php etc)?
    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.
    {{ DiscussionBoard.errors[10012931].message }}
  • Profile picture of the author johnfsander
    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.
    Signature
    {{ DiscussionBoard.errors[10013049].message }}
  • Profile picture of the author wprangers
    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.
    Signature
    Website Worries? No more!
    Fully managed WordPress websites starting at just $199/yr including Domain Name. Web Hosting, Premium theme and annual support.
    Check out more plans at http://www.wprangers.com
    {{ DiscussionBoard.errors[10013627].message }}
  • Profile picture of the author FreedMarketing
    Originally Posted by Haship View Post

    Is it really difficult to make a theme mobile friendly if it's not now (without any plugins)?

    What file should be edited in order to make changes (like index.php etc)?
    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.
    {{ DiscussionBoard.errors[10022927].message }}
  • Profile picture of the author nmwf
    A really fast alternative solution: http://www.warriorforum.com/mobile-m...-10-steps.html
    Signature
    Write comprehensible articles on *any* topic in seconds with First Draft...
    First Draft's: Download | Add-Ons | Templates | Purchase | Support | Affiliates
    {{ DiscussionBoard.errors[10024061].message }}
  • Profile picture of the author magicbook
    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.
    {{ DiscussionBoard.errors[10026675].message }}
  • Profile picture of the author x11joex11
    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.
    Signature

    -= Currently looking for craigslist & facebook experts =-

    {{ DiscussionBoard.errors[10035645].message }}
  • Profile picture of the author siteber
    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)
    {{ DiscussionBoard.errors[10038441].message }}
  • Profile picture of the author Weblin
    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
    Signature
    www.HandleMySite.com handles your WordPress site by doing all of the maintenance and technical work for you. Making backups, managing updates, maintenance, performance, security, SEO, etc.
    {{ DiscussionBoard.errors[10039207].message }}
  • Profile picture of the author Trung Kenny Ngo
    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
    {{ DiscussionBoard.errors[10044905].message }}
  • Profile picture of the author Slade556
    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.
    {{ DiscussionBoard.errors[10045509].message }}
  • Profile picture of the author mythoslife
    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
    HTML Code:
    @media screen and (max-width: 300px) {
        //something here that you want to control to show on a small screen
    }
    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.

    Originally Posted by Haship View Post

    Is it really difficult to make a theme mobile friendly if it's not now (without any plugins)?

    What file should be edited in order to make changes (like index.php etc)?
    {{ DiscussionBoard.errors[10054979].message }}
  • Profile picture of the author malikmati
    Its better to create theme from scratch. You will have to edit many files but most important is style.css
    Signature
    Naya KPK
    [/B]
    {{ DiscussionBoard.errors[10078637].message }}
  • Profile picture of the author imsolutionsgroup
    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.
    {{ DiscussionBoard.errors[10080515].message }}
    • Profile picture of the author Techalo
      Hi,

      I would take some of these suggestions with a grain of salt, and don't get yourself too far off course. I didn't read all the replies but there was at least one suggestion that was so far off, I couldn't read anymore.

      If you're truly interested in making a custom mobile friendly responsive design, you need to be familiar with HTML elements, and how to assign CSS properties using ids and classes.

      Unfortunately you can't make a responsive design without knowing some HTML and CSS. In addition, you should familiarize yourself with media queries as these are EXTREMELY important in creating a successful responsive design.

      If you don't have much experience with CSS, I would recommend downloading firebug and doing live CSS edits on any website to see how your changes affect the site, and to understand what the CSS properties do.

      If you have any questions, feel free to pm me.

      Best,
      Will
      Signature
      TecHalo Web Consulting & Development - Request your free consultation today!
      {{ DiscussionBoard.errors[10080655].message }}
      • Profile picture of the author rhinocl
        Here's the easy way with a WordPress site.
        1. Find a plugin that will display one theme to viewers and a second theme to administrators.
        2. Install a responsive theme.
        3. Edit the responsive theme to look like your old one.
        4. Make the new one live for everyone.
        5. Delete the theme switching plugin if desired.
        {{ DiscussionBoard.errors[10080816].message }}
  • Profile picture of the author Saheem
    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
    Signature

    Saheem is my name and google is my game

    {{ DiscussionBoard.errors[10081041].message }}
  • You can also always create a new mobile site in a sub domain or directory and redirect each page to the corresponding mobile page.
    {{ DiscussionBoard.errors[10206690].message }}
  • 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.
    Signature
    Premium WooCommerce & WordPress Plugins $10/ea. or FREE With Membership. PluginForage.com
    {{ DiscussionBoard.errors[10208017].message }}
  • Profile picture of the author andreajhon
    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.
    {{ DiscussionBoard.errors[10208547].message }}
  • Profile picture of the author Jay Moreno
    Before you do anything - check this post out...

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

    Hope it helps...
    Signature
    Sorry, I am too busy helping people to think of a cool signature!
    {{ DiscussionBoard.errors[10211025].message }}
  • Profile picture of the author imsolutionsgroup
    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.
    {{ DiscussionBoard.errors[10218339].message }}
  • Profile picture of the author Himanshu1988
    In your situation having a new mobile optimized website will be the best option instead of converting existing template to responsive.
    Signature

    Web Design | SEO | WordPress | Mobile App @ ZOTO Solutions

    {{ DiscussionBoard.errors[10223817].message }}
  • Profile picture of the author morshedfree
    You can do it easily by css. Please contact with me i will help you. Thanks
    {{ DiscussionBoard.errors[10469040].message }}

Trending Topics