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.

Mobile Website Methods with Asp.Net MVC. Part 1 – Content Sites

I have a fair amount of experience building mobile sites. Mobile sites are essential now because so many people are using mobile phones and tablet devices to browse the internet. Many sites don’t have great mobile experience. They use flash, rely heavily on hover effects, or they have so much content that it takes forever for the page to load.

I’m going to show how I made a mobile version of my site in just a couple hours using Asp.Net MVC and jQuery mobile. My site is primarily content and has very little code involved on it. My website is very basic and very straight forward. I browsed through my site and decided to find the basic information I wanted to display on my mobile version. In my case, I wanted to display my portfolio, resume, about me, contact me, some of my social links, and an about my mobile page so people could see what technology I used.
Continue reading “Mobile Website Methods with Asp.Net MVC. Part 1 – Content Sites”

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.

Several Great Mobile Emulators for Windows Users

Nothing beats testing mobile sites on actual mobile devices, but it can be really annoying to have to frequently deploy to view every small change you make. I haven’t had great success with the Andoird and Black Berry emulators on my machine. You have to install a bunch of extra stuff and it is not straight forward. The iPhone emulator is great, but I don’t develop on a Mac, don’t easily have access to one and don’t really want one.

Here are a few apps/methods for initial mobile development, but I haven’t tested any HTML5 capabilities with these (except Safari).

Safari

Totally ghetto, but this is normally what I use for testing javascript and inspecting the DOM. The browser has a built in feature that lets you change the user agent.

Opera Mobile

This is my tool of choice for checking page layouts. It is fairly lightweight and pretty customizable on resolutions and other fun stuff like that.

iBBDemo2

This is an Adobe AIR app that acts as an iPhone and iPad emulator. It is pretty nice, but I frequently find myself forgetting the commands to rotate the device and change the device from iPad to iPhone.

Windows Phone 7 Emulator

Fairly useful. Takes a little while to load, but is fairly nice once it is up and running.

Palm Pre Emulator

Runs on Virtual Box. It has been about a year since I used it though.

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.

From iPhone to Android: The Hardware and Software Transition

Less of a rant, more of an analysis. This is based off of the Samsung Captivate running Eclair(2.1) on the AT&T network. You may see slight differences in other android phones. Initially, you wont notice much a difference. You lock with the button on the right side of the device. This is much like the lock button on the top. The device is unlocked by swiping, but in any direction. Navigation through interfaces is very similar.

I’m going to give a quick rundown of: the home screen, general settings, email, applications, and the market.
Continue reading “From iPhone to Android: The Hardware and Software Transition”

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.

From iPhone to Android: Why I Chose Android

First, I would like to start off by saying that a lot of this is just my opinion. Take it or leave it.

I started working at my current job in November 2007. After starting, I learned that that they would purchase an iPhone for you after six months of being there. This was when the original iPhone was out. Back then, the iPhone was a status symbol. It was an expensive phone that you’d usually only see business people using. I kinda flipped out when I saw that 20 out of 25 people working there had iPhones.

I’ve always had a desire to fit in and be cool. Read my Geek Blog to hear more about that. I was really excited to hear that the iPhone 3G was going to be released after my six months. I felt like I would finally be in the Mac is Cool Club… boy was I wrong…..
Continue reading “From iPhone to Android: Why I Chose Android”

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.