Solved

Navigation programming for Responsive Web Design?

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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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 walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
This video teaches users how to migrate an existing Wordpress website to a new domain.

758 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

17 Experts available now in Live!

Get 1:1 Help Now