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/

Here in botswana, we dont comment of diaries as it is expressly forbidden unless the aforementioned diary hits FP.

Ok I will comment....hmmm but who will afford to wait till am tru with their design from scratch and can they afford it

cbrass:
Ok I will comment....hmmm but who will afford to wait till am tru with their design from scratch and can they afford it

that true sha...bt its gud to know how to (just incase)

maekhel:

that true sha...bt its gud to know how to (just incase)

Of course

In france, we are already use Google Web Designer to build responsive websites free of charge.

dhtml18:
In france, we are already use Google Web Designer to build responsive websites free of charge.

U sef. Wetin u dey claim? From bostwana to france? No dey talk anyhow

pureguide:


U sef. Wetin u dey claim? From bostwana to france? No dey talk anyhow

I be mister world-wide, I can travel 2 countries in one day!

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.

dhtml18:

I be mister world-wide, I can travel 2 countries in one day!

Nawa o. So were r u now?

pureguide:


Nawa o. So were r u now?

Jamaica! smoking ganja!! but why do you ask?

Ajibel:
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.

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.

dhtml18:

Jamaica! smoking ganja!! but why do you ask?


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.

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?

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;
}

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]

dhtml18:

Jamaica! smoking ganja!! but why do you ask?

Because your madness is getting out of hand

pureguide:


Because your madness is getting out of hand

Ehen? you do know you can visit various parts of the world on google maps street panorama? without leaving your base?

dhtml18:


Ehen? you do know you can visit various parts of the world on google maps street panorama? without leaving your base?

Cool story for d ghost. Not even d gods

pureguide:

Cool story for d ghost. Not even d gods

Their ain't such things as ghosts or gods? This is what comes out of watching too many tales by moonlight.

dhtml18:

Their ain't such things as ghosts or gods? This is what comes out of watching too many tales by moonlight.

I no understand the grammar. Blow another one mr everywhere I dey.

pureguide:

I no understand the grammar. Blow another one mr everywhere I dey.

adontbiliv in ghost or gods for that matter!

dhtml18:

adontbiliv in ghost or gods for that matter!

You dey worry o. So were are you now?

JackOfAllTrades:
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;
}

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.

dhtml18:
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]

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.

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

Ajibel:


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.

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..

Ajibel:


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.

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

Ajibel:


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.

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.

JackOfAllTrades:
use CSS content property to insert image tag to the header

Sorry, how is this done pls?

dhtml18:

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.

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

^^^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.

JackOfAllTrades:

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

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.