Category Archives: Responsive and adaptive

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/