looking for advice on mobile friendly layout for my website

**james438** · 06-22-2015, 06:04 PM

http://www.animeviews.com/

I'm not really looking forward to this, but I am looking to make my website more mobile friendly. My thought is that I should remove both sidebars and the right column where my wordpress posts are located. Also should I be looking at two or more different mobile layouts for my site considering the different phone and tablet resolutions out there?

**molendijk** · 06-22-2015, 09:01 PM

Try to play with this:

Code:

<!doctype html>
<html >

<head>

<title>James438</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body {font-family: verdana; font-size: 14px; padding: 2%; padding-top: 0; background: green; margin-top: -2px}
.responsive_div {display: table-cell; margin-bottom: 0; padding-right: 40px; text-align: top}
img {width: 80%; max-width: 400px; }
#middle {min-width: 70%; background: #F2DD99; padding: 20px; border-radius: 10px}
#right {padding-left: 30px; }
@media screen and (max-width: 899px) 
{
.responsive_div {display: block; margin-bottom: 17px; padding-right: 0; }
img {width: 50%; margin-left: 25%}
#right {padding-left: 0}
}
</style>

</head>

<body>

<div style="position: relative;   
background-image: url(http://www.animeviews.com/images/pops/iria4.jpg); height:192px; width: 70%; background-repeat:repeat; margin-left: 15%; ">
</div> 





<div class="responsive_div" >
<div style="color: silver; font-weight: bold">SITE NAVIGATION</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. 
<br>
<img src="http://www.rtvnoord.nl/content/groningeninbeeld/pics/winsum/groot/groot_20040425_Ezinge_museum_Wierdenland_VVV.jpg" alt="" ><br>
Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>

<div class="responsive_div" id="middle">
<div style="text-align:center;font-size:32px;">New and Recently Updated</div> 
<hr><b><a href="http://www.animeviews.com/news_maincontent.php?ID=386">Texas Supreme Court rules same sex couple may divorce</a></b>
<br>
<br>Posted and updated a news post with a timeline with links to rulings.
<br>
<br>This case has been pending appeal to the Texas Supreme Court for over two years and we have been awaiting a ruling nearly two years after that. *At issue is whether a trial court in that state where same sex marriages are not recognized may grant a divorce to a same sex couple who originally married in another state where same sex marriage is recognized. *<a href="http://www.animeviews.com/article_maincontent.php?ID=255">Submitted 6/22/15</a> <br><HR>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. 
<br>
<div style="text-align: center">
<img src="https://www.kaartje2go.nl/kaarten/vrienden-voor-het-leven-7/img/vrienden-voor-het-leven-7.jpg" alt="">
</div>
<br>
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>

<div class="responsive_div" id="right" style="padding-right:0; ">
<div style="color: silver; font-weight: bold">DAILY BIBLE QUOTE</div>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. 
<br>
<img src="http://wierdenland.nl/plinius.jpg" alt="" >
<br>
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>


</body>

</html>

I don't think you need different layouts for phone and tablet

**james438** · 06-22-2015, 10:12 PM

That is very helpful. I am starting almost from scratch in learning how to make a website mobile, etc. friendly. Your code looks to have taken me most of the way there.

Thanks again

I think my next big decision will be trying to figure out which mobile friendly DD menu will work best with my site.

**Beverleyh** · 06-23-2015, 09:29 AM

To maintain some artistic control over your banner, you might want to check out
#2: http://fofwebdesign.co.uk/template/_...tio-resize.htm and
#3: http://fofwebdesign.co.uk/template/_...tio-resize.htm
from this blog

Assuming that your banner markup is this; <div class="banner"></div>...

I had a play here and this CSS from #2 looks good at a variety of sizes;

Code:

.banner {
	max-width: 1251px; /* actual img width */
	max-height: 192px; /* actual img height */
	*height: 192px; /* actual img height - IE7 */
	background-image: url(http://www.animeviews.com/images/pops/iria4.jpg);
	background-size: cover;
	background-position: 0 50%;
}
.banner:after {
	content: " ";
	display: block; 
	width: 100%; 
	padding-top: 33.333%; /* 3:1 ratio */
}

And so does this from #3;

Code:

.banner { 
	max-width: 1251px; /* actual img width */
	*height: 192px; /* actual img height - IE7 */
	background-image: url(http://www.animeviews.com/images/pops/iria4.jpg);
	background-size: cover;
	background-position: 0 50%;
}
.banner:after {
	content: " ";
	display: block; 
	width: 100%; 
	padding-top: 11.777%; /* slope */
	height: 44.669px; /* start height */
}

The difference between them is that #3 scales down completely smoothly, while #2 just loses width until the 3:1 ratio is reached, and then it scales smoothly.

You can play around with the aspect ratio in #2 to achieve different effects, and also change the padding-top and height values in #3 using the calculator at the bottom of the page: http://fofwebdesign.co.uk/template/_...tio-resize.htm

**molendijk** · 06-23-2015, 03:38 PM

Originally Posted by james438

I think my next big decision will be trying to figure out which mobile friendly DD menu will work best with my site.

Of course there's nothings against keeping the menu you already have, try this code:

Code:

<!doctype html>
<html >

<head>

<title>James438</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body {font-family: verdana; font-size: 14px; padding: 1%; padding-left:5px; padding-top: 0; background: green; }

.responsive_div {display: table-cell; margin-bottom: 0; padding-right: 40px; vertical-align: top; min-width: 180px; }
img {width: 100%; max-width: 400px; min-width: 170px; display: block; margin: auto; margin-top: 20px; margin-bottom: 20px}
#middle {min-width: 70%; padding:0; border-radius: 0px}
#right {padding-left: 30px; min-width: 140px}

@media screen and (max-width: 899px) 
{
.responsive_div {display: block; margin-bottom: 17px; padding: 35%; padding-top: 10px; padding-bottom: 10px}
img {width: 50%; max-width: 300px; min-width: 50px}
#right {padding-left: 0}
}
</style>

</head>

<body>

<img id="banner" src="http://www.animeviews.com/images/pops/iria4.jpg" alt="">


<div class="responsive_div" >
<div style="background: white; padding: 10px; border-radius: 5px; width: 100%; margin-auto; ">
<span style="background: gray; color: white; width: 100%; display: block">&nbsp;▼&nbsp;&nbsp;Site Navigation</span><br>
<a href="javascript: void(0)" style="color: black">Main</a><br>
<a href="javascript: void(0)"  style="color: black">About</a><br>
<a href="javascript: void(0)"  style="color: black">Search</a><br>
<a href="javascript: void(0)"  style="color: black">Articles</a>
</div>
<br>

<div style="background: white; padding: 10px; border-radius: 5px; width: 100%; margin: auto; ">
<span style="background: gray; color: white; width: 100%; display: block">&nbsp;▼&nbsp;&nbsp;Anime + Manga</span><br>
<a href="javascript: void(0)" style="color: black">Anime Reviews</a><br>
<a href="javascript: void(0)"  style="color: black">Anime Characters</a><br>
<a href="javascript: void(0)"  style="color: black">Gallery</a><br>
<a href="javascript: void(0)"  style="color: black">Screenshots</a><br>
<a href="javascript: void(0)"  style="color: black">Manga Reviews</a>
</div>
<br>

<div style="background: white; padding: 10px; border-radius: 5px; width: 100%; margin: auto">
<span style="background: gray; color: white; width: 100%; display: block">&nbsp;▼&nbsp;&nbsp;Misc</span><br>
<a href="javascript: void(0)" style="color: black">News</a><br>
<a href="javascript: void(0)"  style="color: black">Links to Webcomics</a><br>
<a href="javascript: void(0)"  style="color: black">Bible Quotes</a><br>
<a href="javascript: void(0)"  style="color: black">Member Control Panel</a>
</div>
<br>

<div style="background: white; padding: 10px; border-radius: 5px; width: 100%; margin: auto">
<span style="background: gray; color: white; width: 100%; display: block">&nbsp;▼&nbsp;&nbsp;Forum etc.</span><br>
<a href="javascript: void(0)" style="color: black">Forums</a><br>
<a href="javascript: void(0)"  style="color: black">Older Musings</a><br>
<a href="javascript: void(0)"  style="color: black">Wordpress</a>
</div>
<br>

 

</div>

<div class="responsive_div" id="middle">

<div style="padding: 20px; padding-top: 10px; background: #F2DD99">
<div style="text-align:center;font-size:32px;">New and Recently Updated</div> 
<hr><b><a href="http://www.animeviews.com/news_maincontent.php?ID=386">Texas Supreme Court rules same sex couple may divorce</a></b>
<br>
<br>Posted and updated a news post with a timeline with links to rulings.
<br>
<br>This case has been pending appeal to the Texas Supreme Court for over two years and we have been awaiting a ruling nearly two years after that. *At issue is whether a trial court in that state where same sex marriages are not recognized may grant a divorce to a same sex couple who originally married in another state where same sex marriage is recognized. *<a href="http://www.animeviews.com/article_maincontent.php?ID=255">Submitted 6/22/15</a> <br><HR>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. 

<img src="https://www.kaartje2go.nl/kaarten/vrienden-voor-het-leven-7/img/vrienden-voor-het-leven-7.jpg" alt="" >

<br>

<div style="padding-left:20%; padding-right: 20%">
<img src="https://www.kaartje2go.nl/kaarten/vrienden-voor-het-leven-7/img/vrienden-voor-het-leven-7.jpg" alt="" style="float: left; width: 40%">

<img src="https://www.kaartje2go.nl/kaarten/vrienden-voor-het-leven-7/img/vrienden-voor-het-leven-7.jpg" alt="" style="float: right; width: 40%">
</div>


<div style="clear: both">&nbsp;</div>





Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
</div>


<div class="responsive_div" id="right" style="padding-right:0; ">
<div style="color: silver; font-weight: bold">DAILY BIBLE QUOTE</div>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. 
<img src="http://wierdenland.nl/plinius.jpg" alt="" >
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>

<script>
//Put this script at the end of the body section
function position_banner()
{
if(window.innerWidth>899)
{
document.getElementById('banner').style.margin=0;
document.getElementById('banner').style.marginLeft=document.getElementById('middle').offsetLeft+'px';
document.getElementById('banner').style.minWidth=document.getElementById('middle').clientWidth+'px'
}
else if(window.innerWidth<=899)
{

document.getElementById('banner').style.margin='auto';
document.getElementById('banner').style.display='block';
document.getElementById('banner').style.minWidth='100%';
document.getElementById('banner').style.minHeight='70px';

}
}
position_banner();
window.onresize=function(){position_banner()};

</script>


</body>

</html>

**james438** · 06-23-2015, 05:33 PM

Originally Posted by Beverleyh

To maintain some artistic control over your banner, you might want to check out
#2: http://fofwebdesign.co.uk/template/_...tio-resize.htm and
#3: http://fofwebdesign.co.uk/template/_...tio-resize.htm
from this blog

Thanks for those links and code. I was actually thinking of revising how it resizes.

Originally Posted by molendijk

Of course there's nothings against keeping the menu you already have, try this code:

Interesting. I probably will keep the menu and just tweak it a bit using your code.

**james438** · 07-04-2015, 12:01 AM

I've been working on my demo page a little each day. I've incorporated both of your suggestions into the layout. I have yet to refine it and clean up the code, but the basic layout is about right.

Just a few questions:

I have two columns below which have not been added yet.
For the mobile friendly version should they not be there, should only one be displayed, or should both be displayed with one above the other?
Are there any thoughts on the font size? Too small?
Are the links on the left too close to each other vertically?
Is the banner maybe too big in the mobile version or about right?

**Beverleyh** · 07-04-2015, 05:51 AM

I'm currently on my iPhone so I guess that makes for convenient feedback

Is point 1 part of point 2? They feel like two parts of the same question so I'll take it that they are for now.

1/2) I would say that it depends on content. There tends to be two schools of thought when it comes to displaying content on mobile; The first is to only show the most important stuff and hide the rest, and the second is to not make mobile users feel like poor relatives and give them everything (no penalties for using a small screen). The second way encourages you to reevaluate content, including rewriting copy more concisely so that you're still saying everything you need to without losing meaning. Prioritise the key parts by putting it at the top, etc. I go with the second approach normally, unless there is content that just wouldn't be useful, or that doesn't "work" on mobile. For example, I'm working on a responsive school rebuild at the mo, which has a secondary, and much used "utilities" menu bar. The utilities behind the links are mostly to internal desktop-size resources that don't work on mobile, so it makes sense to hide this menu from mobile users. What I find useful is using a hide/show JavaScript reveal to collapse content at small sizes - that way you're still giving mobile users access to everything, but it's on their terms. Here's a script that demonstrates this behaviour (see the block of text at the bottom that collapses to a few lines when the screen gets narrow http://fofwebdesign.co.uk/template/_...ad-more-js.htm

3) The font-size looks fine for mobile to me. General rule of thumb nowadays is to not drop below the equiv of 14px on body copy, for accessibility and comfort. You might want to increase line-height though - again, a general rule for vertical rhythm in typography, is a line-height of 1.5 to 1.75 (no unit). There are online calculators that will calculate this for you, taking in to consideration the type-face and characters-per-line (amongst other things), but sometimes you just have to go with what *feels* right.

4) See comments on line-height above.

5) The banner looks very boxy/square on mobile - quite deep, and I can only see the 'A' and 2/3 of the 'n' on an iPhone 5S. It could afford to be half the height/depth I think (or whatever height allows me to see all the title text).

Hope that helps

**james438** · 07-04-2015, 06:51 AM

Yeah, that was a typo earlier. I didn't proof read what I wrote as carefully as I could have.

Thank you for the tips! All of these are quite useful as I am quite new to optimizing a site to be mobile friendly. The link you post*ed is a good example on how to compact text with "Read More" buttons. I'll have to think on it a bit more before I decide on the direction I want to take with those two columns.

**molendijk** · 07-04-2015, 01:14 PM

James, the banner is a little bit too narrow with a large screen, and too wide on mobile. Try the following:
- give the banner width: 70%, which is also the width for #middle;
- to @media screen and (max-width: 899px) add width: 100px for the banner

Thread: looking for advice on mobile friendly layout for my website

Thread Tools

Search Thread

looking for advice on mobile friendly layout for my website

The Following User Says Thank You to molendijk For This Useful Post:

The Following User Says Thank You to Beverleyh For This Useful Post:

The Following User Says Thank You to molendijk For This Useful Post:

The Following User Says Thank You to Beverleyh For This Useful Post:

Similar Threads

{ Help ] Mobile Friendly Version not working .

Mobile friendly upgrade

Google mobile friendly help

Mobile friendly website

Are ajax website SEO friendly ?

Bookmarks

Bookmarks

Posting Permissions