Menu
SO,
I'm looking for some help making a fairly simple page more mobile/tablet friendly as currently on certain mobile devices it appears pretty ugly :S
I've tried positioning stuff correctly and used pixels rather than percentages because I'm only really doing stuff in each corner (top and bottom bars) and I've attempted on incorporating some scaling aswell as code to make the images not display at certain screen width's
Can anyone help correct my html/css so that it's fully compatible as it never quite works when I make changes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta content="width=device-width,initial-scale=0.75" name="viewport" />
<title>Website.com</title>
<link href="testing.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header_container">
<div id="header">
<div class="headimage">
<a href="http://website.com/" target="_blank">
<img alt="" class="headimager" src="http://placehold.it/350x95/" />
</a>
</div>
<select class="class-selector">
<option value="">- Testing Dropdown -</option>
</select>
<div class="classcycler"><a href="javascript: void(0);" id="NextPage"><font color="#EFEFEF">Next Page</font></a> <font color="red">|</font> <a href="javascript: void(0);" id="PreviousPage"><font color="#EFEFEF">Previous Page</font></a>
</div>
<div class="classcycler2"><a class="downclass" href="javascript: void(0);"><font color="#EFEFEF">Scroll Down</font></a> <font color="red">|</font> <a class="upclass" href="javascript: void(0);"><font color="#EFEFEF">Scroll Up</font></a>
</div>
<div class="headright"><a class="TOPJS" href="javascript: void(0);"><font color="#EFEFEF">Up to Top</font></a>
<br/> <a class="KEYJS" href="javascript: void(0);"><font color="#EFEFEF">Down to Bot</font></a>
</div>
</div>
</div>
<div id="container">
<table id="gradient-style" summary=""> <tbody><thead><tr><th colspan="30">Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>>Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>>Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>>Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>></th></tr></thead></tbody></table>
</div>
<div id="footer_container">
<div id="footer">
<div class="footimage">
<a href="http://website.com/" target="_blank">
<img alt="" class="footimager" src="http://placehold.it/350x95/" />
</a>
</div>
<div class="footleft">
<a class="def" href="javascript: void(0);"></a>
</div>
<div class="footright">
<a class="abc" href="javascript: void(0);"></a>
</div>
</div>
</div>
</body>
</html>
body {
background: #F0F0F0;
line-height: 1.6em;
margin: 0;
overflow-x: scroll;
padding: 0;
}
#header_container {
background: url(gradhead.png) repeat-x #111625;
border: 0 solid #666;
height: 80px;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
#footer .headimage {
position: relative;
}
#header .headright {
font-size: 20px;
position: fixed;
right: 10px;
text-align: right;
top: 15px;
}
#header .class-selector {
left: 10px;
position: fixed;
top: 5px;
}
#header .classcycler {
font-size: 20px;
left: 10px;
position: fixed;
top: 30px;
}
#header .classcycler2 {
font-size: 20px;
left: 10px;
position: fixed;
top: 50px;
}
#container {
margin: 0 auto;
padding: 80px 0;
width: 100%;
}
#footer_container {
background: url(gradhead.png) repeat-x #111625;
border: 0 solid #666;
bottom: 0;
height: 80px;
left: 0;
position: fixed;
width: 100%;
}
#footer .footleft {
font-size: 20px;
left: 10px;
position: absolute;
top: 10px;
}
#footer .footright {
font-size: 20px;
position: absolute;
right: 10px;
top: 10px;
}
#footer .footimage {
position: relative;
top: -13px;
}
#footer .footleft a {
background: url(http://placehold.it/60x60/) no-repeat;
display: block;
height: 60px;
width: 60px;
}
#footer .footleft a:hover {
background: url(http://placehold.it/60x60/000) no-repeat;
}
#footer .footright a {
background: url(http://placehold.it/60x60/) no-repeat;
display: block;
height: 60px;
width: 60px;
}
#footer .footright a:hover {
background: url(http://placehold.it/60x60/000) no-repeat;
}
#header,#footer {
color: #ECECEC;
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
width: 100%;
}
@media screen and max-width 600px {
.headimager {
display: none;
}
}
@media screen and max-width 450px {
.footimager {
display: none;
}
}
The reason there is no jsfiddle link is because it doesn't allow me to put the meta tags in.
$("a.def").click(function () {
$('body').animate({
"scrollLeft": "-=404"
}, 200);
});
$("a.abc").click(function () {
$("body").animate({
"scrollLeft": "+=404"
}, 200);
});
415
How do I make my website look the same on mobile and desktop devices? To display a desktop version of your website on mobile devices, you need to disable responsiveness. To do this, open Page settings → Additional → check the "Switch off adaptive mode for mobile devices" box → save the changes → re-publish the page.
A recommended approach is to use “resolution switching,” with which it is possible to instruct the browser to select and use an appropriate size image file depending on the screen size of a device. Switching the image according to the resolution is accomplished by using two attributes: srcset and sizes.
There are several ways to accommodate Mobile/Tablet devices with your website.
FIXED DESIGN
Create a stylesheet that works generically across all formats. Your site will appear the same on all devices but this process will be the simplest solution.
The fixed design process should primarily use percentages and max-widths to create content that changes based on the device width.
PROS
When used well this process uses least resources and is faster to create and modify.
CONS
If your site has large amounts of content on a page then your site can become very cramped on smaller devices
RESPONSIVE DESIGN
If you want your site to be viewed differently and arguably optimally on different devices then you need a responsive design. This can be achieve by using a dynamic stylesheet or by using multiple stylesheets for different devices.
PROS
A very versatile website that can be display uniquely and optimally based on the viewing device.
CONS
Larger or additional resources and marginally longer loading depending on design. Longer development and modification times.
CREATING RESPONSIVE CASCADING STYLESHEETS
It is no longer practical to use set width becuase there are simple to many varible sizes. The answer is flexible everything.
Using a viewport metatag as in your example to target the device that is accessing your website.
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites.
Using media queries.
Media Queries let you write individual rules for specific screen widths.
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
A good javascript solution other than bootstrap is jquery mobile which takes away the time and effort of designing a responsive site by doing the work for you. You do not need to know or edit any javascript to use it.
SPECIFICS
So now we have the options lets take a look at your specific issue. Your website actually seems very responsive already. and is well laid out for both mobile and PC using the fixed design.
CHANGE YOUR MEDIA QUERIES (They wont work without brackets)
FROM
@media screen and max-width 600px {
.headimager {
display: none;
}
}
@media screen and max-width 450px {
.footimager {
display: none;
}
}
TO
@media screen and (max-width:600px) {
.headimager {
display: none;
}
}
@media screen and (max-width:450px) {
.footimager {
display: none;
}
}
I would advise against using a table (#gradient-style). A simple 100% div (#container) will do the trick with floated or %width nested elements. Also the text in container wont auto wrap without spacing of css wordwrap:break;
Other than that there are no more noticeable problems but please do add a comment if you require specific changes.
137
I dont think the doctype is going to change anything in this case, as commented by Drue...
The best way to deal with different form-factors, such as tablets and mobile phones, is with media-queries, like you already do. These can take a lot of writing to get right, thus I suggest you use a framework. Arguably, Bootstrap (http://getbootstrap.com/) is the most popular at the moment, but there are many frameworks that deal with desktop to mobile graceful degradation.
If you don't want to use a framework, min-width and max-width are your friend. they will allow for items to start appearing below each other instead of next each other.
Bootstrap'ing your website If we look at your code snippet, you need to apply Bootstrap's grid system. If you add bootstrap to your code, the css might override a bunch of things, or actually destroy your layout at first. I might take some work to get that right. (another lib might therefor be better, but essentially they are all the same, so I'll keep this to bootstrap)
Bootstrap uses a gridsystem (like many other) to keep items in place, and make them gracefully move as the viewport becomes smaller. Bootstrap was build with "mobile first" in mind, that means that you work your way from the smallest viewport up towards a desktop machine. This might sound silly/unintuitive with your ideas, but it's very practical in use. Bootsrap has a few classes and IDs you add to your HTML, and it will then automatically resize the correct components. It creates layouts of 12columns. Most websites won't have 12 columns, so you create columns that span 2 or more of the 12 columns. http://getbootstrap.com/css/#grid shows that really well. Looking at your code, you might end up with something like
<body>
<div id="header_container" class="container"><!-- .container centers it -->
<!-- see: http://getbootstrap.com/components/#navbar for navbar stuff -->
<div id="header" class="navbar-header">
<div class="headimage navbar-brand">
<a href="http://website.com/" target="_blank">
<img alt="" class="headimager" src="http://placehold.it/350x95/" />
</a>
</div>
[..]
</div>
</div>
<!-- .row and .col-* manage the grid system -->
<div class="row">
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
The below help-help-help should be 3 columns on large screens, and stack on top of eachother on smaller resolutions
</div>
</div>
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
help 1
</div>
<div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
help 2
</div>
<div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
help 3
</div>
</div>
<div id="footer_container">
<div id="footer" class="row">
<div class="footimage col-md-4 col-lg-4 col-sm-12 col-xs-12">
<a href="http://website.com/" target="_blank">
<img alt="" class="footimager" src="http://placehold.it/350x95/" />
</a>
</div>
<div class="footleft col-md-4 col-lg-4 col-sm-12 col-xs-12">
<a class="def" href="javascript: void(0);"></a>
</div>
<div class="footright col-md-4 col-lg-4 col-sm-12 col-xs-12">
<a class="abc" href="javascript: void(0);"></a>
</div>
</div>
</div>
</body>
It is definitely another way of thinking about website design, but the documentation of Bootstrap is pretty clear, and there are a bunch of tutorials (make sure they are for Bootstrap3, not bootstrap2. There are some big differences)
Oh, and don't post code using <font> and <table> as a layout-tool on SO. It hurts ;)
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
