Solved

Navigation programming for Responsive Web Design?

Posted on 2013-01-15
3
458 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

Is Your Team Achieving Their Full Potential?

74% of employees feel they are not achieving their full potential. With Linux Academy, not only will you strengthen your team's core competencies but also their knowledge of of the newest IT topics.

With new material every week, we'll make sure that you stay ahead of the game.

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
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.

717 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