Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

How i made the responsive mobile version of

•Download as PPTX, PDF•
•
Sayed Ahmed
Sayed Ahmed

The document describes the steps taken to make the website www.justetc.net responsive for mobile devices. Key steps included copying CSS and JavaScript files from the ResponsiveRabbits example project, adding them to the website folders, and inserting code in the HTML head to reference these files. Media queries were also applied to style elements differently based on screen width, such as using the desktop CSS file for widths over 800px. The outcome was deemed acceptable with minor adjustments planned such as removing the home page carousel on mobile versions.

1 of 11
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
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
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
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
COPIED THIS CODE TO THE HEAD SECTION 2016-10-09 5 sayed@justetc.net
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
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
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
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
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
HAVE FUN  You can discuss at http://ask.justetc.net 2016-10-09 11 sayed@justetc.net

More Related Content

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