Senior Coders
convert website for mobile/tablets/etc
I made this website 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/mob...ages/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
Global Moderator
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.
Focus on Function Web Design
Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps
Senior Coders
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 <!--[if lte IE 8]>PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
<![endif]-->>
Last edited by mlegg; 01-07-2013 at 09:25 PM. Reason: add code
Global Moderator
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/...ml5-right-now/
Focus on Function Web Design
Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps
New Comer (less than 5 posts)
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!
Senior Coders
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?
Global Moderator
The DD Mega Menu script supports an onclick event: http://www.dynamicdrive.com/dynamici...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?
Focus on Function Web Design
Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps
Posting Permissions
Reply With Quote
Bookmarks