Solved

Navigation programming for Responsive Web Design?

Posted on 2013-01-15
3
457 Views
Last Modified: 2013-11-19
Hello all,

At the outset of a website design process.  Trying to plan for future mobile delivery.  

Looking at Responsive Web Design as the design framework ( http://www.alistapart.com/articles/responsive-web-design/ )

Question - if the idea of Responsive Web Design is that the same web page can be displayed on just about any and all platforms, PC or mobile, then what about the programming behind the navigation system?

A classic dhtml drop-down menu built for PCs is not going to work properly on most mobile devices.  And the stripped-down navigation usually necessary for mobiles is going to look horible and be a waste on PCs.

What is the design strategy regarding navigation technology for Responsive Web Design?

Thanks.
0
Comment
Question by:xfvgdrthbdtyvhgscv
[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
  • 2
3 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38779405
There is no way to do one layout fits all without compromising.  The best results I have seen from so call Responsive design in marginally usable presentation across multiple platforms.  The site that are good on all platforms are doing platform specific coding and delivering common content with device specific templates.  

The operating systems and browsers on mobile have huge differences, and none of them is fully compliant with the standards on pc browsers, so expecting any single approach to work for everything is a fool's dream.

The best approach is to target a platform develop for it, and then role out to additional platforms by enhancing the original code-base.

Cd&
0
 
LVL 1

Author Comment

by:xfvgdrthbdtyvhgscv
ID: 38780253
CD - thanks for the reply.

The site that are good on all platforms are doing platform specific coding and delivering common content with device specific templates.  

By that do you mean browser or device sniffing through http headers, server side, then dynamic server-side integration of content into browser or device-specific templates with the appropriate css and/or Javascript?
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 38780400
Pretty much yes. The biggest problem with trying to keep up with the number of new devices, OS upgrades, and browser upgrades.  

With a good separation of content and presentation as the critic base requirement; the real challenge is testing.  Emulators are limited, and always behind the curve.  It is just not possible to have every possible combination of device/os/browser.  So, you start somewhere and build the content with zero presentation, then you develop the necessary presentation to support the first group you want to target; and roll out across other platforms as resources permit.  There is no way a small organization is going to be able to keep up with everything.  The big sites can have dedicated resources for each platform, so some times there is a shortcut by looking at what they are doing.

I'm not just talking about looking at their code, but also how they resolve bit support holes that require very different approaches across platforms.  Do you degrade in a friendly manner, or do alternative coding? Support a feature available on very few platforms, or do the coding?

You will go nuts if you want to support everything. So prioritize and work down through the list until you get to the point where adding more platforms can only be done by sacrificing support for platforms you are already on.

Cd&
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
move expression web site to a new server 13 75
PHP Form Calculate Total Price 10 121
how can i make amazon approved mobile url 4 39
SP result not being displayed 5 43
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

749 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