Introduction
How to create a simple responsive website by ➠ Web Designer Wall.
Read ➠ related article (mirror pdf).
My additions
A page has its own directory. The filename is index.html.
The index.html file uses php include(); statements to display the title, the header, the menu, the content, the footer and the 3 sidebar boxes [1] [2] [3] on the right.
Except for the menu textfile, each directory has this set of files.
Here's the textfile with the code ➠ sample page
The styling and the way a page adjusts to different browserwindow sizes on desktop computers and screensizes of mobile devices is done in the css file ➠ 3-steps.css
The server is configured to execute php code in webpages with the .html extension.
This is only done to show that it is possible. The pages behave the same with a .php extension. Your choice.
Create a htaccess file and add this directive :
AddType application/x-httpd-php .html
Most of the editing is done on an iPad with a text/code editor.
Use MIHTool on your iPad to debug the code.
Update 5 feb 2014
After a long search for a responsive menu, I found this one :
➠ Responsive single level menu
Made some changes to make it work together with the existing css file.
The responsiveness is only visible on a mobile device in portrait mode, like iPhones, and a resized Desktop browserwindow of approx. 420px wide.
Update 14 feb 2014
Changed file extensions to .php. Just to be compatible with other servers. Files with the .html will work. You decide what to use.
Also rewrote php code in some files.
See the files here ➠ Own.
⇪ Feb 17 2021 10:07:28
