My Thoughts on Responsive Frameworks, Good, Bad?

[MiloBoz]

Good info Mike.  I agree we should be careful with responsive design.  A good way to avoid many of these potential problems is to use the @media min-width/display none tags to make the site completely dynamic..  This allows you to display or hide any page elements on any device.  

So instead of having to design the whole site to be able to scale to one device with every single element, you can make responsive the elements that scale well, hide the ones that do not, and create new elements for different devices if necessary.  

So with your button example, instead of displaying the oversized button on the normal website, you would display the normal size button, and then hide it on the mobile website with css.. and in its place put a larger mobile friendly button which would only show on mobile devices.

Not a lot of sites are doing this yet   If you are interested look into the wordpress plugin called ZigWidgetClass which allows you to do this with your widgets.  I'm getting ready to offficially launch my site soon and am working on this very thing, I will e-mail you when I have it in place to get your feedback.  

[AllanLange]

Hi Mike, I respectfully disagree that the visitors doesn't care about the page being responsive. Because the visitors/users like to have the ability to switch device and to be able to view the website on the go on their phones/tablet. However I do agree that many sites begin looking templatized.

[KrisJolls]

With all the stress on designing for mobile first, which is a great concept, I’m afraid some make little changes by time they make it to the full screen size of a desktop. Large buttons, plain headers etc.

A full size site can hold a lot more content than a mobile device. Many need to take advantage of the media queries to add and remove elements as the sight scales instead of having the full screen site look just like the mobile version. Button don’t all need to be 100% the size of it’s container, billboards can be more engaging the user experience should be fuller on the desktop.

Great topic Mike. Again its goes back to understanding the ui/ux of web design along with html and css.

[esojanep]

Great video Mike! I agree that a lot of sites out there are looking very templatized. However, frameworks such as Bootstrap and it's easy to implement responsive grid system, is very useful for efficient coding (just discovering this myself). But at the same time, I still prefer to take the time to open up Photoshop and create an inspiring mock up that's not dictated by a template. Unfortunately, responsive design is here to stay and it's just another headache we have to deal with. 

[alonl]

You're not alone Mike. Totally agree. Always huge user interface where is hard to navigate. Not enough engaging UI (colors, textures and photos) and UX.

[ronaldjohnson]

Mike, I have just started to use Bootstrap 3  to enhance my responsive web design skills.  I think a lot of designers and developers feel that they must keep up with the "latest technology" including myself. But you are absolutely correct, frameworks like bootstrap 3 gives a lot of the sites a cookie cutter look.

[fullycharged]

I noticed that too. A lot of websites look very similar.

I was asked to build a website for a client some time ago and was looking to buy a template, and what I saw there was very little layout variety among responsive templates. I couldn't find what I was looking for, ended up building from scratch.

[daytripper]

To me responsive sites are a must since a very high percentage of people are on mobil devices. I find it frustrating when going to a NON responsive site and the content is not even readable because of overlapping text etc. However I agree that they  seem to look very template like.

[dougieladd]

Hi Mike - Definitely see what you mean... especially with twitter boostrap. You can spot a bootstrap site a mile away...

I think it's ok to use a framework, and lets be honest a huge percentage of people are now viewing the web on mobile devices MOST of the time... so responsive designs are an important part of design now and will not go away. Having said that though larger companies are viewing sites on HUGE boardroom screens now. So design solutions sometimes need to be viewable on huge, as well as small devices. If you can create a design that is viewable across the board using a framework then great.

However, use your creativity. If you're going to use a framework use it like any other tool.... create your own custom stylesheet and be more creative with your design without relying on the framework. They have their use without doubt... just don't get stuck in the grid... if you know what I mean.

[KevinPichette]

Absolutely agree with what you are saying. Nicely said.

[OfficialDevTips]

I understand the sentiment here, but I feel you are putting the blame on the framework, when it should be on the designer.

Bootstrap and Foundation are — by their very namesakes — starting points. If the site that uses bootstrap looks like the bootstrap docs (and I'm not arguing that they are not easy to point out) then it's the designers fault, not the framework.

Now maybe these frameworks are too prescriptive in their styles, granted. But the designer should be skilled enough to work past that. Not doing so is just amateurish. In time that designer will either quit, or level up. We all were there once.

The first versions of these frameworks were more explicit in their purpose as being a rapid-prototyping tool. Perfect for more programmery types that get more satisfaction from function than style. They could prove a functional idea before they needed spend time and effort on the front end and basic ui components.

My company had a prototype using bootstrap before I came onboard. It was enough to get funding. As soon as I was hired I removed it though.

On a personal note, I never use them. I feel that they are great to teach the next generation correct principals, but once a designer can move past them, they will see a significant gain in quality and understanding.

Frameworks are like training wheels. No need to shame a kid who's learning to ride. But if that kid has been riding his bike for years and never takes them off, well ... that's who this video is talking about.

[RachidAhitass]

Ok mike nice to see you again on a new video, but I may agree and I may not, because, the Responsive design is an Art on its own, and caring on the in and out of this Art are a part of the UX, and as you may know by know a lot the well-known frameworks are mobile first, which make them care for small devices first, and go up.

[Poustman]

I'm starting out on Web Desing as an beginnner, The frameworks from what you mention: It should be relied on as an tool not an crutch. To be honest, I think it as an useful tool and very useful when learning Web Design but you have to know at least some basic HTML and CSS.

Good if you want to build portfolios sites, Practice ones or doing low-budget clients and using as an template to get creative from it. Bad if you heavily rely on it, and if i have to use HTML, CSS or Javascript without the framework to build customize sites that are cookie-cutter. I would be in trouble.

[FerdausAmzah]

Agree with you.. but do share your thoughts on mobile versions as opposed to responsive. Coz on CMS'es you can get the mobile version down to template and load up the same content, which wouldn't affect google ranking so much.

[MNIronAndGrain]

Great video! I hope you don't mind if I share my thoughts.  The framework look is an issue of code before design I think.  You are doomed If you pick a framework, look at all the features, look at the examples using that framework and then start designing.  Design first, then pick the right tools for the build.  The framework works for you, don't let it boss you around.

[hamidasiddika]

Hi Mike! You are absolutely correct. I saw very popular site change there site as responsive design, what looks very bad. if you visit the site you gonna be   

[SylviaAdamsEP]

Hi Mike - I just viewed this post for the first time today. Can you post links to some of the websites where you feel they "got it right" with responsive web design?

[JasonMiller]

Been focusing alot on responsive web design the last few months and what I've noticed is that there is no practice yet so to speak. A lot of people are still focusing on desktop first and mobile as an after thought. I really don't think this is the way of the future since mobile is beginning to overtake desktop as the way people browse the web. Simply hacking your design to work on mobile often has some mediocre results in terms of design and layout. A lot of sites I've viewed, I assume the designer/developer has gone this route and most often than not the design turns out bad on mobile devices. I'd really like to hear your thoughts Mike on what you think the ideal approach should be when creating a website that is device agnostic (looks and feels that it was designed for the device the person is using to view it).

[MelissaSimswebdesign]

Great Information, thank you. I just experienced this today when I was looking for the simple Contact link. This particular page was way to busy. 

[wathah]

I always install analytics or similar on a finished desktop and tell my clients to watch their their mobile traffic before even offering them a mobile version of their site. Also not a big fan of responsive.