Now that responsive website is the reigning thing, we are going to go through a walk-through with pictures and sample codes of how to develop a responsive website layout from the scratch, then we shall convert the layout into a wordpress theme, joomla theme and then drupal theme.

By responsive, we are talking of developing a site that shall work with any device, from mobile phones to tablets (IPAD, Galaxy Tab), to PCs and all major browsers - IE, FF, Chrome, Safari, Opera

This tutorial will assume that:
- You already know some HTML and CSS especially HTML5 and CSS 3.1
- You are an intermediate user and can write codes to a limited extent at least

*grabs front seat*

I will be starting the class over this weekend.

*seats next to databoy247* <winking>

u go fear tutuorial

following

woooow!!! so cool @*dhtml #FrontSeat

100% in....

hey guys i need your help, i design smf using xampp and i av downloaded filezilla but i dont know how to upload the file. also i cannot find the designed forum. pls help asap. Thanks

You need to learn how to use FTP, go and look for an FTP tutorial online.

Clicks follow button

I want to put together a very simple set of codes first before starting my tutorial, i am somewhat stuck, i will be right back
*stretches neck to peep into * Responsive Web Design Tutorial From Scratch by Mister GraphicPlus, takes some note, zips off. . .

Lets get started, first we are going to be looking at an extremely simple layout that displays content in the center of the page.

Take a look at this demo - http://.net/demos/responsive/step1/index.html
You can download the source code - http://.net/demos/responsive/step1/step1.zip

If you view this layout under different devices, you get different outputs based on the device, in fact different background colours.

For the purpose of this class, i decided to test this layout under:
1. Google chrome, which supports media queries - and i resized the browser window to see the different layout adjustments
2. Internet Explorer 8, Netscape 9, IE 6 - all of which do not support media queries, so they just show only the default layout - which still resizes when you resize the browser window, but does not alter background colors etc, but still works fairly well
3. IPAD - which displays the message: This is the default layout for IPAD
4. Android - if you slant to portrait view - it shows green background with message - default layout for Kindle. . ., and default layout for pc screen when you slant the other way
5. Blackberry - this shows yellow background with message . . . default layout for some mobile phones

The point i am putting across here is that you can use CSS to alter elements of HTML that display based on screen resolutions.

If i want a particular html element to show only on HTC Windows Phone 8X device or only on IPAD, i can use something like this:

<style>
/*hide element by default*/
.htc {display:none}
.ipad2 {display:none}

@media (min-resolution: 341dpi) and (min-width: 767px) >; {
.htc {display:block}
}

@media (max-resolution: 131dpi) and (min-width: 767px) >; {
.ipad2 {display:block}
}
</style>

<h1 class="htc">Show This Message Only On HTC Windows Phone 8X device</h1>
<h1 class="ipad2">Show This Message Only On IPAD2</h1>

Some explanations, for the example i just displayed, the HTML source code is http://.net/demos/responsive/step1/index.html.txt

And the css is here - http://.net/demos/responsive/step1/style.css

I tried to make it as straight forward as possible, but i know there will still be some questions, so let me pause here.

ANY QUESTIONS? Before we move to step 2?

Just purchase first class ticket.

Intresting

What is interesting bro?

Okay, preparing to move to step 2, putting in responsive content - later today

@*dhtml nice tutorial but I think you should explain first some important terms when designing a responsive site like @media, the minimum resolution for different devices, screen sizes, maximum width and things like that.

A normal web designer who has not one way or the other learnt rwd might not really get it.

Nice1 again!

^^Point taken, however this thread is for intermediate users, which means if you dont know what responsive web design is, you should not even be on this thread in the first place, but that is not always possible.

From my own point of view:
In responsive web design (rwd), we are looking at creating a website that will display properly on different viewing device - like mobile phones, tablets, pcs. And we want to create only one website, not redirecting to a different website for mobile and all that.
And also, we want people using different devices to benefit from the website as much as possible.

We can for example, use different styles of navigations based on device that is being used to view the website. This is just my own understanding of RWD.

Lets take a look at wikipedia with them big big gramma:

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).[

Read more here: http://en.wikipedia.org/wiki/Responsive_web_design

jorcycos: hey guys i need your help, i design smf using xampp and i av downloaded filezilla but i dont know how to upload the file. also i cannot find the designed forum. pls help asap. Thanks

. Contact me I will help u out .. 07068058448