Stats: 3,186,770 members, 7,930,637 topics. Date: Sunday, 25 August 2024 at 12:31 AM |
Nairaland Forum / Science/Technology / Webmasters / How To Create Responsive Website From Scratch (2633 Views)
Checklist For Starting A Successful Blog From Scratch / How to embed video in smf / Who Can Hack This Style? Or Create Responsive Prosilver? (2) (3) (4)
How To Create Responsive Website From Scratch by maekhel(m): 10:48am On Nov 28, 2014 |
Sometimes ago I wrote on Responsive Web Design where I discussed the need of having a responsive website that scales well on every devices and some of the fundamental of responsive web design. I today’s tutorial, we are going to put those fundamentals into practice. Am going to show you How To Create Responsive Website From Scratch. Though there are lots of frameworks like Twitter Bootstrap, Foundation etc, that can be used to create a responsive website with less work. But in this tutorial, we are going to create responsive website from scratch. You can read my other posts on Twitter Bootstrap. Let get this started. For the purpose of this tutorial we will be considering devices with the following screen sizes. 320px We will be needing just two files: index.html and styles.css. A good thing about responsive web design is that you can use a single css file and the file will contain all the styling for all the targeting devices. Open your favorite text editor and paste the following code snippets in it and save as index.html. continue reading: http://tutorialslodge.com/create-responsive-website-scratch/ |
Re: How To Create Responsive Website From Scratch by Nmeri17: 5:13pm On Dec 17, 2014 |
why are there no comments after 90+ views?? is this the diaries section ![]() |
Re: How To Create Responsive Website From Scratch by Nobody: 6:02am On Dec 18, 2014 |
Here in botswana, we dont comment of diaries as it is expressly forbidden unless the aforementioned diary hits FP. |
Re: How To Create Responsive Website From Scratch by cbrass(m): 10:45am On Dec 18, 2014 |
Ok I will comment....hmmm but who will afford to wait till am tru with their design from scratch and can they afford it ![]() ![]() |
Re: How To Create Responsive Website From Scratch by maekhel(m): 12:20pm On Dec 18, 2014 |
cbrass:that true sha...bt its gud to know how to (just incase) 1 Like |
Re: How To Create Responsive Website From Scratch by cbrass(m): 6:50pm On Dec 18, 2014 |
maekhel: Of course |
Re: How To Create Responsive Website From Scratch by Nobody: 10:05pm On Dec 18, 2014 |
In france, we are already use Google Web Designer to build responsive websites free of charge. |
Re: How To Create Responsive Website From Scratch by Nobody: 11:57am On Dec 19, 2014 |
dhtml18: U sef. Wetin u dey claim? From bostwana to france? No dey talk anyhow |
Re: How To Create Responsive Website From Scratch by Nobody: 4:16pm On Dec 19, 2014 |
pureguide:I be mister world-wide, I can travel 2 countries in one day! |
Re: How To Create Responsive Website From Scratch by Ajibel(m): 10:37pm On Dec 19, 2014 |
My challenge with RWD has been how to handle responsive images. Most times, I use display:none though a JS solution exist buh then I hope we get the <picture /> tag someday. |
Re: How To Create Responsive Website From Scratch by Nobody: 10:38pm On Dec 19, 2014 |
dhtml18: Nawa o. So were r u now? |
Re: How To Create Responsive Website From Scratch by Nobody: 6:32am On Dec 20, 2014 |
pureguide:Jamaica! smoking ganja!! but why do you ask? Ajibel:I have never had any issue with pinshures in RWD (even in IE 6 sef), please share your pin.chur problem here make we thrash am out together. As far as I am concerned, pin.shures are just like DIV except that you gotta maintain the aspect ratio. |
Re: How To Create Responsive Website From Scratch by Ajibel(m): 7:50am On Dec 20, 2014 |
dhtml18: Okay, for instance, a website in desktop view is required to have a banner in its header, say 960px, then when a user views the site on a mobile device, that same header banner with its weight and size would be loaded to the user which would make page load slow. Now your intention is to serve different banners optimized for different viewports, how would you attack this challenge? |
Re: How To Create Responsive Website From Scratch by JackOfAllTrades: 9:19am On Dec 20, 2014 |
Hey@ Ajibel what you should do is when you have an element that needs to resize in this case your header don't set the width of the header, after that since you have an image in the header what you is this header { height: 40px; } header img { width: 100%; height: auto; } |
Re: How To Create Responsive Website From Scratch by Nobody: 9:24am On Dec 20, 2014 |
I will challenge it like this: In my upload script, i shall simply write a script with say php or any server side language to create different sizes of images for the banner upload. So if the original banner is say 1000 x 1000 pixels, i shall have banner1 900 x aspect_ratio banner2 600 x aspect_ratio banner3 400 x aspect_ratio banner4 200 x aspect_ratio [php] detect viewing device (plenty mobile detecting device) To render the image, i will detect the viewing device from the server side so that i determine the image to render for the client side. if device==pc <img src="banner1_src"> else if device==tablet <img src="banner2_src"> else if device==mobile <img src="banner3_src"> else <img src="banner4_src"> [/php] |
Re: How To Create Responsive Website From Scratch by Nobody: 9:35am On Dec 20, 2014 |
dhtml18: Because your madness is getting out of hand |
Re: How To Create Responsive Website From Scratch by Nobody: 9:52am On Dec 20, 2014 |
pureguide: Ehen? you do know you can visit various parts of the world on google maps street panorama? without leaving your base? |
Re: How To Create Responsive Website From Scratch by Nobody: 10:10am On Dec 20, 2014 |
dhtml18:Cool story for d ghost. Not even d gods |
Re: How To Create Responsive Website From Scratch by Nobody: 3:51pm On Dec 20, 2014 |
pureguide:Their ain't such things as ghosts or gods? This is what comes out of watching too many tales by moonlight. |
Re: How To Create Responsive Website From Scratch by Nobody: 4:42pm On Dec 20, 2014 |
dhtml18:I no understand the grammar. Blow another one mr everywhere I dey. |
Re: How To Create Responsive Website From Scratch by Nobody: 5:37pm On Dec 20, 2014 |
pureguide:adontbiliv in ghost or gods for that matter! |
Re: How To Create Responsive Website From Scratch by Nobody: 6:44pm On Dec 20, 2014 |
dhtml18:You dey worry o. So were are you now? |
Re: How To Create Responsive Website From Scratch by Ajibel(m): 8:13pm On Dec 20, 2014 |
JackOfAllTrades: Thanks, but I do this already. Actually I copied bootstrap's code for my own solution which goes this way: img { max-width:100%; height:auto; vertical-align:middle; } *cant remember the rest now* But then this would still load the exact same image for any screen res. Imagine your desktop header image is 40kb, same img would be loaded for mobile users which would eat up data and slow down the time taken for the page to be rendered on a small device. |
Re: How To Create Responsive Website From Scratch by Ajibel(m): 8:19pm On Dec 20, 2014 |
dhtml18: That exactly is the kinda solution I thought of doe I use Python/Django, Im working on a personalised solution for it with some open source solutions Ive found. But this isnt so right. A web designer should be able to tackle such image responsiveness without the need to get dirty with backend codes. That's my point. |
Re: How To Create Responsive Website From Scratch by Ajibel(m): 8:21pm On Dec 20, 2014 |
For Python/Django, I use PIL, django-mobile, django-image-cropping and/or photologue but I dont enjoy it cuz they are generic written in CBV ![]() |
Re: How To Create Responsive Website From Scratch by zeroshadow: 9:07pm On Dec 20, 2014 |
Ajibel: You are not yet on "beginner level".. Pls train harder for your sake. He used width not max-width so try using width or set a min-width and max-width... Or use media queries.. |
Re: How To Create Responsive Website From Scratch by JackOfAllTrades: 10:12pm On Dec 20, 2014 |
Ajibel:OK now I get you, i've had same problem b4. Only solution would be to resize your images to different sizes, use CSS media query to figure out which image to load. Either by setting the background header or use CSS content property to insert image tag to the header |
Re: How To Create Responsive Website From Scratch by Nobody: 10:44pm On Dec 20, 2014 |
Ajibel:This is why web development involves both frontend and backend coding. @others, we are talking about image optimization here - not really something to do with css or bootstrap or whatever. |
Re: How To Create Responsive Website From Scratch by Ajibel(m): 7:48am On Dec 21, 2014 |
JackOfAllTrades: Sorry, how is this done pls? |
Re: How To Create Responsive Website From Scratch by Ajibel(m): 7:54am On Dec 21, 2014 |
dhtml18: True, but then there are those who call themselves "Web designers" who are concerned with just the beauty of the interface. I think in such case, the designers would have to collabo with a backender or learn it all. Most of us in Nigeria actually do both, we arent in Yankee, thats why some sites designed by Nigerians arent sleek in the front. Meanwhile, sorry OP for derailing your thread. You may continue now ![]() |
Re: How To Create Responsive Website From Scratch by Nobody: 9:45am On Dec 21, 2014 |
^^^this is part of website optimization, RWD is simply a frontend stuff really. Specifying the particular content to load in the first place is a backend issue. Alternatively, you can use javascript to detect the viewing device and decide on what image to load. But i prefer backend because jscript has performance issues, i try to reduce the amount of javascript i use on a page to prevent performance issues. |
Re: How To Create Responsive Website From Scratch by Nobody: 9:47am On Dec 21, 2014 |
JackOfAllTrades:This is responsive web design technique, this will work too except that i am trying to suggest how to use different image sides to prevent slow page loading. |
"Error: You Have Exceeded The Maximum Allowed Databases" Pls Help Me Out! / Where Do Bloggers Get Music To Post On Their Blog? / Please Look At My Newly Designed Site And Tell Me What You Feel.
(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. 45 |