Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,195,537 members, 7,958,653 topics. Date: Wednesday, 25 September 2024 at 07:47 PM |
Nairaland Forum / Science/Technology / Webmasters / Responsive Web Design Tutorial From Scratch (6945 Views)
What’s The Difference Between A Mobile Website And Responsive Web Design? / JavaScript Tutorial From The Scratch Brought To You From Part 2 / Javascript Tutorial From The Scratch Brought to you from Part 1 (2) (3) (4)
(1) (2) (3) (4) (Reply) (Go Down)
Re: Responsive Web Design Tutorial From Scratch by Nobody: 5:58am On Oct 19, 2013 |
^^So this boys no sabi css and they want to jump to rwd? Hmn. . |
Re: Responsive Web Design Tutorial From Scratch by shcash: 8:31am On Oct 19, 2013 |
*dhtml: Let's behave maturely and allow this tutorial follow smoothly. BOYZ feel free to ask ur Questions one day u will become MEN. Thumbs up Gplus. 1 Like |
Re: Responsive Web Design Tutorial From Scratch by Nobody: 9:14am On Oct 19, 2013 |
Sooo is me that am not acting maturely? Abeg waka pass jor small boy like you, awaiting G-plus next post. . . |
Re: Responsive Web Design Tutorial From Scratch by Nobody: 9:58am On Oct 19, 2013 |
@Dhtml Pls Don't Derail this Thread.. Newbies have rights to ask questions.. @G+ Nice Tuts.. |
Re: Responsive Web Design Tutorial From Scratch by Nobody: 10:28am On Oct 19, 2013 |
I apologize for thinking i am derailing the thread (G-plus is still my oga in layout and css mind-you), i was trying to be as silent as possible, because i am learnin on this thread to. Lets keep it quiet here, thanks mister class-captain, i will return to the backseat quietly. . |
Re: Responsive Web Design Tutorial From Scratch by joomlaman(m): 11:17am On Oct 19, 2013 |
GraphicsPlus: ^Ok. The class of .noRight cannot work elsewhere unless u place it under class of .our_process and the class of .footer_details. The class of noRight is simply overwriting something, which is margin-right given to the above two divs. In css, the second styling is more important than the first except on few occasions. So the last always overwrites the first. OK got it! Carry on.... |
Re: Responsive Web Design Tutorial From Scratch by GraphicsPlus(m): 2:34pm On Oct 19, 2013 |
Ok. Let's continue. Here, I will try to explain the css styling line by line. body{ This is it. We now have a good looking web page. But if you try resizing your browser or try viewing it online with mobile device, you will be greeted with a horizontal scrollbar which shows that it's not responsive. But making it to be responsive is a piece of cake. Next, we will dive into RWD proper and show us how we can make the web page to display perfectly on every mobile device no matter how small the device is. I will teach us the concept behind RWD. Fortunately for us, the concept is pretty simple. Cheers. 3 Likes |
Re: Responsive Web Design Tutorial From Scratch by Nobody: 4:21pm On Oct 19, 2013 |
Astute and very clear too. Gracias |
Re: Responsive Web Design Tutorial From Scratch by joomlaman(m): 8:48pm On Oct 19, 2013 |
Just as we await RWD being applied on the project, I viewed the project (www.ctrlshiftstudios.com/RWD) on ma IPAD and everything was just screwed and messed up website! Now, let’s see how RWD will fix that up! For those wey no get Iphone, IpAD, or SmartPhones you can try viewing the project (www.ctrlshiftstudios.com/RWD) using these online IPhone and IPAD testers…. iphonetester.com ipadpeek.com quirktools.com/screenfly So you will appreciate RWD latter!
|
Re: Responsive Web Design Tutorial From Scratch by Nobody: 9:47pm On Oct 19, 2013 |
Mister Joomla, we have not reached the end of the class, why are you jumping the gun nao? |
Re: Responsive Web Design Tutorial From Scratch by adewasco2k(m): 11:49pm On Oct 19, 2013 |
*dhtml:He meant no harm, just trying to say the site is not yet responsive and awaits to see it when its fully responsive. I think he just want to make it clear to those who might think Gplus is done. |
Re: Responsive Web Design Tutorial From Scratch by Nobody: 7:36am On Oct 20, 2013 |
Oh i see, that is true, g plus started from a non-responsive layout and is gradually making it responsive step by step (from my own understanding) |
Re: Responsive Web Design Tutorial From Scratch by joomlaman(m): 8:32am On Oct 20, 2013 |
@adewasco2k, You got my message clearly! Loading the url on a mobile device, it appear toooooooo wide and some layouts crossing/overlapping each other. Waiting for G+, to start applying RWD so all that will be fixed up on all devices including ma "Tecno Phanthom IPad" |
Re: Responsive Web Design Tutorial From Scratch by Nobody: 8:40pm On Oct 20, 2013 |
So there is a device called that? Na wa o, rwd people get work to do o. Chai, the rwd site must work on all devices including china devices? 1 Like |
Re: Responsive Web Design Tutorial From Scratch by wisemania(m): 8:52pm On Oct 21, 2013 |
RWD oro ta n balo...... |
Re: Responsive Web Design Tutorial From Scratch by Nobody: 9:12pm On Oct 21, 2013 |
'trollin |
Re: Responsive Web Design Tutorial From Scratch by emmyw(m): 8:29am On Oct 22, 2013 |
I have written the codes in my system,so how do i combine css and html? Cos i wrote the code differently .css and .html extension. |
Re: Responsive Web Design Tutorial From Scratch by adewasco2k(m): 8:55am On Oct 22, 2013 |
emmyw: I have written the codes in my system,so how do i combine css and html? Cos i wrote the code differently .css and .html extension. All you need is already in the head tag: <link rel="stylesheet" href="css/style.css"/> This is linking to the css file irrespective of where is is, in the above your index.html will be in a folder which has another folder name css then your css file named style.css will be inside. I think you should already know this if not please go learn html and css basics first. |
Re: Responsive Web Design Tutorial From Scratch by Nobody: 9:13am On Oct 22, 2013 |
men you guys are way above me, please advice me, am a novice in computer programming, which programme or how can i start my programming career, because i wanna tow that line please. |
Re: Responsive Web Design Tutorial From Scratch by emmyw(m): 11:17am On Oct 22, 2013 |
adewasco2k:Ok thanks bro,i have seen it |
Re: Responsive Web Design Tutorial From Scratch by emmyw(m): 11:24am On Oct 22, 2013 |
Who knows the codes of gurusreeps(dot)com,i want to design the site exaltly.please reply asap. |
Re: Responsive Web Design Tutorial From Scratch by GraphicsPlus(m): 11:42am On Oct 22, 2013 |
Ok. Let's go on and finish this tutorial. Before we dive into RWD, I want us to remember that our base web page width is 1000px. This means that devices with width of 1000px and above will display our web page perfectly. Our problem now is how to accommodate devices with width of 999px and below. To deal with that, we are going to comfortably do it with css3 @media query. Let's get started. First, we will add the meta viewport below to the head of our html document. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> This is important because most mobile browsers scale html pages to a wide viewport width so it fits on the screen. We use the viewport meta tag to reset this. The viewport tag above tells the browser to use the device width as the viewport width and disable the initial scale. After adding the viewport meta tag to the head, we now go back to our css file. I want you to copy all the css codes to paste them on another blank page of your text editor. This is how I work so I will not have to scroll up and down checking the codes. Paste the codes in another tab and dont save it. After applying the @media query, we will then highlight the codes and cut and then go back and paste them inside our style.css. Let me at this point tell us the whole concept of media query. CSS @media query is like writing a conditional statement. It's like writing if yes, do this thing, else do another thing. Again, media query codes come at the bottom of our main styling. This is important because what media query is doing is actually overwriting the main styling to serve other devices. In applying rwd to this web page, we will be dealing with these device widths: 0 to 480px 481px to 800px 801px to 1050px (we will add extra 50px to give it good breathing space) So we will be dealing with these three sets of @media query. Let's start with 0 to 480px. At the very to of the stylesheet we copied and pasted on a new tab, let's write this: @media all and (max-width:480px){ cut the stylesheet again and paste it inside this curly bracket} Now, we will start the manipulations. First, we need to be aware that the things that are in our main stylesheet which we will like to retain, should be deleted. This means that what we dont need to restyle should be deleted. For instance, we have no business with the body tag and other stuff like background color that we dont need to change, and so we will just delete them from our media query to minimize file weight. Again, @media query works with percentage instead of pixel. Pixel is rigid while percentage is flexible. So in dealing with the max-width of 480px, we have to overwrite the div we floated to left and right. You know in css, we have float of left, right and none. We will be using float:none to overwrite the float:left or float:right we did earlier. Before we go on, I want you to add this line of code: img{max-width:100%} This is important. It will make the images to scale proportionally. This means that the images will never be more than their parent containers. Therefore, our header image that is 1000px in width will be forced to display normally at the screen width of 480px. We will start from top and walk our way down. We will begin from .nav Those ones that come before the class of nav dont have anything that will disturb us. So we will retain their styling as it is in the main styling above and to tell css that we are comfortable with the way they are, we will not touch them. This is why we deleted them from our @media query max-width of 480px. So let's start from the div class of nav. I will explain the codes line by line. @media all and (max-width:480px){ Download the @media query codes for 480px here: www.ctrlshiftstudios.com/query.txt If you download the codes and add them under the last code in your style.css and refresh. If you view it with a mobile device from 480px down or you resize your desktop browser to 480px, you will get this layout as shown on the image below. I will see you soonest. Please study the codes and try messing around with the whole thing. Cheers. |
Re: Responsive Web Design Tutorial From Scratch by adewasco2k(m): 11:54am On Oct 22, 2013 |
^nice |
Re: Responsive Web Design Tutorial From Scratch by emmyw(m): 1:29pm On Oct 22, 2013 |
emmyw: Who knows the codes of gurusreeps(dot)com,i want to design the site exaltly.please reply asap.can someone answer me. |
Re: Responsive Web Design Tutorial From Scratch by Nobody: 3:24pm On Oct 22, 2013 |
emmyw: can someone answer me. As much as Ur Question derails the Thread, I'll like to answer u before u wreck further Havoc.. The site is an SMF site.. Google about Simple Machines Forum.. You Can't code that kinda ish cuz u gotta be advanced.. It only needs a Few Tweaking for you to start it running.. |
Re: Responsive Web Design Tutorial From Scratch by emmyw(m): 4:33pm On Oct 22, 2013 |
Djangocode:how do i set up site like that exaltly? |
Re: Responsive Web Design Tutorial From Scratch by Nobody: 9:18pm On Oct 22, 2013 |
emmyw: how do i set up site like that exaltly?He already told you that its running on smf.so if you can edit php scripts good.then you can edit them to your choice |
Re: Responsive Web Design Tutorial From Scratch by GraphicsPlus(m): 11:24am On Oct 24, 2013 |
Today, we conclude our tutorial on designing responsive web page from scratch. I have done the @media query that will take care of 481px to 800px and 801px to 1050px. The web page is completely responsive right now. You can view it with any mobile device and it will display perfectly without a horizontal scrollbar. Basically, we used max-width of 100% on all images. We used percentage instead of pixel for the width and we floated to none some of the elements we floated to either left and right initially. If you look at the @media query codes for 801px to 1050px, you will see that we maintained some of the floated divs, but we changed the width from pixel to percentage so that it will be fluid. Download the @media query for 481px to 800px and 801px to 1050px here: http://www.ctrlshiftstudios.com/query2.txt Paste it under the @media query of max-width of 480px we did previously. Save and refresh your browser. Then go ahead to resize your browser and see how responsive the web page has become. Go on and study the codes and try playing around with the whole stuff. You can see how the web page rendered on different mobile devices here: http://www.responsinator.com/?url=http%3A%2F%2Fctrlshiftstudios.com%2FR-W-D%2F Or you can view the responsive web page directly here: http://www.ctrlshiftstudios.com/R-W-D Cheers. |
Re: Responsive Web Design Tutorial From Scratch by emmyw(m): 1:01pm On Oct 24, 2013 |
Thanks,What next? |
Re: Responsive Web Design Tutorial From Scratch by adewasco2k(m): 7:18am On Oct 25, 2013 |
emmyw: Thanks,What next?Suis fini |
Re: Responsive Web Design Tutorial From Scratch by NnamdiN: 7:25am On Oct 25, 2013 |
emmyw: Thanks,What next?newbie guys I guess Css and html time. Is there a thread for those two? |
Re: Responsive Web Design Tutorial From Scratch by emmyw(m): 8:35am On Oct 25, 2013 |
NnamdiN: newbie guys I guesssometimes people will be looking for were they will exchange words with people,well NnamdiN,you can visit my forum below,and if you want me to design a site practically,i can do it,but you have to know that you likes people that brag and boast,i'm sure if they give you pc,you can't design a site without seeking for nairaland help.watch the way you talk,never talk too much cos you are a man.and lets this argument stop,i don't want it anymore. |
12 Seo Mistakes To Avoid If You Want To Rank Higher / Top 5 Most Unprofitable Niches For Google Adscence / 2014/2015 Waec Gce Time Table
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 100 |