Solved

Responsive Websites

Posted on 2013-11-06
18
253 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
  • 7
  • 5
  • 2
  • +1
18 Comments
 
LVL 33

Expert Comment

by:paulmacd
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
 
LVL 33

Expert Comment

by:paulmacd
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 166 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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 334 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 334 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Read about why website design really matters in today's demanding market.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

759 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now