Responsive Websites

Hi, am i right in saying that responsive websites use two main functions, Media Queries and Breakpoints. Media Queries are used to determine the device and browser attributes of the device that is viewing the website.


If we take the following website - www.stripe.com - and compare the desktop to mobile version (screenshots attached) we can see that the header and menu have changed significantly.

DESKTOP
desktop
MOBILE
mobile
QUESTIONS

01 - does the mobile version just hide the a lot of the header and menu and then display it's own menu

02 - i thought responsive websites always had the same data, so how come both menus have different content (is it a case of coding two menus and then displaying one and hiding another based on the media query)

03 - does anyone have a good guide on how to create such a mobile slider menu

04 - do responsive websites just determine what CSS to execute OR can they also determine what HTML or even PHP to execute
oo7mlAsked:
Who is Participating?
 
COBOLdinosaurCommented:
You can just use the downloadable class from Google so you don't have to write the detail for every device:
http://code.google.com/p/php-mobile-detect/wiki/Mobile_Detect.

Cd&
0
 
Paul MacDonaldDirector, Information SystemsCommented:
1) Probably

2) They are likely showing/hiding a menu based on the client

3) Not off the top of my head, but it shouldn't be too hard to find one.  (indeed: responsive sliding css menu search results)

4) HTML doesn't execute, per se, but PHP, javascript, ASPX, etc do, and can adapt to the client presentation as necessary.
0
 
COBOLdinosaurCommented:
Media queries have a limited application.  The more advanced approach uses a combination of media queries combined with device/resolution detection to deliver alternate content.

media queries work well for smaller differences in size like the difference between a phne and tablet where the adjustment are relatively small.

When they are used to develop a compromise between the compact and full size presentation; they generally fail to render either of the extremes very well.

For that reason many of us who used to advocate using media queries widly; now recommend more moderate use and delivery of alternate layouts for desktop/laptops and phone/tablet.

Cd&
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
oo7mlAuthor Commented:
Thanks for the replies guys...

"The more advanced approach uses a combination of media queries combined with device/resolution detection to deliver alternate content."

Is this not what a media query does / is?

Can you elaborate on the more advanced approach, as due to my lack of understanding, it seems you are saying you use a combination of media queries with media queries, thanks.
0
 
Paul MacDonaldDirector, Information SystemsCommented:
Aside from CSS, there's javascript:
Using javascript to detect mobile devices
0
 
GaryCommented:
The menu for both looks can be achieved with simple css.
Inline LI's for desktop so you get the horizontal menu and when the screen is smaller you just hide the UL and make the LI elements display:block so you get the list going down
0
 
oo7mlAuthor Commented:
Thanks Gary, but there is different content in both menus
0
 
GaryCommented:
Its the exact same menu, only difference is the More dropdown is hidden since the options are automatically show in phone layout.
Check the code in Firebug - there is only the one and same menu for all resolutions.
There is actually two lists (one for the left menu and one for the right), but in mobile mode they just show under each other
0
 
oo7mlAuthor Commented:
Ok cool, sorry i see that now... the Home button is not visible in the desktop version (display is set to none)
0
 
COBOLdinosaurCommented:
are saying you use a combination of media queries with media queries, thanks.

No I am suggesting that the server can provide the same content with a different layout by simply swapping in an appropriate include file on the server.

Media queries are client side.  If all that is required is simply a selection of stylesheets, then it might not be optimum display but it is efficient.  However if you need to do a lot of scripting to adjust layouts with or without media queries you are going to end up with bloated inefficient code.  For those cases you do deliver optimized code from the server by detecting the client and selecting the appropriate include file to plug into the delivered page.

With the kind of divergence we are seeing in mobile browsers, we may come to the point where media queries are not enough to handle all the non-standard hacks that manufacturers are sticking in.

Cd&
0
 
oo7mlAuthor Commented:
Ok cool, thanks Cd&

So basically you are referring to using Media Queries (client side) to execute css and PHP / server side queries also to execute actual page structure (html) etc...
0
 
COBOLdinosaurCommented:
Yes,  If you are going to have to do a lot of adjustments that are not easily done with alternate CSS rules, then it will generally be more efficient to have the alternate layout pre-defined on the server so it can just be plugged in and you don't chew up a lot of time making adjustments.  It also means you don't run into problems with the initial rendering jumping around that you can get when you need a lot of scripting during the load.

Cd&
0
 
oo7mlAuthor Commented:
Ok, thanks... make good sense...

What is the PHP version of Media Queries called?
0
 
COBOLdinosaurCommented:
There is no such thing as media queries in PHP.  That is strictly a CSS feature.

Cd&
0
 
oo7mlAuthor Commented:
I understand that but what is the equivalent to determine screensize etc in PHP
0
 
oo7mlAuthor Commented:
Excellent, thanks for all your help...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.