Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

HTML CSS JSCRIPT mobile and desktop friendly Web Dev


  • Please log in to reply
9 replies to this topic

#1 zingo156

zingo156

  • BC Advisor
  • 3,333 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:11:44 AM

Posted 17 July 2014 - 02:18 PM

I am working on a test website which makes use of simple div based items/menus.

 

Just wondering if there is a certain standard for creating desktop and mobile friendly websites. More specifically is there a way to auto resize div items or menus so they work well with both desktop and mobile web browsers?

 

I have been reading a bit about bootstrap and media queries.

 

 


If I am helping you with a problem and I have not responded within 48 hours please send me a PM.

BC AdBot (Login to Remove)

 


#2 zingo156

zingo156
  • Topic Starter

  • BC Advisor
  • 3,333 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:11:44 AM

Posted 17 July 2014 - 02:27 PM

May have a solution here: http://m5designstudio.com/2013/orlando-web-design/bootstrap-responsive-layout/


If I am helping you with a problem and I have not responded within 48 hours please send me a PM.

#3 neilbuddy

neilbuddy

  • Members
  • 42 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Rochester MN
  • Local time:11:44 AM

Posted 17 July 2014 - 02:37 PM

Bootstrap is a good example of responsive design.  Most of what bootstrap does with CSS3 media queries.

 

Example - define the same CSS class for 4 different screen sizes:

@media (max-width: 767px) {
  .myCSSClass {

  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .myCSSClass {

  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .myCSSClass {

  }
}
@media (min-width: 1200px) {
  .myCSSClass {

  }
}


#4 zingo156

zingo156
  • Topic Starter

  • BC Advisor
  • 3,333 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:11:44 AM

Posted 17 July 2014 - 02:41 PM

I will be giving it a try. I think I will have to redo my menus as they likely won't be mobile friendly even after a resize. Instead of drop downs maybe accordion style menu's are better?


If I am helping you with a problem and I have not responded within 48 hours please send me a PM.

#5 neilbuddy

neilbuddy

  • Members
  • 42 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Rochester MN
  • Local time:11:44 AM

Posted 17 July 2014 - 02:56 PM

What I did for one bootstrap menu is have a some of the menu items move into a "More" menu at the lower resolutions.  Then at the smallest resolution I hide the normal dropdown menu and show an accordion style menu.  The menu items do not actually move, but use use bootstrap classes to hide or show them at different resolutions.  I will see if I can find an example.



#6 zingo156

zingo156
  • Topic Starter

  • BC Advisor
  • 3,333 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:11:44 AM

Posted 17 July 2014 - 03:06 PM

I found this bit: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly


If I am helping you with a problem and I have not responded within 48 hours please send me a PM.

#7 zingo156

zingo156
  • Topic Starter

  • BC Advisor
  • 3,333 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:11:44 AM

Posted 17 July 2014 - 03:47 PM

What I did for one bootstrap menu is have a some of the menu items move into a "More" menu at the lower resolutions.  Then at the smallest resolution I hide the normal dropdown menu and show an accordion style menu.  The menu items do not actually move, but use use bootstrap classes to hide or show them at different resolutions.  I will see if I can find an example.

That is a good idea to have some items move to a more menu.


If I am helping you with a problem and I have not responded within 48 hours please send me a PM.

#8 neilbuddy

neilbuddy

  • Members
  • 42 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Rochester MN
  • Local time:11:44 AM

Posted 19 July 2014 - 10:48 AM

On our site http://www.sitegenie.com I did this with the "Contact" menu item.  If you shrink your browser window it will eventually go into the "More" menu.  I used the visible/hidden utitity classes for bootstrap.  More info here http://getbootstrap.com/css/#responsive-utilities-classes



#9 zingo156

zingo156
  • Topic Starter

  • BC Advisor
  • 3,333 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:11:44 AM

Posted 22 July 2014 - 07:13 AM

I was testing the menu by making my browser window smaller, I do not know if it is a bug with firefox but when I click the menu button (3 line button) when in a small browser window, I get the drop down menu but then get redirected to: https://plus.google.com/106139794017892934409/about

 

It does look exactly like what I was thinking about doing. I may have asked before: what IDE are you using for html,css,jscript? Is there one you favor over another.


Edited by zingo156, 22 July 2014 - 07:15 AM.

If I am helping you with a problem and I have not responded within 48 hours please send me a PM.

#10 neilbuddy

neilbuddy

  • Members
  • 42 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Rochester MN
  • Local time:11:44 AM

Posted 22 July 2014 - 07:51 AM

I will have to take a look at that.  I use Aptana Studio for larger projects (but mostly when doing PHP stuff) and notepad++.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users