Making Desktop Website Mobile & Tablet Friendly????

[CarraraWebsiteSolutions]

Hello.

I am starting fresh on a new web design.

I have got told by some one it would be a good idea to think of the design for mobile and smart phone and tablet while doing main design.

Where would the best place to start would be?

The website size for the container for desktop is going to be 980px.

Is there any online videos on how to make website responsive?

I tend to rush things got to slow down.

[Paulie_D]

Decide how you want your website to look on Smartphone, Tablet and Desktop first…ideally in that order.

Work out how you want your content to be laid out in each viewer.

It’s much easier to start designing for mobile first rather than design for 980px+ and then try and cram everything into a small window.

Don’t think in px for how you want your layout to go, think in % of screen width..that will be a good start, you can always add breakpoints in your media queries later when you have the rough layouts done.

A quick google search found this: http://www.html5rocks.com/en/mobile/responsivedesign/

[CarraraWebsiteSolutions]

Ok got a free responsive web design template that has code like this down here which I am going to learn off

img{
max-width:100%;
}
.small_cat, .small_link {
position: relative;
z-index: 30;
margin: 0px 10px 20px 10px;
}
.small_link{
margin-bottom:0px;
}
.small_cat div, .small_link div{
padding: 0px 16px;
overflow: hidden;
position: relative;
font: 18px/40px ‘PT Sans Narrow’;
color: #fff;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
text-align:center;
text-transform:uppercase;
font-weight:bold;
}
.small_cat div{
background:#585858;
border: 1px solid #000000;
border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
}
.small_link div{
background: #38B0E3;
border:1px solid #0D9FDF;
border-radius: 3px 3px 0px 0px;
-moz-border-radius: 3px 3px 0px 0px;
-webkit-border-radius: 3px 3px 0px 0px;
}
.small_cat select, .small_link select {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
cursor: pointer;
}
.small_cat, .small_link, .small_content{
display:none;
}
/* Desktop standard 960 and up */
@media only screen and (min-width: 980px) {
}

/* Tablet Portrait size to standard 980*/
@media only screen and (max-width: 768px) {
body{
background-color:#FFF;
background-image:none;
}
#container{
width: 760px;
padding:0px;
}
#column-left{
display:none;
}
#column-left + #column-right + #content, #column-left + #content {
margin-left: 0px;
}
}

/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (max-width: 600px) {
#container{
width:100%;
}
#column-right{
display:none;
}
#column-right + #content {
margin-right:0px;
}
#header {
height:220px;
}
#header #logo{
top: 50px;
}
#header #language, #header #currency{
width: 150px;
}
#header #language{
left: 162px;
top: 9px;
}
#header #currency{
left: 5px;
top: 5px;
}
#header #cart {
top: 122px;
}
#header #welcome{
top:210px;
}
#header #search{
top: 180px;
}
#header .links{
display:none;
}

#footer .column {
width: 49%;
min-height: 120px;
}

#menu > ul > li > div > ul > li > ul{
padding-left:20px;
}
#menu, .org_cat, .toplinks{
display:none;
}
.small_cat, .small_link{
display:block;
}
}

@media only screen and (max-width: 350px) {
#header #logo{
left:5px;
}
#header #language, #header #currency{
width: 150px;
}
#header #language{
left: 162px;
top: 9px;
}
#header #currency{
left: 5px;
top: 5px;
}
#header #cart .heading{
margin-right:0px;
}
#header .links{
display:none;
}
.product-info > .left {
float: left;
margin-right: auto;
}
.product-info > .left + .right {
margin-left: auto;
float:left;
}
.org_content{
display:none;
}
.small_content{
display:inline-block;
}
.login-content .left, .login-content .right {
float: left;
width: 100%;
}
#footer .column {
width: 100%;
}

}

@media only screen and (max-width: 250px) {
#header {
height:260px;
}
#header #logo{
top: 90px;
}
#header #language, #header #currency{
width: 150px;
}
#header #language{
left: 5px;
top: 40px;
}
#header #currency{
left: 5px;
top: 5px;
}
#header #search{
top:210px;
right: 5px;
width: 208px;
}
#header #search input{
width: 172px;
}
#header #cart {
top: 148px;
right:0px;
}
#header #cart .heading{
margin-right:0px;
}
#header #welcome{
top:240px;
right: 5px;
width: 200px;
}
#header .links{
display:none;
}
}

[CarraraWebsiteSolutions]

Also going to buy tablet next month and all ready got new HTC ONE SV. Going in to hospital next month for five days it will give me some thing to do.

[Author]

Posts