Responsive Design

Get Started
1

One of my projects in the future is to design a friends website, at the moment he uses one of these build your own websites which he pays monthly for. It is very basic and I have notice that the mobile version of this website is shoddy.

I am intrigued to find out how a website is made responsive-without going into the nitty gritty as I will learn this in the future, but what is done? Are there two separate websites made or is there certain code that makes a website behave in a certain way when displayed on a tablet or mobile device?

Thanks in advance :slight_smile:

2

Here’s a good read. http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html

3

It’s most done with CSS. There are new features of CSS that set styles depending on the width of the screen, meaning you can style a layout appropriately for various screen sizes. Hence the “responsive” description.

4

Wow! Thanks very much for pointing out this article, after going through this article I understand how its done. I thought it was going to take me a while to grasp the concept of “media queries” but I can see how simple it is now. Would recommend anyone that has the same problem as me to read this.

As I am intrigued to learn how a website is built, to aid my learning, I view a lot of the websites code to see how it works. I have come across the @media only screen code quite a few times now, and now I understand what the code executes.

Thanks again!

5

So what would be the screen size I should set up in order for the css code to work on mobile phones?
Thanks!

6

I usually just use “device-width” size in the <meta viewport…> clause and then use css that allows the content to automatically resize. Sometimes I use @media queries to specify different css for different device widths.

7

Wow, I am in the exact same boat!
Have gotten pretty good at coding but was thinking responsive design was way out there.
Searched and searched through tutorials that I couldn’t even start to wrap my head around…discouraging.

Then found this:
Create a Responsive Website Using HTML5 and CSS3 - Video Tutorial

And I was like whaaaaa? That’s such a simple concept!
Quite fun as well once you get the gist.

Hope this helps as well, the guy urges you to type along with him which I recommend, as it is also an excellent refresher course on building a basic page.

8

Awesome, thanks for that link, will have a go at it in the near future. It looks a lot easier than what I first thought!

9

Add meta view port name and content in the header position of html file.

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

and then add the media query for you devices.

@media screen and (max-width: 980px) {
/* css coding for responsive*/
}

and
@media screen and (max-width: 480px) {
/* css coding for responsive*/
}

if you want change the width size based on your device.

10

Kind of surprise that no one mentioned to use Bootstrap to make responsive design.

11

We are much too kind to do that to him. :stuck_out_tongue:

12

I don’t know what we were thinking… although this thread is old, it is not that old! :lol:

13

So what’s the problem with Twitter Bootstrap, have used it in the tutorial as mentioned above, does it have problems?

14

Nothing, per se. I just don’t like frameworks, because I like to start with a blank canvas and I don’t want to try to mess with a bunch of pre-written code. But that’s just me, I guess.

15

Not just you.

I usually avoid frameworks because they tend to necessitate a “convention” and I am used to, and hence prefer, more liberty.

But - I think if you are more intrested in RAD then learning a framework that works for you will save you time in churning out websites.

16

I don’t like the idea of having lots of tools between me and the product—tools that you have to learn and that are always changing, updating, doing out of date etc. Lots of sites are build on Bootstrap, WordPress etc… and then they have extra layers of complexity/breakage each time there’s an update. Just seems a crazy, unnecessary mess to me.

It’s hard enough keeping up with core technologies, without having to keep up with the ever-changing array of unnecessary tools.

17

Right ok fair points.

Just starting out in web design I’ve found them useful. But will look into starting from
A “blank canvas” in the future. You don’t know of any tutorials or websites where I can see this is action, from
Start to finish?

18

There are tons of books, video courses, YouTube vids etc. on CSS, which cover how to construct a layout from scratch. Really any CSS learning resource should do the job.

It’s not for me to say you shouldn’t use a framework, but I’d advise at least learning how layout works before relying on a crutch like Bootstrap. You may find (like me) that you are better off without something like this.

19

I’ve seen a lot of tutorials, the amount of them is overwhelming when looking through them.

I have tried learning from books but find online tutorials a lot more effective. Didn’t know if there was a popular youtube channel or website that most people tend to use