Lessons Learned And Tips – Responsive Design

I recently came off my first project where I got to fully implement a responsive design for a desktop to mobile website. I’ve done several in the past where we would do certain things for portrait and landscape or tablet to mobile design. I feel desktop to mobile was defiantly more challenging. The project was a huge success and there was excellent work by all teams, but there were several few “gotcha” moments that almost happened. These weren’t due to lack of attention to detail, but more along the lines of new discoveries. I’m going to outline some things that we executed that helped out greatly and a few other things that caused some headaches.

Keep the layout simple

Look at your site content before you begin to implement a responsive design. Can you present all of your content in one column and it still be relevant? You may want to look into a full mobile implementation if you can’t do this.

You can always use Javascript and CSS to show hide content based on screen widths. I’d recommend using caution when going wit this approach. You shouldn’t be hiding more than you are showing.

The Boston Globe is a great example of appropriate use of a responsive design.

Be careful with date pickers

Ever try to use the jQuery UI date picker on a mobile phone? It’s not fun. You can set the input type of your text box to “date” so that a mobile phone will open the native date picker. However, some desktop browsers support date inputs and we didn’t want double date pickers. I found an article on how to handle HTML5 and the jQuery UI date picker here.

Avoid CSS Clear Fixes

Yeah, I’m guilty of this like crazy. It’s a quick fix, but can be really killer when you need to restructure how the elements align on the front end. Instead of using a clear fix, you can apply an “overflow” with a value of “auto” or “hidden” to the parent wrapper to get the same effect. This is the best article I’ve found explaining CSS floats

Watch your device dimensions

For the longest time phone screen dimensions were 320 by 480. The iPhone 5 and Galaxy S3 have been released and their screen sizes are a little bit different. The iPhone 5 has a size of 320 by 568 and the Galaxy S3 is 360 by 640. Yes, I know their specs say different, but this is if we set their pixel density to 1 instead of 1.5+ (retina). The old methods aren’t reliable anymore. We must remain flexible in the mobile world. I’d recommend portrait going to 479px and landscape going to 767px. This IS stepping on smaller tablet’s toes. The Kindle Fire would pickup our mobile landscape mode. So figure out what will suite your needs best. This is a good example article with some media query snippets to use as a starting point. You will need to tweak for more modern devices, but the logic remains the same.

Keep the background repeatable

See the above note. Fancy background images can be problematic when you try to stretch a background to fit all phone dimensions and look crisp. I recommend solid colors, gradients or an image that repeats horizontally well.

Avoid using img tags

This mainly applies to using icons. Trying to dynamically change image tag source attributes can’t be done in CSS and you would have to rely on javascript. I recommend using a block element like a div tag and setting the background to your image. You can then change the background image in CSS when your mobile layout is applied. If you are working with an instance where an image tag was already implemented, wrap it in a div, hide the img tag when in mobile and set the div’s background. It’s not the most graceful approach, but will work if you are in a pinch.

Rely on CSS more than Javascript

This is probably the biggest thing I learned. Do your best to keep all your responsive design related stuff inside of CSS and use media queries to determine when to load them. I’ve seen sites use javascript to determine if the screen is landscape or if it is a specific width by attaching an event to window.resize. This can result in a really glitchy experience if the user manually re-sizes the window.

I hope you found this post useful for your next responsive design project. Thanks for reading.

I’m a Technology Architect for Rockfish Digital. I’ve been there since 2007. I love coding and spend most of my time in C# and JavaScript. I’m a firm believer in the Full Stack Developer.

How to use cloud storage services to sync saved games across PCs

I’m a big fan of playing games over my lunch break. It is a great way to unwind for an hour or so before. Minecraft is probably my favorite one to play right now. I ran into an issue about a year and a half ago when I first started playing Minecraft. I wanted to be able to play my worlds on my home PC in the evenings and play them on my work laptop during lunch. Many services now, like Steam, offer cloud based game saves. I had to hunt down a method to do this for games that fell outside of this realm. I was already using Drop Box for cloud storage and I found a few articles on how to use it to use it for your Minecraft saves. I wanted to take it to the next level. You can use a symbolic link to link two folders together and share their contents. You just need to use the mlink command in the command line with the folder paths to create this link.

mlink /d "target" "source"

Your target file location must not exist or you will get an error via command line. I created a batch file that is in my Drop Box folder that I run whenever I hop onto a new PC that I want to play Minecraft on. I link my entire Minecraft directory so that my mods, texture packs, settings and saves get shared to all my computers. To get my batch file to work correctly, you will need to remove your .minecraft folder from you app data folder and move it to your Drop Box.

mklink /d "%AppData%.minecraft" "%HomePath%DropboxMinecraft"

%AppData& and %HomePath% are environment variables. %HomePath% automatically maps to your user directory. EX: C:UsersWorthyD. You can find a list of environment variables here. They can be really useful when setting up these link files.

Here are some of the other links I’ve used.

Elder Scrolls: Oblivion
mklink /d "%HomePath%DocumentsMy GamesOblivion" "%HomePath%DropboxOblivion Saves"

Warcraft 3
mklink /d "%ProgramFiles(x86)%Warcraft IIIsave" "%HomePath%DropboxWC3 Saves"

Remember that you will need to move your original save files to your Drop Box folder before running these commands.

Hope you find this useful. Thanks for reading!

I’m a Technology Architect for Rockfish Digital. I’ve been there since 2007. I love coding and spend most of my time in C# and JavaScript. I’m a firm believer in the Full Stack Developer.