CODEWITHSUNDEEP
androidiphonehtmlcssmobile
Adrian
Adrian

Reputation: 2012

how to build a mobile site - basics, is it all CSS?

this may seem silly but I am unsure of the basic building blocks for developing a mobile site other than changing the CSS. All the articles I find point to developing a new CSS stylesheet using media queries to make it responsive. Being a web developer I cant help but think Im making something easy very difficult for myself. Can I just clear up something?

If I were to build a mobile version of a desktop site that already exists do I create a new html/php file and use that as the core index file instead of the original one, my reason being , the layout/order of the links/buttons may be completely different, so Im unsure how the same code could be used for both desktop and mobile. Is the standard practice to have completely different files or different layouts based on browsers etc? (something similar to <!--[if IE 7]>, and if not, how do they change the order and content?

And if I AM using a change in html/php how do I get the mobile to read that instead of the regular files/code?

If that question is too vague, could someone please point me to a solid article answers this aspect.

Upvotes: 2

Views: 5715

Answers (3)

Epik
Epik

Reputation: 3357

I would like to start by saying that i use jQuery Mobile to construct my websites.

The jQuery Mobile "page" structure is optimized to support either single pages, or local internal linked "pages" within a page.

The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests.

Mobile page structure

A jQuery Mobile site must start with an HTML5 'doctype' to take full advantage of all of the framework's features. (Older devices with browsers that don't understand HTML5 will safely ignore the 'doctype' and various custom attributes.) In the 'head', references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off.

This is an example of a jQuery page.

This is how easy it is to create pages in the jQuery Mobile framework. The whole site at www.jquerymobile.com has a full comprehensive list of all the task bars, popup windown, menu items etc that you would need for a mobile device. It also allows for page sliding and the cool iphone 'swipe' action.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Page content goes here.</p>      
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

I highly recommend this to anyone as if has so much versatility and useability.

Regards,

-Epik-

Upvotes: 2

GarethReid
GarethReid

Reputation: 418

Have a read about Twitter Bootstrap. It is a CSS/JavaScript plugin that when applied to a website makes it re-size and re-organize to work in iPad, iPhone, android, windows etc. It is the simplest and most effective method I know for turning basic websites into mobile apps.

Not sure if this is what you are after but I switched from apps to bootstrap some time ago and it has work well.

Upvotes: 3

Nick Coad
Nick Coad

Reputation: 3694

This is a huge subject and the answer isn't always the same. Sometimes it's best to offer a mobile version of your site at a different URL and everything, other times you're better off making the one page and use CSS and Javascript to make it responsive.

If you're planning on radically changing the layout to the point where you will be writing the HTML differently, you'll want to make it a separate page. CSS is good for moving stuff around a bit, but if you find you're using CSS to turn your site into a completely different site, you should definitely consider a separate page.

Mostly it's just a matter of using your own discretion - your users don't care too much which approach you use, just so long as it works. Do whatever makes your job as the developer easier!

Hope this answer isn't too vague - you can find more information by Googling for responsive vs separate mobile site. Here's a good case study on the topic.

Upvotes: 4

Related Questions