A place for customers to chat about Realmac and its products - RapidWeaver, Clear and Ember!

What is Responsive Web Design (RWD)?

MonarkMonark Posts: 317Members
edited March 2012 in RapidWeaver (Archived)
My personal career started as a print designer. The challenge we have is building designs that needed to look just as good on the internet as they do in print. I have been working and using html and CSS with Responsive Web Design (RWD) for years. It was first given a name by ETHAN MARCOTTE from A LIST APART on MAY 25, 2010.

That is where Ethan also began his journey. I have heavily edited his comments but Ethan writes "flexible foundation...it’s a straightforward... layout built on a fluid grid, with... flexible images...embed standards-based technologies...to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design."

Ethan Continues, "Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts."

Ethan gives an example of his work here "A Flexible Grid."

I summarize it this way, Responsive Web Design (RWD) is not building websites made for different devices, it is building websites made for different resolutions and if necessary, modifying the experience for each resolution.

What are your thoughts? How have you used RWD? Do you plan to use RWD?

All The Best! -Mark

Comments

  • Ed BrennerEd Brenner TexasPosts: 3,332Moderators
    Hi Mark,
    I summarize it this way, Responsive Web Design (RWD) is not building websites made for different devices, it is building websites made for different resolutions and if necessary, modifying the experience for each resolution.

    What are your thoughts? How have you used RWD? Do you plan to use RWD?
    Like yourself, I've read not only the article you reference but I've also read Ethan's book & a book called Mobile First.

    'Education' first, deployment later approach for me. I think I've got a firm grasp on it now.

    I'll be using RWD, small stuff at first though. I'm working on a single page layout right now that will be 'responsive' and eliminate certain 'elements' at the 'mobile' level.

    For RW user's, it means - test, test, test. Many of the current plugins simply won't work in a 'responsive' theme. Columns is one example, and the various 'column' stock stacks as well. Joe Workman has done a great job addressing this with his 'Responsive Column' stacks.

    What most don't realize is that a 'media query' relies on a 'hook' to make items 'respond' to the viewport/browser size. Without that 'hook' it ends up being more a 'compress'. So some 'general' understanding of things is needed.

    In the past we've relied upon the Mobilize Plugin from Nimblehost.
    I think some will continue to use it. Not wanting to 'eliminate' items not necessary to the experience of a 'mobile' platform or the lose of viewport/browser 'real estate'.

    For me, I don't want to have to support 'multiple' site/project files to appeal to the masses. I would rather use the RWD approach. Even if I've got to figure out how to 'hand code' what I need to make it work within RW.
    myRapidWeaver
    FreeStack Theme
    MacSupportCasts
    { old forum post count = 6128 }
  • Ed BrennerEd Brenner TexasPosts: 3,332Moderators
    A couple interesting 'articles' about RWD, or not...

    Responsive Web Design: Missing the Point & Why Is RWD Such a Big Deal.

    Is it a 'fad'? Or is it here to stay?
    myRapidWeaver
    FreeStack Theme
    MacSupportCasts
    { old forum post count = 6128 }
  • dhiddingdhidding Suwanee, GAPosts: 1,179Members, Moderators
    edited March 2012
    Focusing on the mobile market is essential...and will undoubtably become more critical in the future. Although the number of people accessing the Web via mobile devices is still quite small, the handwriting is on the wall - we're moving from desktop browsing to desktop/mobile/??? usage (think cars, operating rooms, watches, eventually heads-up, etc.). To that end, all of my clients now have a mobile site that corresponds with their desktop sites.

    I'm not, however, jumping onto the RWD bandwagon. At least not just yet. That's because I don't think my visitors care if the site they're visiting is responsive, or if it's a separate mobile site. They do care if it renders well on their device, if it loads fast, and contains the information they are looking for. Do they care if four columns of text on the desktop site readjusts to one column on their iPhone? Heck no. But, they will care if those four columns remain so on their phone.

    My other belief is that mobile device users neither want nor expect the same web experience on their cell phone that they would get on a desktop site. They do want a full experience - but that's different then the same experience.

    To that end, all of my clients have a robust mobile site that corresponds with their desktop site. Not the same site - but still full-featured. These sites contain all of the essentials that our visitors might be looking for (without any fluff) - laid out in a format that makes it easy to navigate with the push of their thumb. Because I'm using a theme that was built with iPod/iPhone support, the width of my sites adjust to either landscape or portrait modes - and they support the enormous screen size that some Androids sport. I'm also using Stacks that are able to resize quickly & easily (e.g., Joe Workman's Fluid Image and iDsign's Xpander Stacks). The end result are sites that look and function great on small browsers. Sites that will hold my visitor's attention. Sites that have dramatically increased our conversion rates.

    Oh, and in almost all cases, the sites I've designed for desktop browsers also look fantastic on an iPad - so I'm not worried about them. I've had to redesign some elements (e.g., changing the way TipTip works), but all in all, save for a couple of sites where the navigation just doesn't work (like my personal site - LOL...I really need to update that one!), I'm not worried about iPad users at the moment.

    Lastly, I'm dropping all dedicated support for Blackberry users. Our analytics have shown (across the board - ALL of my sites) - that usage has dropped to 3% or below for people accessing our sites using a BB.

    So - to sum up. I will continue to ensure that my desktop sites look great on tablets and I'll continue to build-out a full featured website for iPhones/Androids. These sites will not, however, be a duplicate of the desktop site. Not only because of the vast amount of work it would take - but more importantly because that's not what our visitors want or expect.

    You can see an example of one of my site here or another one here - hit either with a desktop, iPad and/or iPhone/Android.

    Cheers,

    Dave
  • MonarkMonark Posts: 317Members
    @Ed -- You said "For me, I don't want to have to support 'multiple' site/project files to appeal to the masses. I would rather use the RWD approach. Even if I've got to figure out how to 'hand code' what I need to make it work within RW." Yep!

    @dhidding (Dave)
    You said "They do care if it renders well on their device, if it loads fast, and contains the information they are looking for." I couldn't agree more!

    You said "Lastly, I'm dropping all dedicated support for Blackberry users." RWD eliminates browser specific issues, isn't that the whole point?
  • MonarkMonark Posts: 317Members
    Here is a pretty cool tool that lets you test your website. You can toggle between above the fold views or just fit the width. Nice Mobile Responsive Design Testing tool!
  • dhiddingdhidding Suwanee, GAPosts: 1,179Members, Moderators
    edited March 2012
    Lastly, I'm dropping all dedicated support for Blackberry users." RWD eliminates browser specific issues, isn't that the whole point?
    For the most part, yes. Although Blackberrys can surf the web, they don't do it gracefully. Images take too long to render and many (most?) are not going to handle JavaScript (my understanding is that they could, but for years JS was turned off by default). As a result, my iPhone/Android-optimized-sites are not going to work beautifully on an BB. But, with less then 3% of my visitors using one - I'm not going to spend time lowering the bar for them. More people are hitting my sites with IE6 then with a BB (barely, but still...).

    Don't get me wrong - I'm not opposed to RWD sites. Done right, they are truly amazing. I'm just not convinced that the time and effort to create them using RW and Stacks would be worth the effort. Not yet, anyway. For me, I'll continue to create two sites - and then automatically direct the mobile visitors to the appropriate one (as most ad agencies seem to be doing).

    However, for those that want to see a truly awesome responsive site, point your browsers (desktop and iPhone/Android) here. Notice, though, that the header image (which would take up too much room on a cell phone) is gone, the videos have been replaced with (very nice looking) links, and the navigation is totally different. These changes make the site a true pleasure to view on a cell phone. But, for now anyway, sites like this are probably outside the realm of a RW-created site.

    Dave
  • markadrianmarkadrian Posts: 13Members
    Hello dhidding,

    Your sites are amazing, especially the mobile sites!
    I can see you used The Freestack Theme for the front page of the scdiag site and Mondrian for ssclimbing, while ciscolondon is not Rapidweaver.
    Did you use Rapidweaver to build the mobile sites?

    Mark
  • markadrianmarkadrian Posts: 13Members
    Reply to myself,
    Ah-ha - Phelix Theme!
  • Ed BrennerEd Brenner TexasPosts: 3,332Moderators
    Hi Mark,

    I believe that Dave was using CiscoLondon as an example.

    He does however build some really nice sites himself. He's got quite the 'skill set' and pushes it using a variety of tools.
    myRapidWeaver
    FreeStack Theme
    MacSupportCasts
    { old forum post count = 6128 }
  • Ed BrennerEd Brenner TexasPosts: 3,332Moderators
    Dave,

    I agree to a point...
    I'm just not convinced that the time and effort to create them using RW and Stacks would be worth the effort. Not yet, anyway.
    ...the 3rd party stack community is always looking for something new to create. Navigation would be a good start. I know that Charlie is investigating 'responsive' type nav for FreeStack. Joe already gave us 'Responsive Columns'.

    A few Themes provide a changing nav based on the viewport.

    I started the other day on a single page layout that I want to be 'responsive', just for the 'exercise'.

    I can't wait to see how it expands within the RW ecosystem.
    myRapidWeaver
    FreeStack Theme
    MacSupportCasts
    { old forum post count = 6128 }
  • dhiddingdhidding Suwanee, GAPosts: 1,179Members, Moderators
    edited March 2012
    Thanks for the compliments guys!

    I agree 100% Ed - give our 3rd party theme & stack community a bit of time, and we'll be there. I just don't think we're at that point yet. As Mark figured out, the Phelix theme is absolutely fantastic for building 'smart phone' sites...and I also pointed out that I'm using Joe's Fluid Image stack to ensure my images contract and expand. Joe's Responsive Columns Stack wasn't available when I built my last smart phone site - but I'm working on my next one now, and I will purchase a copy for it.

    I also know of at least two other theme developers who have joined the party with themes built for smart phones. Yea!! I haven't worked with them - but, based on their reputation alone, I'm sure they're great too. I hope others join the fun too.

    One other thing to consider when designing sites for smart phones - please do yourself a favor and buy an iPhone or Android first! I learned the hard way that simulators don't necessarily render the site the same way a mobile device will. When I built my first site, I relied entirely upon a simulator (not the one mentioned above) - and was shocked at just how different the final product looked on a mobile device then it did on the simulator (this includes using the dev tools built into Safari). As an example, the image below shows my Presbyterian Imaging site - the left side is from the Mobile Response Design Testing site mentioned above (the other sites I've seen render it the same way) - while the image on the right is an actual screenshot of how the site looks on an iPhone or Android. A vast difference.

    Cheers,

    Dave
    simulated.png
    800 x 700 - 446K
  • Ed BrennerEd Brenner TexasPosts: 3,332Moderators
    So true.

    I tend to go with 'manually' collapsing the browser as far as it will go. Or I use my iPod Touch. The daughter has an iPhone and a Kindle Fire.

    Test, test and more testing.
    myRapidWeaver
    FreeStack Theme
    MacSupportCasts
    { old forum post count = 6128 }
  • markadrianmarkadrian Posts: 13Members
    You guys have inspired me to get started on smart phone versions of my sites. I will buy Phenix and go that route, and maybe look at RWD at a later stage. (Until now I thought it meant Rear Wheel Drive!)
    The question is - don't multiple sites confuse the search engines? Doesn't having two sites with the same content dilute the hits?
  • kpryce2kpryce2 Posts: 236Members
    Dave,

    Some truly interesting stuff and your sites certainly bare out your comments.

    I've looked at Phelix and am tempted to buy just to experiment with, but Its difficult to determine just what is contained within the theme and what additional resources are required using stacks pages. Phelix for example, claims to resize images - so do I still need Joe Workman's Fluid Image Stack. As more Stacks come on the market claiming responsiveness - where does the dividing line start and finish between themes & stacks. I'm deducing from Ed's posts that any stack with a fixed width could be a problem but without some serious testing I wouldn't know.

    I don't really think most people will want to build 2 sites to do the same, but see the need from 1 site built with good tools to render well on all devices as the Holy Grail.

    Ken
  • dhiddingdhidding Suwanee, GAPosts: 1,179Members, Moderators
    edited March 2012
    In my experience, the images would contract or expand once, but not continuously should the iPhone be rotated back and forth. Jonathan and I tried several fixes, but none of them worked. However, for just $5.00 (US) Joe's Fluid Image stack fixed the issue - a bargain if you ask me. This is the only extra stack I had to purchase to make the site. I actually used very few stacks in the site: 1 Column, Text, Lines, Sweet Button and Xpander (by iDsign). I did add some custom CSS to the styles.css file (e.g., About Us and the bullet points on the homepage..and bullet points to my sub menu items such as Menu > Locations > then click Menu again). But that's it.

    As for your comment about not wanting to build 2 sites - I sort of agree, but not totally. While easier to maintain one site instead of two - I think we, as site developers, need to think about what our visitors want. If one believes that a 'full experience' means that everything on the main site needs to be in a mobile site, then yes - I see your point. However, I remain unconvinced that this is the case. As someone who uses my cell phone easily as much as I do my laptop to surf the web, I'm almost always turned off when developers attempt to squish all the info of a desktop site into my phone. Responsive or not.

    The other issue I have with most (not all) catch-all sites is that the desktop site often looks like a glorified mobile site. Personally, I want to ensure that my visitors have the best possible experience, no matter what kind of device they're using. For me that means two sites - one optimized for desktops/tablets...and one optimized for mobile devices.

    One last thing - if your client has an Armadillo page on their main site, did you know that page can also be displayed on a mobile device just fine? This page goes to one of my client's Latest News page - but the exact same page is on their mobile site. So, when they make a change on the main page, the page on the mobile site is updated too (since they're the same page).


    Cheers,

    Dave
  • markadrianmarkadrian Posts: 13Members
    Dave you are right again.
    I also use a mobile a lot for browsing as lugging a macbook or ipad around is too much hassle.
    Most of the sites I access are not optimised for smart phones and I now use (dare I admit) a Samsung Note instead of my iphone because of the large screen. If every site was mobile friendly I would stick with iphone.
    At the same time it annoys me when a web page occupies only the middle third of my desktop screen. Why have a wide screen?
    Ken also has a point but The Holy Grail has not yet been found, so I'm taking the 2 site route.
    Mark
  • joeworkmanjoeworkman SF Bay Area, CAPosts: 2,328Members
    edited March 2012
    Have you all seen my blog post on my Responsive stacks. I also give a nice but brief overview of what responsive is.

    http://joeworkman.net/blog/post-19013908886

    Just as an FYI... my Fluid Image Stack was recently update to dynamically create and load a small resolution image for faster mobile browsing. This feature with a few others such as CSS styling definitely set it apart.

    I also updated my Viddler, YouTube, Vimeo, HTML5 Video and HTML5 Audio stacks to be 100% responsive as well.
    Now go forth and make your websites great...
    I have the biggest stacks store out there. Build your own theme with my Foundation Theme + Stacks.
    I wrote the book on RapidWeaver. Follow me on Twitter
  • kpryce2kpryce2 Posts: 236Members
    edited March 2012
    Dave,

    Thanks again for your good advice. I do agree with you about cramming desktop pages in iphone/ipads. It doesn't look good at all - so back to my drawing board a wee bit.

    What I am testing out is a Navigation link to pages designed specifically for the iPhone - whilst that adds extra pages, they at least are on the same site and provide cut down information. In that way I can have a mixed theme site, with Mark 1 & Phelix theme pages for non-desktop.

    I've also got Joe's Stacks now and they certainly do the job well. I didn't realize he had updated his HTML5 Stacks to be responsive so that's great news.

    A very interesting topic and I trust this will give the developers some incentive to produce more responsive stacks - at least Joe has got his eye on the ball.



    Regards

    Ken
  • Upside Down WebUpside Down Web Temora AustraliaPosts: 39Members
    I have both Andriod and Iphone simulator, neither give same result as the real smart phone experience, same issues testing with the online testers - have to test in the real deal
    MrG

    Nothing Wrong with being Upside Down
  • dhiddingdhidding Suwanee, GAPosts: 1,179Members, Moderators
    edited March 2012
    I mentioned in a previous post that desktop simulators doesn't do a very good job of simulating my iPhone site. I stand corrected - the one mentioned above does! I just revamped a couple of my sites using the newly upgraded Phelix theme (it's responsive now) - and checked it again using the tool Monark mentioned above. It reproduced it perfectly (screenshot below). I'm guessing the new code in Phelix2 corrected the display issues in the simulator.

    Cheers,

    Dave
    fmci.png
    392 x 488 - 118K
  • MonarkMonark Posts: 317Members
    Phelix 2 is unbelievably SWEEEEEEET! Absolutely awesome. Dave, does Phelix render and javascript work on all the other devices, ie. Android, Blackberry, etc. ?
  • dhiddingdhidding Suwanee, GAPosts: 1,179Members, Moderators
    Monark- yes and no. My sites look fantastic (imo, anyway!) in what I refer to as smart phones (iPhone, Android, Windows 7). They do not look good in the Blackberries that my coworkers have. For that reason, in the past I've created two mobile sites - the second one in Mobile Fusion 2 (also by Nimblehost) which render great in Blackberry and most other mobile devices (no javascript, virtually no images, etc.). However, our analytics show that virtually nobody is using a BB to access any of our sites anymore. As a result, I'm in the process of eliminating the Mobile Fusion sites. Going forward, I will create one subdomain for each of my sites (m.domain.com) and I'll use 301 redirects to forward my users from the old URL to the new one.

    Cheers,

    Dave
  • MonarkMonark Posts: 317Members
    Fair enough, didn't know if Phelix 2 fixed any of that or if BB is just a fruit of its own demise? Thanks for answering. :-)
  • dortheyrosariodortheyrosario Posts: 1Members
    Im late.... geezzz.... its already fixed


    Pins personalizados em metal, ouro e prata. Fazemos sua pinos a partir de qualquer logo ou imagem.


    Pins personalizados em metal, ouro e prata. Fazemos sua pinos a partir de qualquer logo ou imagem.
  • dhiddingdhidding Suwanee, GAPosts: 1,179Members, Moderators
    JavaScript is turned off by default on most Blackberries. I'd venture to say that almost nobody turned it on. On top of that, virtually anyone who could/did figure out how to enable it has most likely moved on to an iPhone or Android.
Sign In or Register to comment.