Assumed you have a web site for years. It has a traditional layout with a header, a menu sidebar, and a content area. The menu sidebar and also the header do not fit very well on a smartphone screen.
We need a
scrolling friendly vertical design. It should appear automatically whenever the screen width is the size of a smartphone. We need an
overlay menu instead of the menu sidebar.
And we need it quickly without a complete redesign.
This is what I just did for my old web site
http://www.galactic-developments.de
(Because it went so smooth and easy, I'll report what I did. Maybe it helps someone. Paying back to the Web.)
Starting with a typical nice static, not responsive, not smartphone compatible design:
We will turn it into a responsive design with popup menu:
...in 10 minutes.
The Basic Principle:
HTML5/CSS3 offers a simple mechanism to switch designs based on device properties: media queries. A media query applies the enclosed CSS only if the query condition is met.
I insert this into the HTML of the page template of my
CMS (I could also add it to my CSS file):
@media screen and (max-width:700px) {
// here will be CSS
}
Media Queries override general CSS-styles. Inside the curly braces I will now redefine some of the styles. By redefining I can make elements disappear, change sizes, and change the layout.
The above CSS means, that the styles will be applied to
screens (not when printed)
and which are smaller than
700 pixels.
Things to do:
1. Remove Header, Footer, and Frame
The frame in the background must disappear. The background consists of three <div>s with a background image each. Top and bottom <div>s also contain other graphics and buttons. They will all disappear. The center <div> also has my text and the menu. The center <div> will stay. But it will loose it's background. Luckily these three <div>s already have IDs. So I can add these lines inside the media query:
#bgtop { display: none; }
#bgcenter { background: none; }
#bgbottom { display: none; }
... which makes my new media query CSS look like:
@media screen and (max-width:700px) {
#bgtop { display: none; }
#bgcenter { background: none; }
#bgbottom { display: none; }
}
See, how the header and the vertical frame disappeared:
2. Menu
The menu should not be statically on the left side. It should be invisible at start and accessible from a menu button. If I press the menu button, then the menu should appear.
I decided, that the menu button should be in the top right corner of the screen and the menu will appear on the right side. Reason: the button in the top right corner will cover less of the text. There is free space at the top right while the top left always has text. I move the menu from the left side, which is also left of the text, to right side and above the text. My menu <div> has the ID "menu":
#menu {
position:fixed; right:0px; top:0px;
background-color:#ffffff; padding:4px;
}
The position will to be fixed even if the page is scrolled. There is a 4 pixel padding which is filled by a white background color for a small distance between the content below and the menu:
If you make the window wide, then it has still the original design.
3. Menu Button
This will be my menu button:
I insert the button <div> into the HTML (I put it just before the header <div>):
<div id="menubutton"></div>
Add CSS for the menu button:
#menubutton {
display: block; position:fixed;
right:4px; top:4px; width:24px; height: 24px;
background:url(img/menubutton.png);
}
Shift the the menu down to make room for the menu button:
#menu { margin-top:28px; }
Add a small JavaScript section to the HTML to toggle the visibility of the menu, when the menu button is pressed (jquery would be overkill, could use jquery for fade/slide animations, though):
<script>
document.getElementById('menubutton').onclick = function()
{
var m = document.getElementById('menu');
m.style.display = (m.style.display == 'block' ? 'none' : 'block');
};
</script>
When the page loads, then the menu should not be visible (it will be shown by the menu button):
4. Device Scaling:
Pixel densities on mobile devices are usually higher than on desktop/laptop screens. And they differ. But all devices should show about the same amount of text. This means, that a scaling factor must be applied, which scales the page depending on the DPI of the device. The command for that comes as a meta tag. Add it to the HTML <head> section (of the web site template):
<meta name="viewport"
content="width=device-width,initial-scale=1,user-scalable=no"
/>
That's basically it:
5. Additional Tweaks:
Pixel densities on mobile devices are usually higher than on desktop/laptop screens. So I changed the baseline font size from 12px to 14px (this might be more effort depending on your existing CSS). In my case:
* { font-size:14px; }
On small smartphone screens, like old iPhones, the menu is too long. I remove some menu entries, which are not really important. I do this by assigning IDs to menu entries like. I changed:
<li><a href="stuff.html">Wallpapers</a></a>
to:
<li id="menuWallpapers"><a href="stuff.html">Wallpapers</a></a>
...and add this to the CSS:
#menuWallpapers { display: none; }
As you see in the screen shot, my text is too wide. The reason is, that in my original design I assigned a fixed width to the content area, so that the text does not flow outside the border. Now, the text width should adjust to the device width. In my case, there are two <div>s to be fixed:
#bgcenter, #main { width: auto; }
I want to remove the page URL from the top. I don't think it's very useful, especially on a mobile screen. The page URL is only on the start page. It is a page content, not in the template of all pages. Still, I can hide it with a CSS in the same place as the other CSS tweaks.
In other words: a style which is only used by a single page is configured globally by the media query CSS section. No problem. Since the link is inside a <div class="link">:
.link { display: none; }
A small shadow for the menu is no mistake:
#menu {
-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 1);
}
Result:
Summary:
The complete CSS:
@media screen and (max-width:700px) {
#bgtop { display: none; }
#bgcenter { background:none; }
#bgbottom { display: none; }
#menu { margin-left: 0px; }
#menu {
position:fixed; right:0px; top:0px;
background-color:#ffffff; padding:4px;
}
#menubutton {
display: block; position:fixed;
right:4px; top:4px; width:24px; height: 24px;
background:url(img/menubutton.png);
}
#menu { margin-top:28px; }
#menu { display: none; }
* { font-size:14px; }
#menuWallpapers { display: none; }
#bgcenter, #main { width: auto; }
.link { display: none; }
#menu {
-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 1);
}
}
A bit HTML and JavaScript for the menu button:
<div id="menubutton"></div><script>
document.getElementById('menubutton').onclick = function()
{
var m = document.getElementById('menu');
m.style.display = (m.style.display == 'block' ? 'none' : 'block');
};
</script>
A meta tag in the HTML <head>:
<meta name="viewport"
content="width=device-width,initial-scale=1,user-scalable=no"
/>
_happy_scaling();
Of course, there are other ways to make a responsive web site. You could use a mobile friendly CSS package, like
bootstrap. But that probably means, that you will redesign your site, which won't be done in an hour.
Of course, there are more modern ways to program the menu button. You could use jquery and this JavaScript:
$('#menubutton').click(function() { $('#menu').fadeToggle(); });
But you have to include 100 kB jquery library:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
They did it again. 15 years after the img-tag, they invented a video-tag. I know, that native video makes the world better. I am totally pro-video. But to call the tag "video" is just plain wrong.