convert website for mobile/tablets/etc [Archive]

View Full Version : convert website for mobile/tablets/etc

mlegg

01-07-2013, 07:36 PM

I made this website (http://www.ipcamhd.com/) and it works well on computers. I want to make a mobile friendly version also. I've been searching around but still a bit confused on the best, newest way to do this.

I was looking at this from Google http://www.google.com/sites/help/mobile-landing-pages/mlpb.html

Do you think that would be the best and most easy way for me to do this?

thank you

if this is in the wrong forum please move it

Beverleyh

01-07-2013, 08:30 PM

As far as 'mobile friendly' goes, your current site is already performing rather well in mobile devices - it looks nice, it fits on the screen and its easy to read, even without the zoom gesture. Granted, the menu requires some zooming to use effectively but its certainly not a horrible experience.

One option might be to use some form of mobile detection script to switch-in an on-click rather than on-hover menu. That would be a relatively easy solution.

Another option would be to look into a site redesign using a responsive /fluid layout and CSS media queries to target handheld device sizes. With careful use of on-click events instead of on-hovers, and larger action buttons, you can acheive a 'fit-all' site that would adapt to just about any screen size or device.

You don't necessarily need to produce a seperate site on a dedicated mobile platform.

I think I would personally look at fluid/responsive design with CSS media queries - i know its something that I want to do more work on but haven't delved in too deeply just yet.

mlegg

01-07-2013, 09:20 PM

I forgot to add this in my original post: would it be wise to change my doctype for the site from <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> to the newer HTML 5 <!DOCTYPE html>

I've also seen this used for older browsers
<!DOCTYPE HTML >

Beverleyh

01-08-2013, 09:58 AM

I think its entirely up to you. At this stage HTML5 is still officially in draft mode, although it offers backwards compatability and is being rolled out on lots of websites. Here are the official docs for reference: http://www.w3.org/TR/html5-diff/

HTML5 offers more advanced features and there are a greater number of benefits, especially for mobile users (multimedia content), so if you intend to make use of these in your website (or if you just want to take the opportunity to become more familiar with the differences), this could be a good opportunity to transition: http://tympanus.net/codrops/2011/11/24/top-10-reasons-to-use-html5-right-now/

VBAssassin

01-08-2013, 02:05 PM

If i were you, i would not start adding all the browser / mobile specific hacks but instead produce a site that works well on both from a single code base (not different execution paths for different browsers, it soon gets messy). As already suggested, your site is pretty close to working well on mobiles and tablets. However, since they don't have a hover event, you will need to change the menu to an on click event to show the menu. Once you have done that, you should be fine. Remember, a vast majority of sites on the net don't actually have mobile versions. Instead, mobiles and devices are getting better a rendering websites!

mlegg

01-08-2013, 02:35 PM

Thank you for you thought/suggestions.

Is there a nav menu from Dynamic Drive that is similar to what I made that will work on the tablets/mobile device? Or can you point me to the way of one?

Beverleyh

01-08-2013, 03:54 PM

The DD Mega Menu script supports an onclick event: http://www.dynamicdrive.com/dynamicindex1/ddmegamenu.htm

You should be able to style it up to look like your existing one fairly easily :)

There may also be modified versions of some of the other DD menus knocking about in the forums. If you check the DD Script Help forum theads, you might find modified js files posted that include onclicks instead of hovers. I think John posted one recently, but I cant find it at the mo - maybe he will see this thread and offer-up a link?