Make Your HTMLPages Mobile
21st Century Phones like 20th Century Web Pages!
It turns out that if you use 1994-era extremely basic HTML to build your web site, it's not too hard to make it look pretty good on iPhones and Android phones in 2013!Each web page should have <html> <head> at the top to describe the header information for your page. Then, inside the <head> area, drop this:
<meta name="viewport" content="width=device-width, initial-scale=1" />So, like:
<html> <head> <title>Make your pages Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> [insert amazing content here]That code will make your pages fit into a mobile phone screen. What about images, or tables, or layout, or customization? That's a huge hairy thing beyond that - my HTML tutorials here are suited for basic web essays heh.
In early 2013 I converted thousands of pages here on Justin's Links to look halfway decent in a small screen, as well as Lynx. I discovered that my old trick of using blockquote and dd to create indents and break up the text doesn't do well on mobile phones. So I actually used a bit of "CSS" - Cascading Style Sheets - to make those tags act a little differently for phones.
Most somewhat professional sites on the web use CSS to achieve their style. Most of my site is laid out super-basic-like, without CSS. But I will confess, I've had to employ more CSS to make things look good on mobile versus desktop. View my source if you want to see what I done.
How do you test all of this? Building sites for multiple browsers and devices even!
If you're using a Mac, and you install the free XCode developer tool, you can run "iOS Simulator" to see what your pages are going to look like inside an iPhone. That's pretty handy! Otherwise there are some sites that purport to offer iPhone simulators through a web browser, but their results aren't accurate as far as I've seen. I have had decent luck with some of the "android emulators" on the web - you can get a sense of how your site will look with various devices using big devices to simulate smaller devices!
I ended up going more complicated than simple HTML to get myself a mobile menu. The lurching combination of CSS, Javascript and HTML 101 produces effects like I dug it out of the bargain bin at "Hall-san's House of Discount Web Design" but it sorta does what I want most of the time on some broswers.
I spent a bunch of time figuring out what kind of mobile menu I could include on this site. I browsed the possibilities listed on Responsive Mobile Navigation Menu - Methods and Solutions on Queness. Then I consulted this Stack Overflow Question: "How to make a sliding menu similar to the Facebook Mobile side menu with html,css,jquery?" cribbing CodeFuze's code sample for a simple menu.
Then to create the three bar "menu" icon merginginto common mobile visual lexicon in 2012, I jammed in some instruction from Always Twisted's Pure CSS Menu Button. The blue sidebar would appear under my content, since my old web pages have color only through a body tag. So I pasted in some 2006 hide/show javascript from Movalog.
I had to slap it and caress it to make the menu appear and disappear in a somewhat likeable way on both desktop and mobile. And yeah it's still crude versus the impressive and staggeringly complex mobile layout of sites like The Facebook dot com. I tried sleuthing through their HTML, since amen you can still view HTML source code. But their source code is actually a massive fabric structure challenging to follow any line through.
Other folks have done more extensive writing on building good mobile & web pages - I got a lot of initial guidance from 2009's Basic iPhone Styling chapter from Building iPhone Apps with HTML, CSS, and JavaScript by Jonathan Stark, followed with some Using mobile-specific HTML, CSS, and JavaScript (Mobile web part 5) by David Calhoun.
Now when I look at basic web sites with text on them, I think, man, why don't they just adapt these to show on mobile? Well, I can tell them, actually, it's a somewhat slow process if you want it to look good or you're doing anything complicated with images or aesthetics. Humph.
images
For a relatively easy way to get large images to not exceed the screen size, you might try pasting in style="max-width:100%;height:auto;" as part of the image tag; a tip from Dudley Storey.
youtube videos
You can make your video playback scale with the browser window, on one particular web site. As of Spring 2015, take the URL of a YouTube video, with or without playlist, and paste it into embedresponsively.com, which is one of a number of sites that will convert it into something intense like:
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/undefined' frameborder='0' allowfullscreen></iframe></div>
Which serves to make YouTube video windows scale! <plug>Like on the front page of justinhallshow.com</plug>
justin's links by justin hall: contact