Please enable Javascript for optimal viewing. For help, click here.

Mobile Web

Blog

Mobile and Responsive Design.

Making use of the latest approaches in web design we created a mobile version of our site using CSS3 Media Queries. Viewing our site on a mobile device you will see a specially designed layout that adjusts the content to fit the narrower screen size.

We are currently working on a layout suitable for tablet devices like the iPad as well. Many regular websites look good on tablet devices already but it is important to consider that touchscreen devices may behave differently than a browser designed to work with mouse functionality (there is no hover function on a touch device for example) .

We understand the importance of ensuring a seamless user experience no matter what the viewing platform. With the number of people viewing the internet only on a mobile platform we are keeping this front of mind in all the sites we build. Visits to redrocketcreative.com from iPhone, iPad and Android have almost doubled since we launched our re-design, so we have been able to see very clearly the benefits in taking the time to build a site that is easily accessible by mobile customers.
 
Our traditional approach to website design is based on the 960 Grid System which breaks page elements into a 12 or 16 column grid. With small modifications we can adjust this grid based system to work with mobile and tablet based computers too.
 
I think this new approach is an interesting concept, but you need to plan for it right from the start. It's no longer enough to have a static mockup or Photoshop design, you need design that is flexible enough for different screen sizes . You also need to factor in the orientation of mobile devices as people can switch from portrait to landscape in an instant.
 
This leads to a whole new way of thinking about web design. As the number and size of mobile devices grow we can't design a separate layout for every one of them, so we needed another approach. There are various areas of thinking on this and most involve using Fluid Layouts and Flexible Images that scale content and images as appropriate.

We’re always on the look out for best practices and new ways to make the best of the technologies and techniques available, one site we visit a lot is mediaqueri.es this site showcases some great examples of what is possible using responsive design that showcase mobile, tablet and widescreen specific layouts. Smashing Magazine is another popular resource for guidelines and tutorials.
 
It's early days in regard to what the best technique to use will be but it's an exciting time to work in web design and the team at Red Rocket looks forward to the challenges ahead.

By
Sean Killen

Senior Drupal Architect

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.