Tag Archives: Responsive

CSS liquid design – responsive

Posted on by
Reply
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Liquid tables with content</title>
</head>
<body>
<style>
*:before, *:after {box-sizing: border-box;}
body {margin: 0;}
h1 {font-size: 1.5em; line-height: 2em; padding: 0; margin: 0; text-align: left;}
p {font-size: 1em; line-height: 1em; padding: 0; margin: 0; text-align: left;}
div {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.bodyWrap {
    padding: 0 10px;
    background-color: #aaa;}
.pageWrap {
    max-width: 1160px;
    margin: 0 auto;
    background-color: #bbb;}
.row {
    display: table-row;
    background-color: #66ccff;}
.column {
    display: table-cell;
    border-collapse: collapse;}
.aside {
    width: 285px;
    padding-left: 10px;}
.imageList {
    width: 260px;
    padding-right: 10px;}
.imageListWrapper {
    max-width: 250px;
    height: auto;
    overflow: hidden}
</style>
<div class="bodyWrap"><!-- css: margin -->
    <div class="pageWrap"><!-- css: max-width + center -->
        <h1>Right fixed</h1>
        <div class="row">
            <div class="column"><p>column</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div><!-- .column -->
            <div class="column aside"><p>column + aside</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div>
        </div><!-- .column -->
    </div><!-- .pageWrap -->
</div><!-- .bodyWrap -->
<p>space</p>
<p>space</p>
<p>space</p>
<div class="bodyWrap"><!-- css: margin -->
    <div class="pageWrap"><!-- css: max-width + center -->
        <h1>Left fixed</h1>
        <div class="row">
            <div class="column imageList"><p>column + imageList</p><div class="imageListWrapper"><img src="http://inbounder.dk/wp-content/uploads/2014/07/pelicase1510-08-300x200.jpg" class="attachment-249x166 wp-post-image" alt="Alternativ tekst" height="166" width="250"></div><!-- .imageListWrapper --></div><!-- .column -->
            <div class="column"><p>column</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div>
        </div><!-- .column -->
    </div><!-- .pageWrap -->
</div><!-- .bodyWrap -->
<p>space</p>
<p>space</p>
<p>space</p>
<div class="bodyWrap"><!-- css: margin -->
    <div class="pageWrap"><!-- css: max-width + center -->
        <h1>Full width</h1>
        <div class="row">
            <div class="column"><p>column</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div>
        </div><!-- .column -->
    </div><!-- .pageWrap -->
</div><!-- .bodyWrap -->
<p>space</p>
<p>space</p>
<p>space</p>
<div class="bodyWrap"><!-- css: margin -->
    <div class="pageWrap"><!-- css: max-width + center -->
        <h1>Right fixed combined with left fixed</h1>
        <div class="row">
            <div class="column">
                <div class="row">
                    <div class="column imageList"><p>column + imageList</p><div class="imageListWrapper"><img src="http://inbounder.dk/wp-content/uploads/2014/07/pelicase1510-08-300x200.jpg" class="attachment-249x166 wp-post-image" alt="Alternativ tekst" height="166" width="250"></div><!-- .imageListWrapper --></div><!-- .column -->
                    <div class="column"><p>column</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div>
                </div><!-- .column -->
            </div><!-- .column -->
            <div class="column aside"><p>column + aside</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div>
        </div><!-- .column -->
    </div><!-- .pageWrap -->
</div><!-- .bodyWrap -->
<p>space</p>
<p>space</p>
<p>space</p>
</body>
</html>

CSS resource: https://developer.mozilla.org/en-US/docs/Web/CSS

CSS animation examples: http://www.dynamicdrive.com/

CSS semantic:
http://css-tricks.com/semantic-class-names/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

Failed resources:

http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/

http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-22-fluid-fixed/

 

Choosing A Responsive Image Solution

Posted on by
Reply

If you code websites, it’s a good bet that at least one of your clients has asked about or requested a mobile-friendly website. If you go the responsive design route (whereby your website is flexible enough to adjust visually from mobile to desktop widths), then you’ll need a strategy to make images flexible, too — a responsive image solution.

http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/

Responsive

Posted on by
Reply
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Common CSS Media Queries Break Points
http://stackoverflow.com/questions/16443380/common-css-media-queries-break-points

Media Queries for Standard Devices
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Responsive Web Design With Physical Units
http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/

Building On The Measure – Logical Breakpoints For Your Responsive Design
http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Yes, you really can make complex webapps responsive
http://adioso.com/blog/2013/06/responsifying-adioso/

Adapting layout to changing screen orientation
http://stackoverflow.com/questions/13503867/adapting-layout-to-changing-screen-orientation

Responsive background images with fixed or fluid aspect ratios
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios