Welcome to the RapidWeaver Community Forums, where you can chat with RapidWeaver users from around the world!
What is Responsive Web Design (RWD)?
Monark
Posts: 114Members
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
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
'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.
FreeStack Theme
MacSupportCasts
{ old forum post count = 6128 }
Responsive Web Design: Missing the Point & Why Is RWD Such a Big Deal.
Is it a 'fad'? Or is it here to stay?
FreeStack Theme
MacSupportCasts
{ old forum post count = 6128 }
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
@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?
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
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
Ah-ha - Phelix Theme!
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.
FreeStack Theme
MacSupportCasts
{ old forum post count = 6128 }
I agree to a point... ...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.
FreeStack Theme
MacSupportCasts
{ old forum post count = 6128 }
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
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.
FreeStack Theme
MacSupportCasts
{ old forum post count = 6128 }
The question is - don't multiple sites confuse the search engines? Doesn't having two sites with the same content dilute the hits?
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
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
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
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.
Joe
Check out my Stacks Store with over 130+ Stacks available!!!
Video, Fancy Image, Sliders, Table, RSS, CMS, Responsive Stacks and much more...
Follow Me on Twitter
Check out my Rapidweaver Book coming Summer 2012.
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
Cheers,
Dave
Cheers,
Dave
Pins personalizados em metal, ouro e prata. Fazemos sua pinos a partir de qualquer logo ou imagem.