Responsive Web Design

As I struggle to keep up with the times (mainly because I’m just not that intelligent, nor can my brain keep up), I’m looking at ways to improve my users’ browsing experience for new pages that I design.

While using a dedicated mobile site under a m.domain.com subdomain written in jQueryMobile or some other language dealing with an actual mobile application, it seems that now it makes sense to simply use one HTML document for it all and scale up the styling using the “Mobile First” approach.

Now, what I’ve come to realize is that when looking at countless examples of responsive sites, I notice that as you go from mobile to desktop resolutions, content is shuffled around and perhaps added; however, the desktop sites don’t seem to be THAT far removed from the mobile one in terms of styling.

I’ve been wanting to redesign my own personal website for years now (always put it off), and really like the flow of a jQuery Mobile page. The transitions make for a nice experience, as well as the ability to style it while keeping the layout super simple is perfect. I then imagine the desktop (and perhaps tablet) experience to be one that is completely different.

The idea is for the trapezoid pieces to serve as the site navigation, bringing up some method of displaying content (either JS, or jQuery, or anything that can do that). Perhaps they’ll rotate as the site loads, and when clicked on, the selected trapezoid rotates to the top and expands into the content box (is that doable?). When the user closes out of content box, they are returned to this rather interesting and unique page. It’s rather unorthodox in design to be sure, but I’m curious to see how it would look in practice. This particular template could still be crafted to be responsive using ems and percentages and would likely scale fine down to tablets.

The question is, following the mobile first idea, is it even possible to go from a super basic, minimal HTML and CSS, perhaps a little jQuery, to something that’s completely different? Or am I looking at two different documents all together? Or am I perhaps calling in different stylesheets using a media query in the link in the head section of my document?

I’m thinking the latter will be the best approach rather than trying to shoehorn multiple media queries and associated CSS within a single sheet which could cause confusion for me.

At the same token, if I wish to use jQuery transitions in a mobile environment, how can I prevent that code from loading in a desktop environment (since transitions and what not are embedded into the html itself) without creating a separate index.html file for a desktop version? This again puts me back at designing a dedicated mobile site that users get redirected to when a mobile device is detected, and designing a desktop site that’s completely standalone and may scale for various desktop resolutions (say 720p all the way to 4K and beyond).

Perhaps I’m making this more complicated than it needs to be, but I’m stumped!

I should also add that I feel that responsive web design is taking the character and uniqueness out of designs and layouts, and that they are becoming a mobile/desktop scroll fest.

Matter of fact, a site of another user posted here on the forums looks like any other “responsive” site, where all the content is on top and you scroll down to the contact form, be it viewed in desktop or on a mobile device.

Just had a thought while I’m sitting here brainstorming, and it occurred to me I could use jQuery for the mobile and desktop views to handle the text boxes.

The four nav buttons would start stacked on top of one another in the mobile setting, and then transform into the trapezoid shape and reposition as in the example shown above. The logo would move to the top of the mobile page and any background image would simply be omitted in favor of a solid color.

That doesn’t necessarily solve any scripted animation of the buttons I’d like to do, however…