Normal website to Mobile? Steps involved?

[TheSyntaX]

Hey, was just wondering, I was given desktop ver. website and I need to make it mobile. The question is: what steps are involved in converting normal web to mobile? My idea so far is: Detect browser/device and use either desktop css or mobile css. If it's mobile then:
Use percentages on site layout, display: none some of the elements like huge banners and adverts, resize images, and text. Is that the way?

[djjkxbox360]

Seems like the best way to me, css is great for these reasons as you can edit the webpage yet still have it adapt correctly for both PC and mobile

[TheSyntaX]

[QUOTE=djjkxbox360;40627249]Seems like the best way to me, css is great for these reasons as you can edit the webpage yet still have it adapt correctly for both PC and mobile[/QUOTE]

What would be better? PHP and detect users browser and based on that load appropriate CSS? or use javascript to detect browser? or is there other way?

[xmariusx]

I'm using

 @media all and (max-width: 768px) { /*CSS Here*/ } 

[TheSyntaX]

[QUOTE=xmariusx;40627293]I'm using

 @media all and (max-width: 768px) { /*CSS Here*/ } 

[/QUOTE]

-snip-

Is that in CSS file? I've never seen any tags used in CSS starting with @ what does that mean?

[buhbang]

I just adjust it based on browser width.

Here's a website giving examples of the media queries : [url]http://css-tricks.com/css-media-queries/[/url]

it's an inefficient way because it still loads everything that it would load if the website were to be on a desktop, but it works pretty well for supporting different browser widths.

I guess you can also detect browser using your favorite back-end language. and make a mobile site. redirect accordingly

[editline]13th May 2013[/editline]

[QUOTE=arleitiss;40627310]Is that ajax or what?[/QUOTE]

css

[Scoob]

Use CSS media queries and if you want to support older browsers use Respond.js too.

[buhbang]

I don't think you know what ajax is.

[editline]13th May 2013[/editline]

auto merge :(

[TheSyntaX]

[QUOTE=jung3o;40627320]I don't think you know what ajax is.

[editline]13th May 2013[/editline]

auto merge :([/QUOTE]

The only Ajax thing I know is the on-fly/live query so when you search for something it appears straight away without refreshing page.

[KmartSqrl]

Do not try to detect mobile browsers serverside. Use media queries.

[PiX06]

[QUOTE=KmartSqrl;40629035]Do not try to detect mobile browsers serverside. Use media queries.[/QUOTE]

This.

It's a good idea to have a couple of snap points, so you can provide a good experience for mobile, tablet/smaller desktop, and large displays.

Also it's usually best to start with mobile and get bigger, so you would write the main body of your CSS as though it were for the mobile layout and then you would have something like

@media only screen and (min-width: 700px) {
	/*rules here for tablet/small desktop size */
}
@media only screen and (min-width: 1500px) {
	/*rules here for large desktop size */
}

Where you override styles and change the layout for the two wider device types.

[KmartSqrl]

I'll do breakpoints every 50 or so px if need be, no harm in having a good number of them as long as you're not doing huge layout changes for all the breakpoints. You'll get a lot more responsive results if you make small adjustments to sizing and spacing more frequently.