Web Design

Saved by Strikingly Site Builder

Back in September of 2013, I was one of many folks who were laid-off from their jobs. Still, not that uncommon.  However in my case, this was my third layoff in 6 years!  After 25 years of jumping through corporate hoops I decided corporate America was showing me that they just didn’t care enough about hard working, dedicated professionals. So screw those corporate monkeys, I decided to start Gannon Solutions – a digital consulting agency to help small and mid-sized businesses with their digital needs. My focus was everything from strategy, innovation, content marketing to corporate identity, branding and simple web design.

Now how to get started? First things first, you have to have a website with strong SEO to simply be legit and get your name on the web. Seed money was a factor in the beginning and not being a developer myself, I began researching ways to get my site up and running fast and inexpensively. That’s when I came across Strikingly. It wasn’t the first web builder I found. There is just a ton of them out there. In fact, Strikingly was one of the last ones I found. Saving the best for last served my purpose perfectly.

Strikingly has one of the easiest user interfaces I’ve worked with. It is very intuitive to users. The simple interface allows you to test different features without worrying that you’re going public. You can save as you go and publish once your happy with the look. It also has mobile previews that I found very helpful, as I wanted to be sure to have a responsive site that looked great on all devices.

My business is operating well, I’m happy to say. I hire developers to assist me in creating all different kinds of websites from native code to open sourced templates; but I always provide my clients with the option to use Strikingly because of its simplicity and low cost. You’d be surprised how quickly that can make a a trusted bond as a consultant. Too many consultants are in the market charging far too much for web development. I often think of it as how some people profit from the under-privileged during a disaster. Web sites are a single channel for a business, albeit an import channel. As a consultant, one should never take advantage of a business simply because development is a higher skill. Strikingly helps me to provide a simple, inexpensive solution to a single channel opportunity.

So when Strikingly asked me to blog about their service, I was happy to oblige.  I love how gannonsolutions.com turned out.  I keep it updated and fresh with new content.  I also made a resume site at shawngannon.com with Strikingly. Both sites are optimized for SEO and have garnered much attention. I’m a pretty satisfied customer. Thanks Strikingly for helping me out in a pinch!

 

 

Gannon Solutions Philosophy

At Gannon Solutions, we care about vision and strategy first. We research and deliver engaging planning. We design and develop beautifully tailored websites and products cunningly optimized for all devices. We are a full-service digital firm. That means we partner with you from inception thru analytics to help you stay relevant to your current customers and attractive enough to attain new.

Gannon Solutions connects you to customers in meaningful, innovative ways.

Go to slideshare link below to learn more.

Gannon Solution Digital Marketing Strategy and Product Development from Shawn Gannon

 

How to Maintain Image Aspect Ratios in Responsive Web Design

Image

Consider a typical set of image gallery thumbnails:

1
2
3
4
5
<ul>
  <li><a href="#"><img src="http://lorempixel.com/320/180/abstract" /></a></li>
  <li><a href="#"><img src="http://lorempixel.com/320/180/city" /></a></li>
  <li><a href="#"><img src="http://lorempixel.com/352/198/technics" /></a></li>
</ul>

We can show this gallery at any size in a responsive page template using CSS (essential properties shown):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
ul
{
  width: 100%;
  padding: 0;
  margin: 0 0 2em 0;
  list-style-type: none;
}
li
{
  float: left;
  width: 33.3%;
  padding: 0;
  margin: 0;
  background-color: #000;
  border: 10px solid #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}
li a
{
  display: block;
  width: 100%;
}
img
{
  display: block;
  max-width: 100%;
}

This works well because all our images have the same 16:9 aspect ratio. The height of the image is exactly 56.25% of the width (9 divided by 16 expressed as a percentage).

responsive thumbnails

However, we web designers are paranoid: people conspire against us and supply photographs in an infinite range of sizes and aspect ratios, e.g.

1
2
3
4
5
<ul>
  <li><a href="#"><img src="http://lorempixel.com/320/180/abstract" /></a></li>
  <li><a href="#"><img src="http://lorempixel.com/320/320/city" /></a></li>
  <li><a href="#"><img src="http://lorempixel.com/200/150/technics" /></a></li>
</ul>

responsive thumbnails

There are various solutions to this problem:

  1. We could resize every image by hand. That’s time-consuming and tedious.
  2. We could implement a clever automated server-based image resizing solution. That could take a while and resulting images may not be as polished or optimized as we like.
  3. We could throw a diva-like tantrum and refuse to work under such conditions. Of course, that’s unprofessional and none of us would resort to such tactics (too often).

Or can we use CSS to solve the issue?

We can, but it’s not as straight-forward as you may expect. In the old fixed-width design days we would have known the width of our image placeholder. If it was 160px, we could make the height 90px and leave early for a beer. In this example, our width is 33.3% of the container minus 20px for the border on the left and right-hand edges. It could be any size so setting a fixed height will impede our required aspect ratio.

The Percentage Padding Ploy

A little-known quirk of padding is that setting a top or bottom percentage bases it on the width of the containing block. If your block is 100px in width, padding-top: 30%; will equate to 30 pixels. I suspect this was done to make rendering calculations easier since element heights are normally determined by their content. Besides, if you had a fixed-height parent of 300px and set padding-top: 200%; on a child, the parent would become at least 600px — thus leading to a recursive cascade which breaks the web.

Whatever the reason, it’s very useful since it permits you to set an intrinsic ratio, e.g.

1
2
3
4
5
6
#element
{
    position: relative;
    height: 0;
    padding: 56.25% 0 0 0;
}

This element will retain a 16:9 ratio based on the width of the container. The height has been set at 0px but, since we have set position: relative;, we can absolutely position any child element.

As far as I’m aware, the padding trick was first highlighted by Thierry Koblentz to create responsive videos, but the same concept can be applied to images or any other content. Let’s update our thumbnail CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
li a
{
  display: block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 56.25% 0 0 0;
  overflow: hidden;
}
img
{
  position: absolute;
  display: block;
  max-width: 100%;
  max-height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

The result will show the image with black borders if it does not have a matching 16:9 dimension:

responsive thumbnails

View the demonstration code…

Play around with the CSS. Removing the image max-width or max-height can apply cropping effects rather than resizing. I hope you find it useful.

Contributing Editor

Craig is a Director of OptimalWorks Ltd, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.