Talking Responsive Web Design with Russ Weakley – the Transcript

Our Talk with the Experts session this morning was slightly earlier than usual but that didn’t stop people from attending what turned out to be a very interesting session. Our expert today was one of the original SitePoint course tutors, and now one of our most popular Learnable instructors, Russ Weakley. Russ was on hand to chat about everything from frameworks to convincing clients of the ROI of going with a responsive solution. There weren’t a huge number of resources that came out of the hour, but those that did are listed below.

Responsive Web Design resources on Learnable
Adaptive vs Responsive Web Design
Flexbox Compatibility Tables
Responsive CSS Framework Comparison
Foldy960 – A responsive 960 grid

If you missed the session today because you didn’t know about it, you can sign up for email notifications of future sessions. We’re taking a break next week but I’ll be back at 3:00pm PDT on Wed 10 July with a much requested session on Git. Here is some more info on that and other upcoming sessions.

And if you’re keen to hear what went down this morning, here is a full transcript:

[18:50] <russweakley> Hi everyone, my name is Russ. Here to answer questions and chat about RWD.
[18:52] <HAWK> If you haven’t been to one of these sessions before, it’s simple – you ask questions and Russ answers. If it gets busy I’ll queue questions for him
[18:52] <Tekamba> I have to say this was much easier to find and log into from the last Talk w/the Experts I joined several months ago, nice improvements!
[18:52] <HAWK> I’ll post a transcript up on SitePoint later today
[18:53] <HAWK> Thanks Tekamba  – I’m refining the process 
[18:54] <Tekamba> Is it better to do Responsive design or adaptive/mobile or do they each have their uses/places?
[18:57] <russweakley> @Tekamba Depending on who you talk to, these two concepts are similar, though Adaptive is slightly broader in scope. Bottom line, both are based on the idea of progressive enhancement (start with the content first and gradually add complexity)
[18:58] <Tekamba> Are there any times where you would NOT build a site using responsive design principles?
[18:58] <HAWK> Broader in scope in what way?
[19:00] <Tekamba> And has anyone looked at or used froont.com? I just came across it yesterday and haven’t looked much into it, but seems interesting
[19:00] <TaoistTotty> When looking a converting an existing site to being responsive, is it better to try and alter the existing code, or is it better to start the coding from scratch to be responsive?
[19:01] <russweakley> @Tekamba I have also done fixed width layouts sometimes for quick prototypes. A recent client refused to discuss RWD so I had to build a fixed width site. However, these days very rarely, as it has just become part of what we do. 
[19:02] <russweakley> @HAWK From the horses mouth: “Adaptive web design is just progressive enhancement – a more holistic approach to web design in that it also takes into account markup, CSS, JavaScript and assistive technology support.”
[19:02] <russweakley> More here: http://blog.easy-designs.net/archives/2011/11/16/on-adaptive-vs-responsive-web-design/
[19:03] <Veronica> why would one refuse to discuss RWD? Would it not just benefit them all the way around?
[19:04] <russweakley> @TaoistTotty Sometimes we have no choice. Due to budgets or time, we may have to retrofit, rather than start again. I will be covering retrofitting in the upcoming course – coming very soon!
[19:05] <HAWK> It’ll be here when it launches https://learnable.com/topics/responsive-web-design
[19:06] <russweakley> @49Veronica A Good question! Almost every client I have met in the last two years has immediately been sold on RWD. This client had already done the design, and the designer was not really a web designer, so it was considered “too hard” to go back to scratch and redesign. As mentioned, this is very rare.
[19:06] <Tekamba> TaoistTotty russweakley Sometimes it is tough convincing a client that a slightly higher budget (or looser time frame) will be beneficial in the long run, they just look at the immediate ROI and not at what it might mean longer term
[19:07] <HAWK> How much does a responsive solution add to a budget?
[19:07] <Jquerto_Sassafras> How much you got? lol
[19:07] <kathpoole> Am working with Bootstrap as a framework and like it OK. Then watched a Dreamweaver build using Boilerplate. Which one do people like? I read somewhere that Bootstrap is taking over the world.
[19:07] <russweakley> @Tekamba Agree! But I have found it easy to convince most clients – simply by discussing stats, the future… I normally do not have to “sell” the idea.
[19:08] <AnnaS> question: and this might seem dumb but, if i make a website responsive, do i have to make it specifically for different platforms and devices or will RWD just go across the board?
[19:09] <AnnaS> i implemented Bootstrap before on a project but not specific to any device. However, does it make sense to make it device specific and when would you do that, when it’s a high traffic website?
[19:09] <kathpoole> I think Bootstrap crosses all devices. 
[19:09] <russweakley> @HAWK That is a hard question as it depends on the site. For some of my smaller sites there is no additional cost as I simply design and build for responsive as part of the process. However, for large projects, it can sometimes add additional costs through the process – starting with planning, sketching, design, build. A responsive web app we built
[19:09] <russweakley> about 12 months ago would have been about 20% greater in cost.
[19:10] <Tekamba> OK, that brings up a good question, feedback on Bootstrap, Boilerplate, 960gs, et al, is one or another “better” for RWD as a starting point or better off doing more of a “build your own” approach?
[19:10] <TaoistTotty> russweakley HAWK and idea on time scales on the retrofitting course – are we talking weeks or months?
[19:11] <russweakley> @AnnaS I would generally try to avoid “device specific” RWD. The key principle is to make a site that adapts to ANY device. And, new devices are coming on to the market all the time. If you build with fluid layouts, your site should apart for any device without major stress
[19:12] <AnnaS> so, is using Bootstrap enough or better to use another grid system? I only used their row fluid grid
[19:13] <russweakley> @33Tekamba Depends on who you talk to. i have friends who use a framework for EVERY site – foundation, bootstrap etc. I prefer to look at each design and build a mini-framework for that site. This is often lighter and more suitable. But, it comes down to personal preference and also how teams work.
[19:13] <Kate> Which is better? Loading different size images based on screen width detection or a single image styled to 100% so it always fits but may be higher res than needed for a small device?
[19:14] <kathpoole> mini-framework?
[19:14] <AnnaS> what do you mean by mini-framework?
[19:15] <russweakley> @25AnnaS Following on from the point above, these frameworks are often fine. The problem I often have is that the design layout is either so simple or so complex that these frameworks do not suit. I have had some beautiful designs to convert into RWD templates and the designer had not considered standard frameworks as a base, so I had no choice but
[19:15] <russweakley> to build my own grid systems.
[19:15] <Tekamba> @russweakley so when building from scratch do you still have your own “starting” point or blank slate?
[19:16] <russweakley> A mini-framA mini-framework is just a small custom framework that only includes components needed. It might be a small set of grids – just to suit the needs of that site, and just the buttons and modules that are needed. Rather than using a large off-the-shelf framework with everything. Makes sense?
[19:17] <HAWK> Sure does
[19:17] <AnnaS> ok that makes sense
[19:17] <AnnaS> I would like to get better at RWD  -i saw a link to your course. Is that already available and what else would you recommend?
[19:18] <HAWK> We have a couple of great resources here AnnaS https://learnable.com/topics/responsive-web-design
[19:18] <russweakley> @Tekamba Absolutely! A lot of stuff is prepared. Basic html templates in place – basted off boiletplate, CSS architecture in place using normalize, SMACSS and OOCSS – even my own basic library components roughly in place. however, often the grids and modules are custom built – to be quick land light weight.
[19:18] <kathpoole> I’m pretty sure that Bootstrap has a way to clean out all the unused stuff at the end before the final upload.
[19:18] <HAWK> And Russ’s new course will be there soon
[19:18] <Alex> I’m just new to the css flexbox model, what do I have to consider when creating a site using this with respect to RWD
[19:19] <russweakley> @kathpoole absolutely! As does Foundation. So many people are fine with this. And please do not think that the approach I have been taking is the answer. I have found it suited the types of sites I have built which often have quite specific needs. In other cases, an off the shelf framework is absolutely perfect!
[19:20] <AnnaS> can u tell me main differences or pros/cons of Bootstrap vs Foundation?
[19:21] <russweakley> @Alex The best way to tell if something like this can be used is via http://caniuse.com/flexbox. I avoid this on real sites at this point as it is not well supported. Looking forward to a time when it can though!
[19:22] <Alex> great thanks, i’ll check that out
[19:23] <russweakley> @AnnaS mmm… that is a hard one. I would say that Bootstrap is probably bigger in scope and has more aspects of markup/CSS solved. But again, it would come down to personal opinion. sorry I cannot give a definitive answer on that.
[19:23] <Tekamba> I’m just concerned about using a “build my own” approach due to the fact it is so easy to overlook some combination of options that would cause your design to break
[19:24] <AnnaS> i just want to use a simple, small, fluid grid system, since websites am working on are not too large scale and because of that, I want to be able to create and implement quickly, but I get lost in the various components and everything there is.
[19:24] <russweakley> Also, be aware that the latest foundation (v4) dropped support for older browsers. It is lighter and tighter, but this can present problems if the browsers you want to support are not included
[19:24] <AnnaS> Tekamba good point!  thx
[19:25] <Alex> Regarding navigation in responsive sites, would you give a little guidance and/or examples of best practices (in a mobile layout) for sites that have navigation that’s 3 tiers deep pls
[19:25] <AnnaS> i found this: http://responsive.vermilion.com/compare.php
[19:26] <HAWK> Thx AnnaS
[19:26] <russweakley> @Tekamba that makes sense. A lot comes down to testing testing testing! and confidence. The main problems I have with off-the-shelf are: 1. people do not learn for themselves 2. sometimes, as mentioned above, the framework does not exactly suit. Again, I wanna stress that this is just me. Many people would ALWAYS go for a framework rather than build
[19:27] <chad> russ … I know this chat is about RWD … something off topic … how do you deal with clients who constantly want to add or change the agreed scope of work?
[19:27] <Mladen> I don’t see reason why someone need to build own responsive framework, there is 1000 frameworks on internet. I think that building own framework is just wasting time.
[19:27] <russweakley> @Alex well, in the upcoming course, launching in four weeks, we have a whole lesson just on responsive navs. I will cover common design patterns, link to a range of common solutions and then do a walk through code example of a simple responsive nav including some basic Jquery
[19:28] <Alex> ok thanks, looking forward to it
[19:28] <Alex> do you have any resources to hand to give me some inspiration in the meantime? 
[19:29] <russweakley> @Mladen completely valid point. And if time is tight or you are part of a team that uses a specific framework, then this is a no- brainer. My only concern is people assume that this is the ONLY way. Life is not always black and white  :)
[19:29] <russweakley> @alex, will dig out some and post up here soon if I can
[19:30] <Jquerto_Sassafras> chad “You don’t”. lol I’ve found that being very definitive when drawing up a contract, to the point there is no question of “what” work will be done, and “what” work won’t… alleviates most problems, and opens up the door to you being able to easily say, “Okay”, but that’s going to cost you extra
[19:30] <Tekamba> It is good sometimes to start with a framework, but I typically try to dig through it as much as I can to use it to learn myself, then use that to compile something of my own
[19:30] <Ion> As I undertand, when designing a responsive website for scrach, It´s much better to think in colums. How many colums would you suggest for a correct layout?
[19:30] <Shinkaku> People tend to forget frameworks are meant to speed up web development, not to be a definitive solution. You’ll always need to customize something.
[19:30] <Tekamba> I did find this (still looking at whether it adds too much overhead) https://github.com/davatron5000/Foldy960
[19:30] <Mladen> Ion it depends on your needs
[19:31] <Mladen> I’m using 12 in most cases
[19:31] <russweakley> @chad – this is a huge question and something I deal with EVERY day. I try to educate the client at the start. Explain the process and how changes can negatively affect each step. I then tryp to keep the client informed along every step, and get sign off. I also remind them at every step how changes can have impacts. And finally, we work with the client to understand that changesd are out of scope and can sometimes be included, but other times have to be saved up for a new phase.
[19:32] <Ion> Thank you Mladen,
[19:33] <russweakley> @Ion there is no perfect number of columns. It really depends on the needs of the site. I do a lot of landing pages where there is a focus on one clear call to action. These are all responsive but a single column layout. Other sites are multi-column. Sorry that there is no simpel answer  :(
[19:34] <Ion> Thank you,
[19:34] <Ion> :)
[19:34] <Tekamba> That seems to be more the case, any questions you have can have several answers, you just have to decide what works for you and the current project
[19:34] <russweakley> @Shinkaku I think you have hit the nail on the head. Use a framework for speed if it helps, customise as needed. 
[19:34] <Veronica> once have own templates in place that you build isnt it just as fast to use, take out, add in? 
[19:35] <Tekamba> Shinkaku BUT, dig through the files and make sure you understand what it is doing ( use frameworks the LEARN as well as speed up your design) so eventually “rolling your own” is just as quick
[19:35] <russweakley> Sadly, yes. There is always multiple answers. One thing I have worried about, since the early days of the web, is the assumption that there is ONE correct way to solve any problem. This is a flawed starting point  :)
[19:36] <Tekamba> russweakley AGREED!!! Too many settle in as their answer is the only answer, that is where things tend to go haywire
[19:37] <Kate> what about sizing images with CSS vs having different pre-sized images? What is lighter weight, or is that not the main concern?
[19:37] <Chris> What’s your take on hiding content when getting down to mobile size? I understand people not wanting to scroll forever, but getting different content on mobile vs desktop can be just as frustrating
[19:38] <Tekamba> Excellent question Chris! that’s something that’s been on my mind
[19:38] <Shinkaku> Of course @Tekamba experienced web developers usually have their custom frameworks, as you gain experience you realize grouping websites by type is the best way to identify project needs. Based on this, you start creating mini-frameworks
[19:38] <russweakley> @Kate We will be covering true responsive images in the next course – but yes, there is more to RWD than simply making the images fluid. The main problem is that you are still delivering the one size image to all devices. This means than small screen devices may get images that are too large and Retina devices get images that are not ideal. 
[19:39] <Kate> thank you!
[19:39] <Kate> Look forward to the course!
[19:40] <Mladen> @russweakley which framework did you use?
[19:40] <AnnaS> russweakley , the next course you mention, is that the RWD course link that was posted earlier or another one?
[19:40] <russweakley> @Chris I am generally against hiding content. But this really depends on what content. If it is adds or sidebar content that is tangental to the content, then possibly hiding may be ok. We have experimented with “open and shut” content that allows users to skim and only display if they want more.
[19:41] <HAWK> AnnaS – it’s another one – not up on Learnable yet but I think it will be early next month
[19:41] <Kate> Do you cover jQuery mobile by any chance?
[19:41] <AnnaS> ok great
[19:41] <Kate> I am thinking you would use that for the open/shut content option.
[19:41] <russweakley> The details on the next course – not yet live:
[19:41] <russweakley> Code gist: https://gist.github.com/5879688
[19:41] <Chris> Thanks. That’s what I’ve been doing lately, adding a “More” button for mobile users if they want the same content as desktop. Seems to work for now
[19:41] <russweakley> mmm.. that didnt work
[19:42] <HAWK> Yeah – it did – the details are in the Gist
[19:42] <Veronica> what is a good framework to “start” building your own from?
[19:42] <russweakley> yes, an odd solution but it is there  :)
[19:42] <HAWK> Hitting ‘show’ will display them
[19:42] <HAWK> Pasting multi lines does that 
[19:42] <russweakley> ahhh
[19:42] <AnnaS> another question – sorry for all the Qs am asking! I am a relatively beginner in jQuery – I can play with the code, cut and paste and slightly edit, but that’s it. I had a few interviews and they all want to know how strong I am in JS, which i am a total beginner. Isn’t jQuery on its own enough for websites, with all the code out there that can be reused?
[19:42] <HAWK> Otherwise you get a new line of chat for every pasted line and it’s messy
[19:42] <Mladen> @Veronica rwdgrid – WTFPL licence :D
[19:43] <Mladen> I’m started using it 2 months ago
[19:43] <HAWK> This session is flying by – if anyone is sitting on questions, please throw them into the ring
[19:43] <russweakley> @kate I do not cover jQuery mobile. This is it’s own world – important but not directly related to RWD
[19:43] <Mladen> it’s realy good for me
[19:44] <Kate> Makes sense : )
[19:44] <AnnaS> @Mladen , u use rwdgrid to build your own or use it as is?
[19:44] <Tekamba> Mladen Hadn’t seen that one before, thanks will look more into it russweakley thoughts on that one? (rwdgrid)
[19:45] <russweakley> @AnnaS again this depends. JQuery can sometimes be enough, but if the site has lots of interaction, data pulls etc, then detailed knowledge of JS would probably be essential
[19:45] <russweakley> And, in case it makes you feel better, my JS is probably worse than yours!
[19:45] <JumpStartRWD> @AnnaS jQuery is a great place to start. Trick comes when you need to do something different than what you’re able to cut and paste 
[19:45] <Tekamba> I am a STRONG cut/paste JS coder (-;
[19:45] <russweakley> I was attacked by JS as a child, and it left me scared and damaged
[19:45] <Mladen> @AnnaS both, depends on needs, but in most cases i use it as is
[19:46] <Mladen> @Tekamba np :)
[19:46] <russweakley> have I missed any questions? If so, apologies and please feel free to repost
[19:47] <AnnaS> I just have a mental blockage with JavaScript! I know I know TMI but seriously, all the functions and all of that, scare me away! I find jQuery so much easier and simpler but I know that is what’s holding me back from landing a better job, the knowledge of JS – especially with all the applications and interactivities
[19:47] <JumpStartRWD> @AnnaS SitePoint’s jQuery: Novice to Ninja is a great book – but I’m biased, of course
[19:47] <AnnaS> @JumpStartRWD ok thx – 
[19:48] <AnnaS> @Mladen thx
[19:48] <HAWK> Here you go AnnaS https://learnable.com/topics/jquery
[19:48] <Tekamba> and every person in this chat owns EVERY Sitepoint book… RIGHT?!?!? (I know we buy the physical AND digital versions immediately upon release)
[19:48] <HAWK> I do!
[19:49] <russweakley> AnnaS A great book. I would also cut yourself some slack… gradually learn as you have time. The more you play, the better you will get. Confidence will grow  :)
[19:49] <Tekamba> Top shelf of our code/design library… now if I could just find the time to read through them all (-:
[19:49] <AnnaS> Thank you russweakley and HAWK and JumpStartRWD for your help. 
[19:49] <russweakley> Sitepoint add sponsored by @Tekamba  :)
[19:49] <Shinkaku> Nowadays it’s easier to become a web developer, due to the incredibly amount of snippets and how-to’s available. However, one must not forget we should learn and understand, instead of simply find and use.
[19:49] <Kate> Have you had clients express concerns about a responsive design – have you had to do any convincing?
[19:49] <Shinkaku> I usually encourage people to learn programming logic before jumping to copying & paste code
[19:50] <Tekamba> I’ll contact them about payment (-:
[19:50] <Mladen> My opinion: Programming can’t be learned from book(can but not good enough), i learned PHP, MySQL, jQuery, Kohana, CodeIgniter, Linux, JS.. on test projects
[19:50] <Shinkaku> It’s better to understand “why” first than “how”
[19:50] <russweakley> @Kate as mentioned earlier, I try to educate the client on why RWD is a good option. Most clients are easily convinced when presented with the data on mobile, and the future of devices (exploding numbers and different types of tablets)
[19:50] <Tekamba> I typically cut/paste, make it functional, then break it and try to make it do different things to help me better understand where it started and what it is doing
[19:51] <AnnaS> I personally learn better while using it too – but i was at an interview last week and they wanted to give me a JS test – I told them that I won’t be able since I don’t write JS – totally de-motivating !!!! Ggggrrrrrr
[19:51] <Tekamba> that is when learning a new aspect of some language
[19:52] <russweakley> The funniest RWD sell I had was in a board room where the client wanted an “app” but they really needed a site. I held up an ipad and a phone with a demo site, and turned both devices on their side. All I siad was “would you like a site that did this? We could do this without making an app”. They all said “YES”
[19:52] <HAWK> 5 minutes left people, any final questions?
[19:52] <Tekamba> AnnaS I would have taken the test (letting them know when handing it over) how you felt you did, it would help you to learn WHAT they are looking for so you know what areas to focus learning on, AND you may surprise yourself with your abilities
[19:52] <AnnaS> i asked a lot – thx
[19:53] <Kate> Brilliant!
[19:53] <russweakley> @AnnaS that is the point of this – so thank you for asking them all – keeps me on my toes
[19:53] <AnnaS> I do some online tests on smarterer and surprisingly i got some right! I hated myself for not having done it but oh well. I can only go fwd no back!
[19:53] <HAWK> Anyone have any useful resources?
[19:54] <Veronica> Sitepoint books 
[19:54] <Mladen> Start nodejs chat, i have 1000 questions about it, i started learning it 10 days ago :P
[19:54] <AnnaS> http://smarterer.com/
[19:54] <HAWK> Hehe
[19:54] <JumpStartRWD> AnnaS – smart employers won’t let that hold them back from employing you. Ask them to show you the answer. Follow along and ask questions. Smart employers are looking for culture fits – it’s a lot easier to learn to to code than it is to learn to fit in :)
[19:54] <Tekamba> Is there much point for many apps anymore? My thinking is RWD site would resolve 90%+ of the requirements
[19:54] <HAWK> I’m happy to hook up another Nodejs chat Mladen
[19:54] <AnnaS> oh yes last thing, what’s all the nodejs and backbone and all of that? so many different variotions> does one need to learn all or what????
[19:55] <AnnaS> Thx JumpStartRWD – 
[19:55] <russweakley> @Tekamba that is an interesting question. I have found that apps are vital in some cases – where there is specific need. But, as you say, a lot of clients think they want an app, but the really ned a RWD.
[19:55] <Shinkaku> Copy, paste, break, tweak, customize, improve. Practice leads to perfection.
[19:55] <Tekamba> When I hire, I almost never worry about whether the applicant got the answer right, I usually just looked to see if they had the ability to think through a problem (if that makes sense)
[19:56] <JumpStartRWD> @Tekamba Native Apps can still do things Web Apps can’t yet. But it’s changing. Like access the camera and file system 
[19:56] <russweakley> AnnaS a slight over-simplification, but think of them as frameworks for JS. They are often designed to help you write more efficiently.
[19:56] <Tekamba> Shinkaku (missed a few steps) Copy, paste, break, curse, restart, break, curse, restart, tweak, customize improve
[19:57] <Shinkaku> :)
[19:57] <AnnaS> Tekamba yes makes sense and I think sometimes am too honest to say I don’t know such and such language or code but I am learning it and very comfortable doing so. 
[19:57] <russweakley> @Tekamba you missed a step somewhere… “burst into tears”
[19:57] <Shinkaku> lol
[19:58] <HAWK> Couple more mins – speak now or forever hold your peace ;)
[19:58] <AnnaS> peace!
[19:58] <Tekamba> russweakley figured that one was universally acknowledged, along with “curl up into fetal position in corner”
[19:58] <Shinkaku> rofl
[19:58] <JumpStartRWD> @Tekamba you missed “smile” and “cheer” and “WIN”
[19:58] <russweakley> indeed. Both are part of my daily routine
[19:59] <Ramy> russweakley so that means most of websites you make now are RWD ?
[19:59] <russweakley> yes!
[20:00] <Shinkaku> @Ramy that’s the way it is now, it saves you a lot of time.
[20:00] <Veronica> We (Tekamba) just want to thank you for your time and knowledge on all this russweakley and HAWK
[20:00] <JumpStartRWD> Ramy Visitors think all Websites are – its just about how good they are at responding
[20:00] <HAWK> That’s a wrap my friends. Thanks heaps for joining us today. Next time is Git.
[20:00] <russweakley> @Ramy sorry, that was a very short answer, but in the chat above there have been a few referneces to this. Almost all my sites are now RWD. Apart from a recent odd client  :)
[20:01] <Tekamba> Have we mentioned Sitepoint books are a GREAT resource?
[20:01] <AnnaS> thank you everyone. Thx Tekamba for your last answer too
[20:01] <HAWK> and if you want to sign up for email notifications of future sessions you can do that here https://www.facebook.com/sitepoint/app_115462065200508
[20:02] <russweakley> all good
[20:02] <HAWK> Have a great day everyone