user4499565
user4499565

Reputation:

Building a Mobile Friendly Website

I'm a novice web developer, and I am building a mobile-friendly website system. I am using currently Bootstrap to add responsiveness to it, PHP5, MySQL and the occasional Ajax/JQuery.

I recently came accross JQuery Mobile. I've been using just regular JQuery/Ajax for the content to be loaded without refreshing the entire page etc.

My questions are:

Upvotes: 1

Views: 127

Answers (2)

parallaxis
parallaxis

Reputation: 196

It does sound like you are on the right track.

Firstly, you're missing a file name in that jQuery snippet but that's neither here nor there in relation to your question about the snippet.

$('#content').load('content/main.php');

$('ul#nav li a').click(function() {
    var page = $(this).attr('href');
    $('#content'(.load('content/' + someJavascriptVarShouldGoHere + '.php');
    });

In short though, no that will not change. Consider using the web on a mobile device, in most cases you are using either Safari, Chrome, or your favorite mobile browser of choice, which retain the javaScript engines of their desktop counterparts. So all the javaScript and CSS that you write will retain the same functionality. If you havent set up a device to test your site while in development, the chrome mobile emulation tool in the Developer Console is a great place to start but it can't beat using real devices to test on. Emulation is always only an adequate testing solution.

jQuery mobile is geared towards touch functionality, rather than responsiveness, which is what I understand that you are asking about.

As far as things to consider:

  • CSS media queries http://css-tricks.com/css-media-queries/

  • Responsive Design vs Targeting viewport sizes You have two paths you could choose to go down: building a site that scales
    relative to the viewport, or building your css in such a way that at certain viewport breakpoints the layout changes to suite the viewport. both are valid
    approaches but I've had more success using the targeted approach.

  • Designing with mobile first in mind, distilling all the most vital, relevant content down and only displaying that, and adding bells and whistles as you gain screen real estate.

There are a lot of sites and tutorials out there for bootstrap and good documentation with it. I suggest doing some googling around and digging into the bootstrap documentation.

As far as content and form goes, I've had a lot of success using Angular and bootstrap in combination. They play pretty nicely together: angular-ui bootstrap module . recently I've been building angular sites, with bootstrap as the UI for sites and php as a data access layer in the form of a RESTful service to deliver content to the app. [slim] (google slim framework) is a great micro framework that can help you quickly and easily set up RESTful endpoints and [PIP] (google pip framework) is another small and easy to use framework that can help you build out you server side processing and data access layer

Upvotes: 1

Keloo
Keloo

Reputation: 1408

You should consider the browser emulator for mobile devices, and yes jQuery works fine on almost all mobile devices. Also I encourage you to look out for a php framework, it will help you a lot.

Upvotes: 0

Related Questions