Responsive Web Design – Day 2: Oh Snap!

On day two of my responsive web design Odyssey, I was able to make some progress!  I had previously downloaded the Skeleton CSS framework because it was small and compatible with IE7.  I started by stripping out all the styles and began with just the media query size differentiators.  I kept the standard body styles, such as 0 margins, borders and padding.

Skeleton, like most response frameworks, works with a grid system with a set number of columns.  This is still to advanced for me, so I focused on just getting the header to display the way I wanted it to, which I was not able to accomplish using Skeleton as is.

The RiteTech web site header is a solid black strip flush against the top of the browser.  To the left is our logo and to the right is our phone number.  Since there is a bit of black space on 960 screens, I figured the format would also work well for screens 768 and higher (iPad held portrait) and up.

The code for this was pretty straight-forward:
<div>
        <div>
            <div><img src=”/img/logo.gif” /></div>
            <div>
                <p>Tel. (703) 561-0607 * FAX (703) 561-0608</p>
                <p>New Sales/Consulting:  Dial x. 101</p>
            </div>
        </div>
    </div>

.container { position: relative; width: 960px; margin: 0 auto; padding: 0;}
.header {background: #000; height:83px;}
.header .logo {background: #000; float:left; height:83px;}
.header .tagline {background: #000; float:right; text-align:center; padding-right:10px; padding-top:10px;}
.taglineMain {font-size:1.3em; color:#FC0;}
.taglineSub {font-size:1.2em; color:#fff;}

The container is 960 pixels wide with no margins or padding.  The header background is black and 83px (the height of my logo) high.  I probably have some redundant styles in there, but this is a work in progress.  The tagline floats to the right, and I added some padding to the top and right so it isn’t flush against the browser.

To reduce the size for 768 and higher browsers, all I had to do was change the width of the container:

  @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container {width: 768px;}        
    }

The final size I played with was 480 and up, which would require the logo and tagline to be stacked.  I also decided to add a border between the two blocks so properly delineate the logo.

This is where I had to start playing with the styles a bit more:

@media only screen and (max-width: 767px) {
        .container {width: 460px;}
        .header {display:inline;}
        .header .logo {float:none;}
        .header .tagline {float:none; height:auto; border-top: 1px solid #C57227; padding-right:0px; padding-top:0px;}   
    }

The container size has been reduced, naturally.  I also removed the float for the logo and tagline blocks.  While that made them stack, the text beneath was running up into my tagline block.  To get rid of that, I had to make the header display as inline.  Still trying to gain a better understanding of that, but it did work.

I also made some other display changes to the tagline, like adding an orange top border and removing the padding from the top and right, since they are no longer needed.

As I continue with this project, I will be posting full page files and more code examples of my website.

I’m very excited!

Advertisement

Responsive Web Design – Day 1

After many years of focusing on the programming aspect of web side development – ColdFusion, SQL & jQuery – I decided it was time to get back into the game of better web site design.  After all, HTML is apparently up to version 5 and CSS 3 is now pretty much the standard.

This renewed interest is in thanks to a large part in my attending RIACon 2012 a few weeks ago.  There was a lot of focus on building sites for mobile devices and I was introduced to the wonderful world of responsive design.  Those of you who are not familiar with the term – as I was not – fear not!  It is a concept I was familiar with already – sites that update their design and layout when the size of the browser changes.  I could give you lots more background, but just do a Google search of jump to Wikipedia for more information.  One of the issues I face is one of my largest clients still uses IE7 in-house.  Anyone who has worked with jQuery UI knows how much fun IE7 can be.

I’ve been looking at some of the frameworks for a week or so, and finally settled on one yesterday.  I downloaded it and created a small test site on my computer.  I also browsed different sites that use responsive design and found some to use as starting guides.  After an hour or two I realized I was out of my element – no pun intended.  For years I’ve just been copying styles and making modifications to do what I desired, but I never really understood how the CSS worked when it came to layout.  I would just make change after change after change, hoping I could reach my preferred outcome.

So yesterday I decided that I’ve had enough of that.  I figured it was time to actually learn the advanced concepts of CSS so making something the work the way I wanted it to was just a matter of making a change, not hours of trial and error.

Because I’m old, I decided to go out and buy some actual, paper books.  I just learn better that way.

I will be posting regular updates on this journey for those of you interesting in seeing an old dog learn a new trick.  Maybe you’ll learn something along the way as well!

Variable Placement in SQL Queries

When I’m creating complicating queries, I tend to build the query in SQL Query Analyzer before copying the code into my ColdFusion page. Other times I will copy the ColdFusion debugging code into Query Analyzer with the variable values to recreate a result set. Either way, handing variables can be tricky. I either have a hard time locating the variables to put in static values, or forget to remove static values and put back in the variable place holder before pasting back into CF. Anyone else do this?

To make my life easier, I’ve starting declaring all of my SQL variables at the top of the query. This has several benefits:

1. I can easily see all the variables and their data types at the top of the query
2. I don’t have to hunt around to find/replace values
3. I only need to pass in the same variable value once

Here’s an example of a query in Query Analyzer:

DECLARE @startDt DATETIME
, @endDt DATETIME

SET @startDt = '1/1/2004'
SET @endDt = '1/31/2004'

SELECT *
FROM SalesOrder SO
INNER JOIN SalesOrderDetail SOD ON SO.SalesOrderID = SOD.SalesOrderID
WHERE 1 = 1
AND (
@startDt IS NULL
OR SO.SalesOrderDt >= @startDt
)
AND (
@endDt IS NULL
OR SO.SalesOrderDt <= @endDt
)

For testing purposes, I’m getting all sales in January 2004 (Sorry, my test DB has OLD data). When I past this into CF, I only need to change two lines:

SET @startDt = <cfqueryparam cfsqltype="cf_sql_date" value="#startDt#"
null="#IIf(IsDate(startDt), DE("no"), DE("yes"))#" />
SET @endDt = <cfqueryparam cfsqltype="cf_sql_date" value="#startDt#"
null="#IIf(IsDate(startDt), DE("no"), DE("yes"))#" />

If either value is empty, a NULL value will be passed into the query and the WHERE clause will properly handle that value.

While it does create more code, it is a much more elegant – and stress free – way to design a query.

Returning Delimited Lists in SQL

In a past CFUnited SQL presentation, I gave a demonstration on a Transact-SQL (SQL Server) concept known as cross apply which will return a delimited list of items in a query. This is a great way to roll up a one-to-many relationship into a single row. For instance, the following example returns all the reasons for which a sale was one, which may be zero or many. Regardless of the number of reasons, each sales order will only returned once, in one row:

SELECT TOP 100 SOH.SalesOrderID, SOH.OrderDate,
   LEFT(SalesReasonList, LEN(SalesReasonList) - 1) AS SalesReasonList
FROM Sales.SalesOrderHeader SOH CROSS APPLY (
   SELECT SR.Name + ', '
   FROM Sales.SalesOrderHeaderSalesReason SOHSR
      INNER JOIN Sales.SalesReason SR ON SOHSR.SalesReasonID = SR.SalesReasonID
   WHERE SOH.SalesOrderID = SOHSR.SalesOrderID
   ORDER BY SR.Name
   FOR XML PATH('')
) AS Cross1(SalesReasonList)
ORDER BY SOH.SalesOrderID DESC


You can download the full presentation on my presentation page.