Enhancing productivity with a more streamlined process for creating a responsive website design through the optimization of

I recently had the task of placing two images in a band on a webpage and ensuring they were responsive to different screen sizes. Image 'a' represented a circular logo, while image 'b' was a rectangular logo. The red band served as the container for these images. Despite their slightly different widths, I needed to maintain proportional spacing between 'a' and 'b'.

To achieve this, I manually adjusted the CSS properties using media queries to accommodate various screen sizes. This involved tweaking values based on visual feedback at different breakpoints:

<html>
<head>
<title>Welcome</title>
    <meta name="description" content="T">
    <meta name="keywords" content="">

    <meta name="author" content="">

    <meta http-equiv="cleartype" content="on">
    <!-- Responsive and mobile friendly stuff -->
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <style type="text/css">
    
    html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
    
html,body {
    color:#ffffff;
    margin:0px;
    padding:0px;
    background: url('images/bg-1366.jpg') no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}
#band{
    position: relative;
    top:27.5%;
    height:30%;
    width:100%;
    max-width: 100%; 
    border:3px solid #ffffff;
    border-right-style:none;
    border-left-style:none;
    margin:0px;
    align:center;
    padding:0px;
    background-color: #000000;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}
#holistic {
    float:right;
    max-width: 80%; 
    max-height: 80%;
}

#spa {
    float:left;
    max-width: 90%; 
    max-height: 90%;
}
#off {
    float:left;
    max-width: 1%; 
    max-height: 1%;
}


    </style>
    <link rel="stylesheet" href="css/col.css" media="all">
    <link rel="stylesheet" href="css/3acols.css" media="all">
 <link rel="stylesheet" href="css/media.css" media="all">
</head>    


<body>

    <div id="band">
    <div id="wrapper">
        <div class="section group">
                <div class="col span_1_of_2">
                <img id="holistic" src="Ehlogo.png">
                </div>
                <div class="col coloff span_3_of_2">
                <img id="off" src="images/off.png">
                </div>
                <div class="col span_1_of_2">

                <img id="spa" src="ESlogo.png">
                </div>
            </div>
            </div>
    </div>
</body>
</html>

    @charset "utf-8";
    @media only screen and (min-width : 320px) and (max-width : 480px) {
     .col{
         text-align:center;
         }
        #holistic {
            float: none;
            max-width: 95%; 
            max-height: 95%;
        }
        #spa {
                float:right;
            max-width: 95%; 
            max-height: 95%;
            margin-top:7.5%;
            margin-right:10%;
        }
            #band {
            top:12.5%;
            height:30%; 
        }
    }
    @media only screen and (min-width : 480px) and (max-width : 640px) and (max-height : 960px){
     .col{
         text-align:center;
         width:640px;
            max-width: 100%; 
            max-height: 100%;
         }
        #holistic {
            float: none;
            max-width: 85%; 
            max-height: 85%;
        }
        #spa {
            float:right;
            max-width: 85%; 
            max-height: 85%;
            margin-top:7.5%;
            margin-right:10%;
        }
            #band {
            top:12.5%;
            height:30%; 
        }
    }
    @media only screen and (max-width : 480px) and (max-height : 800px){
     .col{
         text-align:center;
         }
        #holistic {
            float: none;
            max-width: 95%; 
            max-height: 95%;
        }
        #spa {
            float:none;
            max-width: 95%; 
            max-height: 95%;
            margin-right:10%;
        }
    }
    @media only screen and (min-width : 640px) and (max-width : 768px) and (max-height : 1280px){
     .col{
         text-align:center;
         width:768px;
            max-width: 100%; 
            max-height: 100%;
         }
        #holistic {
            float: none;
            max-width: 100%; 
            max-height: 100%;
        }
        #spa {
            float:none;
            max-width: 100%; 
            max-height: 100%;
            margin-top:3.5%;
            margin-right:3%;
        }
        #band {
            top:12.5%;
            height:25%; 
        }
    }
    @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    
        body{
            background: url('images/bg-1280.jpg') no-repeat center center fixed;
        }
        #holistic {
            position:relative;
            top:-5px;
            left:10px;
            max-width: 90%; 
            max-height: 90%;
        
        }
        .coloff {
            width:75px;
        }
        #spa {
            float:right;
            margin-top:2%;
            margin-right:15%;
            max-width: 85%; 
            max-height: 85%;
        }
    }
    @media only screen and (min-width: 1250px) and (max-width: 1366px) and (min-height: 1024px) {
    
        body{
            background: url('images/bg-1280.jpg') no-repeat center center fixed;
        }
        #holistic {
            max-width: 90%; 
            max-height: 90%;
        
        }
        .coloff {
            width:75px;
        }
        #spa {
            float:right;
            margin-top:2%;
            margin-right:15%;
            max-width: 85%; 
            max-height: 85%;
        }
                #band {
            top:25%;
            height:32.5%;   
        }
    }
    @media only screen and (min-width: 1280px) and (max-width: 1366px) and (max-height: 799px){
        body{
            background: url('images/bg-1366.jpg') no-repeat center center fixed;
        }
        #holistic {
                position:relative;
            top:-16px;
            max-width: 100%; 
            max-height: 100%;
        }
        #spa {
            max-width: 90%; 
            max-height: 90%;
        }
            .coloff {
            width:165px;
        }
            #band {
            top:25%;
            height:32.5%;   
        }
    }
    @media only screen and (min-width: 1200px) and (max-width: 1279px) and (max-height: 799px){
        body{
            background: url('images/bg-1366.jpg') no-repeat center center fixed;
        }
        #holistic {
            max-width: 95%; 
            max-height: 90%;
        }
        #spa {
            float:left;
            max-width: 85%; 
            max-height: 85%;
        }
            .coloff {
            width:175px;
        }
        #band {
            top:25%;
            height:32.5%;   
        }
    }
    @media only screen and (min-width: 1580px) and (max-width: 1920px){
        body{
            background: url('images/bg-1366.jpg') no-repeat center center fixed;
        }
        #holistic {
            max-width: 90%; 
            max-height: 90%;
        }
        #spa {
            float:left;
            max-width: 90%; 
            max-height: 90%;
        }
            .coloff {
            width:180px;
        }
        #band {
            top:25%;
            height:28.5%;   
        }
    }
    @media only screen and (min-width: 1920px) and (max-width: 2400px){
        body{
            background: url('images/bg-1366.jpg') no-repeat center center fixed;
        }
        #holistic {
            position:relative;
            top:-10px;
            max-width: 90%; 
            max-height: 90%;
        }
        #spa {
            margin-top:0.5%;
            float:left;
            max-width: 86%; 
            max-height: 86%;
        }
            .coloff {
            width:200px;
        }
        #band {
            top:25%;
            height:30%; 
        }
    }

/*  SECTIONS  ============================================================================= */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  GROUPING  ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { 
        margin: 1% 0 1% 0%;
    }
}

/*  GRID OF TWO   ============================================================================= */


.span_2_of_2 {
    width: 100%;
}
.span_3_of_2 {
    width: 10%;
}
.span_1_of_2 {
    width: 40.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_2_of_2 {
        width: 100%; 
    }
    .span_1_of_2 {
        width: 100%; 
    }
}

However, this process proved to be time-consuming and cumbersome. Constantly adjusting percentages, saving files, refreshing browsers, and repeating the cycle became frustrating. I'm now seeking a more efficient method that eliminates guesswork by utilizing mathematics, frameworks, or algorithmic workflows. My approach so far has been trial-and-error, but I'm eager to find a better solution when working with percentages and media queries. The current process took longer than it should have.

cssresponsive-designworkflow

Answer №1

Embrace the mobile-first approach! This popular mantra is rooted in practicality. Begin by focusing on styling for smaller screen sizes and then adjust for larger screens as needed.

Set your initial snap point conservatively small, fine-tune your styling, and then experiment with resizing your browser to find the optimal snap point based on content. Let the content guide your design decisions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Seamless responsiveness in design with jQuery, but encountering compatibility issues

My usage of jQuery is quite basic to ensure that elements are properly positioned when they are moved: function ipad() { var width = jQuery(window).width(); if (width < 1200 && width >= 768){ //if tablet jQuery('.mobbut').css(&apo ...

javascriptjqueryhtmlcssfirefox

Tips for centering an image vertically in a table's cell

I'm looking to vertically center the text, but I'm not sure how to do it. Check out my attempt on the fiddle link below: http://jsfiddle.net/jTW4d/ ...

htmlcss

Tips for enhancing your HTML email template with borders:

I designed an email template using the email template editor and incorporated nested table tags for each mail element. As I created a table to contain all these elements and attempted to add borders to the tags, I encountered a space between the top and bo ...

htmlcsshtml-tablehtml-emailemail-templates

Ways to align content in the center using Vuetify3

I have a component positioned at the top of the page, but I would like it to be centered instead. Something like this: Here is my current code: <template> <v-container class="align-center" fill-height fluid> <v-row class=&q ...

cssvue.jssassvue-componentvuetify.js

Utilize text wrapping to ensure a fixed maximum height for content display

I am in need of a div that contains text spanning multiple lines, with both a fixed width and a maximum height. Currently, I have applied the CSS property overflow: hidden;. However, my issue arises when the last line of text exceeds the maximum height of ...

javascripthtmlcssword-wrap

The loading cursor in IE7 flickers incessantly, causing the webpage to lag and become un

When I move my cursor and click in text fields, the page becomes unresponsive and shows a wait cursor. If you're curious to see this issue in action, check out this video. This problem is specific to IE7. I've attempted to identify any ajax re ...

javascriptcssinternet-explorer-7

What is the best way to ensure a grid element has a column designated for each of its children?

Imagine this HTML structure: /* Desired styling: */ .container { display: grid; grid-template-columns: 250px 250px 250px /* this is the part to automate */ grid-template-rows: 50px; } .child { width: 100%; height: 100%; background: ...

htmlcss

Ways to add more spacing between list items without affecting the position of the bottom div

I'm attempting to achieve a layout similar to an Instagram post, where the list expands but does not push the footer down. In my case, adding margin-bottom to the comment class affects the height of the <div class="post-details-container" ...

htmlcss

An autocomplete CSS editor with Firebug-like features

Looking for a CSS (or HTML) editor that offers code autocompletion similar to Firebug's features. I believe it's referred to as "autocomplete as you type." Thank you! Edit: I came across a tool called Zen Coding that provides shortcuts for cod ...

htmlcss

Creative Text Container CSS Styling

Check out this website for the container I want to replicate: container This is the specific textbox: Here's how mine currently appears: I analyzed their css file and examined their html source code. I isolated the section of html and css related t ...

htmlcsstextboxwebkit

Chrome tab freezes when scrolling with the mouse

Working on a particularly interesting bug, I've managed to replicate it using a fiddle. The issue arises when the middle mouse button is clicked over the div element containing text, causing the pointer to become stuck. Is this possibly a browser bug ...

javascripthtmlcssgoogle-chrome

What is causing the unexpected impact of the "Product Quick View" JavaScript plugin on divs that are not being activated by user interaction?

As a newcomer to web design, I have implemented the "Product-Quick-View" plugin from CodyHouse on my website. Upon clicking the DEMO button and inspecting the code, you will find the following: <body> <header> <h1>Product Q ...

javascripthtmlcssplugins

Steps for displaying a website within a specific Div using HTML

I'm trying to set up a website to open within a specific <div> tag, like the example shown in this link: Responsive. Can anyone spot what I'm doing incorrectly? <html> <head> <script> function mobile320() { ...

javascriptjquerycsshtml

Troubleshooting: Why is Jquery unable to retrieve image height?

Having trouble using jQuery to find the actual height of the first image nested within a container. I can access the src attribute but not the height. Any suggestions on how to get the accurate height? Is it necessary to retrieve heights via CSS? Unfortu ...

javascriptjquerycssimageheight

challenges with website design on Internet Explorer 7

Welcome! This is my HTML code: <div style="width:220px;float:left;" id="radio_text"> <ul style="width:20px;float:left;display:block;"> <li style="list-style:none;line-height:13px;height:13px;float:left;"><input type="radio ...

htmlcssinternet-explorer-7html-lists

Change the color of the text in a shiny dashboard

While exploring shiny dashboard, I came across this link that explains how to modify colors in the sidebar and header. However, I'm struggling to change the font color for sidebar items. The default white font color becomes unreadable when using light ...

htmlcssrshinyshinydashboard

Ways to eliminate the gap produced by a fixed element

Why is my chatbox (marked in red) creating unnecessary space at the top (highlighted in yellow), even though it has a sticky position and should not be affecting that area? The other elements on the webpage seem to be impacted by this. How can I prevent th ...

htmlcss

Changing the alignment of divs to center instead of the right side

I am currently working on a project that involves creating a tiled interface with responsive tiles. One issue I have encountered is that all the tiles are shifting to the left side of the div and not getting centered, no matter what I try. To see the pro ...

htmlcssalignmentcss-floatmargin

Tips for creating responsive scrollable columns in an HTML table with Bootstrap

I'm not a professional web designer. I attempted to create a web layout with scrollable columns containing data in anchor tags that are loaded dynamically. To achieve this, I created an HTML table structure along with a stylesheet. Here is the source ...

htmlcssangularjstwitter-bootstrap

Adjust the color of the paper in Material-UI

I'm in the process of creating a React project using the material-ui library. Currently, I am facing an issue with customizing the drawer component's background color. After some research, I learned that modifying the paper attribute of the drawe ...

javascriptcssreactjsmaterial-uiclass-names