How i made the responsive mobile version of

1. HOW I MADE THE RESPONSIVE MOBILE VERSION OF THE WEB-SITE
WWW.JUSTETC.NET
Sayed Ahmed
sayed@justetc.net
Software Engineer/Developer Canada
http://www.justetc.net
http://sayed.justetc.net

2. NOTE
 Did not take much time as you will see..
 Actually took very less time....
 I did not check the outcome in different
devices. Just checked in Blackberry Torch
and in Firefox for desktop...seemed to be ok
 Good enough outcome for the effort...
2016-10-09
2
sayed@justetc.net

3. STEPS TAKEN
 Used NetBeans IDE for the purpose
 Installed the ResponsiveRabbits example project as comes with the
Netbeans IDE
 You can download the project from
 http://salearningschool.com/codes/mobile/responsive/ResponsiveRabbits.zip
 Could see some responsive CSS files in the css folder.
 bootstarp-responsive.css for example
 Also, found some JS files under the JS folder; some related to
responsiveness
 Copied the css files from ResponsiveRabbits to the css folder for
www.justetc.net except style.css as the file name is the same as mine
 Renamed my style.css to style_desk.css (short for style_desktop.css)
 Then copied the style.css file from ResponsiveRabbits to the css folder
of justetc
2016-10-09
3
sayed@justetc.net

4. STEPS TAKEN
 Then copied all the js files from the
ResponsiveRabbits project to my JS folder
 Took a look at the index.html file of the
ResponsiveRabbits project;
 Then copied the code from the head section
where it pointed to the css and js files
 Applied this code to the head section of my files
 Actually there was a head.php file where at the bottom
I pasted the code
2016-10-09
4
sayed@justetc.net

5. COPIED THIS CODE TO THE HEAD SECTION
2016-10-09
5
sayed@justetc.net

6. STEPS TAKEN
 Took out these two lines from my head.php–
not relevant
 You can remove or adjust description or
author meta tags. I will just remove them as I
already have them
2016-10-09
6
sayed@justetc.net

7. MAKING MY SITE RESPONSIVE
 Applied this line to my bootstrap-
responsive.css
 @import url("style_desk.css") (min-width:
800px);
 This is just to tell that use the desktop version of
the css file when the width of the screen is 800
px at the minimum
 Otherwise use the mobile version of the css file
 I may change it to 700 or 600; will do little research on
what is the most appropriate width for displaying
mobile version
2016-10-09
7
sayed@justetc.net

8. IMPORTANT CONCEPTS
 The design is responsive i.e. Fluid
 This is an important concept
 <meta name="viewport" content="width=device-width, initial-
scale=1.0">
 Viewport is set to device width; so the width is dynamic and
adjusted to the device
 Media queries
 @media (min-width: 980px) {
 .nav-collapse.collapse {
 height: auto !important;
 overflow: visible !important;
 }
 }
2016-10-09
8
sayed@justetc.net

9. MEDIA QUERIES
 Just tells to use different style files or styles
based on the media and media properties
 Note: the web-site www.justetc.net already
used HTML5
 It probably is a requirement
 The css are applied to standard HTML5 tags
 You can always right custom css in whatever
way you want for the devices you want to serve;
and them refer to the css files using media
queries...
2016-10-09
9
sayed@justetc.net

10. CONCLUSION
 So far the outcome seems to be acceptable
to me...
 May remove the home page carousal on
mobile version
 It must be easy right! Does not look like
rocket science....
2016-10-09
10
sayed@justetc.net

11. HAVE FUN
 You can discuss at
http://ask.justetc.net
2016-10-09
11
sayed@justetc.net