?
Solved

Responsive Websites

Posted on 2013-11-06
18
Medium Priority
?
267 Views
Last Modified: 2013-12-12
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
0
Comment
Question by:oo7ml
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
  • 2
  • +1
18 Comments
 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 39628023
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39628154
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
 

Author Comment

by:oo7ml
ID: 39628188
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
Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 39628203
Aside from CSS, there's javascript:
Using javascript to detect mobile devices
0
 
LVL 58

Expert Comment

by:Gary
ID: 39628208
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
 

Author Comment

by:oo7ml
ID: 39628221
Thanks Gary, but there is different content in both menus
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 664 total points
ID: 39628242
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
 

Author Comment

by:oo7ml
ID: 39628416
Ok cool, sorry i see that now... the Home button is not visible in the desktop version (display is set to none)
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 1336 total points
ID: 39628527
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
 

Author Comment

by:oo7ml
ID: 39628553
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39630402
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
 

Author Comment

by:oo7ml
ID: 39630778
Ok, thanks... make good sense...

What is the PHP version of Media Queries called?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39630962
There is no such thing as media queries in PHP.  That is strictly a CSS feature.

Cd&
0
 

Author Comment

by:oo7ml
ID: 39632066
I understand that but what is the equivalent to determine screensize etc in PHP
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 1336 total points
ID: 39632249
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
 

Author Comment

by:oo7ml
ID: 39637207
Excellent, thanks for all your help...
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question