Responsive Design

My 2nd CodePen pen is picked!

I’ve been working on a very large website for an engineering firm that specializes in projects that improve communities and the environment like restoring wetlands and estuaries.

The site uses beautiful images that fill the entire screen with bold text titles. These large images are called “hero” images. I wanted to display the pictures and titles in a way that would look great on all devices. The titles need to be very readable even on a small screen and I wanted to keep the title and images in the same ratios.

After some research and experimentation I found the perfect balance and created a codepen pen to show it off. In the screen print the white title sits in the top left corner of the dramatic night sky with the milky way. No matter how big or small the screen is the image and title remain in the same scale. This is an example of responsive web design.

The image is also a link to codepen.io so you can play around with the screen sizes to see how it adapts.

Responsive Hero Image & Bold Title

My pen was picked!

Codepen.io is a great website where you can make your own “sandbox” to play in and try new programming code. Developers post some interesting and very helpful ideas there. Web developers have new ways to layout web pages which are very flexibile. In fact, one of the layouts is called flex box. Its been eclipsed somewhat by CSS Grids which has more features. I read many articles that talked about using CSS Grids to divide a site into header, body, side bar and footer.

Most sites have way more sections than that. I wanted to create a template that I could use over and over again. I started playing around and came up with reusable, responsive grid layout that I posted on CodePen. It isn’t easy coming up with a new idea for codepen so I was thrilled when my pen was “picked” today.

I’ve attached a few screenshots as well as the link if you want to try it yourself.

https://codepen.io/jfksdca/pen/wZaQbx

Grid-Sections-Stack-on-Mobile-DeviceResponsive-Grid-Sections

How Does Your Site Look on Your Phone?

How Does Your Site Look on Your Phone?More than ever we access the internet with our tablets and smartphones. We rely on them to make dinner reservations, find out store hours and special offers, or book a night at a local bed and breakfast. You might be at a party discussing your favorite massage therapist, real estate agent or even your couples counselor. If you share that contact there is a good chance your friend will immediately click the link to their website. As a business owner, the worst thing is for your prospect to find a blank white screen on your site. This can happen if your site isn’t optimized for mobile devices.

A blank screen usually means the original site uses Flash. Flash was once the standard for creating animations on the web but it isn’t supported on the majority of mobile devices because of battery life. Animations that work on all devices should be created with newer technologies like HTML5.

Flash is a perfect example of how web technology is constantly evolving. Keeping up with those changes is a challenge. As a small business owner you want a web developer who is familiar with the latest technologies and “responsive” design.

Responsive design is much more than a website that loads quickly. A website built to be responsive will actually take into account the specific device you are using. Someone using a desktop or laptop computer will see all the images and get all the bells and whistles. On a tablet the website will shrink images, hide some of the graphic embellishments and present information more succinctly. On a smartphone the text size is often larger, the columns reduced to a single row, while navigation menus, phone numbers and directions are often moved to the very top for the fastest access.

Responsive web design is a premium service as the developer must effectively build 3 sites (desktop, table & mobile.) These 3 sites must then be tested on a wide range of browsers and devices. The additional cost is well worth it so your customers can quickly and easily interact with you on the go.

Published in the Jan/Feb issue of the GSDBA Community Connection.

Scroll to Top