Responsive Design

Synode

Hi all,

Does anyone have any recent book (or website) recommendations on designing responsive websites. Preferably one that includes Bootstrap's grid system. I recently hacked together a site and only got it over the line thanks to some help on stackoverflow (the navbar was killing me).

However, someone has shown me problems when the site is accessed using the Google app on iPhones (or after clicking on a link in an email and remaining within the email app).

I was told to set the viewport as per below but this has increased the font size on mobiles and destroyed my Bootstrap grid system (even though I used sm throughout).

<meta name="viewport" content="width=device-width, initial-scale=1.0">

So I really need to improve my skills around designing sites for multiple sized screens. I also want to know and follow up to date best practices in this area. Thanks a mil

TommyKnocker

I found this youtube very good with good explanations

Synode

Thanks for that. Will look at it later

groupthink

Hey,

That viewport line shouldn't interfere with your implementation of Bootstrap because the Bootstrap framework needs it to work normally ( it basically tells the browser to not zoom out and show the whole page when in mobile, because mobile content viewing is handled by the framework's media queries). Check any website in the bootstrap expo area and they will all have it in the header.

So therefore the problem is somewhere else & unfortunately you have not given enough info to allow me to help you. If you post a link to your website it would be easier to debug.

Synode

groupthink wrote: »

Hey,

That viewport line shouldn't interfere with your implementation of Bootstrap because the Bootstrap framework needs it to work normally ( it basically tells the browser to not zoom out and show the whole page when in mobile, because mobile content viewing is handled by the framework's media queries). Check any website in the bootstrap expo area and they will all have it in the header.

So therefore the problem is somewhere else & unfortunately you have not given enough info to allow me to help you. If you post a link to your website it would be easier to debug.

To be honest, I'm putting the problems I had down to poor coding on my behalf. I should have used col-xs values but as far as I recall I used col-sm values.

I think I got away with it by not setting the viewport value. When set, it ruined all my grids. When I don't set, the site works on mobile in most browsers bar the Google App (on iPhone) & when you access it from an email app.

I didn't have time to go back and adjust all the grids so to get around it I just didn't set the viewport. It will do for the moment but I'll go back at some stage and adjust.

The site is www.pawchallenge.com if you want to have a look

groupthink

Took a quick look. The website is not displaying in a responsive way on mobile. The purpose of the Bootstrap framework is to allow a website to be responsive (adjust its content to fit various size devices - no zooming required). If you open your website on mobile it displays like a non-responsive website, meaning you are presented with a view of the webpage in full (zoomed out) and you need to pinch-to-zoom in just to make the content visible. To read the text you need to zoom in and then scroll horizontally as you read each line (with full width text). This can be pretty frustrating for the user. This is happening because you omitted that viewport line form the head of your page.

If you are happy with the site on mobile, that's fine, but just thought I'd let you know.

Synode

groupthink wrote: »

Took a quick look. The website is not displaying in a responsive way on mobile. The purpose of the Bootstrap framework is to allow a website to be responsive (adjust its content to fit various size devices - no zooming required). If you open your website on mobile it displays like a non-responsive website, meaning you are presented with a view of the webpage in full (zoomed out) and you need to pinch-to-zoom in just to make the content visible. To read the text you need to zoom in and then scroll horizontally as you read each line (with full width text). This can be pretty frustrating for the user. This is happening because you omitted that viewport line form the head of your page.

If you are happy with the site on mobile, that's fine, but just thought I'd let you know.

Cheers. I could see the difference when I added the viewport. All the text was bigger and better. But it played havoc with my grids. Lesson learned and I'll ensure I do it properly going forward.

Are you a front end developer? Any good resources or books that are worth checking out? It's not my strong point so I want to improve my skills

groupthink

Synode wrote: »

Are you a front end developer? Any good resources or books that are worth checking out? It's not my strong point so I want to improve my skills

Something like that yeah, I've worked quite a bit with WordPress, Responsive design and the Bootstrap framework.

tbh Once books on these subjects are published, they are already out of date. All the info. you could ever need is available online (Video Tutorials, free website templates, etc.).

Best of luck.

ThrowinShapes

I'll give a loose outline to a process I use, then offer up some resources on learning more.

I've found it helpful to think of a website as completely responsive, until we start adding CSS (not 100% accurate, but it gives you a starting point)

The first focus is the markup - structuring your information in plain HTML, and not thinking too much about CSS. You can go back later and change things around if needs be.

After that, you'll insert your grid. The Bootstrap grid at it's core is identical to any other grid system out there - a row with columns. The approach from here would be to build from small to big. If you're going to use something like Bootstrap, it's helpful to pore through the source code and understand what's going to happen with those classes, and when (breakpoints).

Going from small to big has a few advantages. For example, say you have a column with the class 'col-xs-12'. This means it'll be 100% from small to large, until you say so. That's your small layout sorted. Then you might add a class of 'col-md-6' which overrides this when we hit the medium breakpoint. You're only ever building on to what's already there, rather than taking away. It also lets you focus on the content a bit more, which drives the design.

I've followed this process because I get easily overwhelmed with the amount of choices we have on the front-end. By starting with the absolute basics and building on in stages, it helps me visualise where I'm going with something.

I hope that's of some use.

For learning more there's many great resources:
http://responsivedesignweekly.com/
http://www.smashingmagazine.com/
https://css-tricks.com/
http://css-weekly.com/

Also looking at other people's code - fire up a website, inspect some elements and see how the site was put together. You'll start noticing patterns and you'll eventually know by looking at it before seeing any code.

Synode

Thanks a mil ThrowinShapes.

Very helpful. I'll dive into those sites asap