There are a lot of different ways to approach mobile websites: mobile themes, mobile sites, apps, responsive design, fluid design, and more. So what’s the best approach, and how can I be sure that it’s going to work for my users?
We’re glad you asked. 🙂 Different approaches work well for different applications, but for most of our websites we choose responsive design. At brandiD, we think this approach is best for content-driven websites and blogs because there is only one database of content, so changes to text and images only need to be made in one place to carry across all devices. This approach also allows you to display all of your content, in a mobile-friendly format, instead of showing a limited sub-set for mobile users. With responsive design there are no “click here to see the desktop site” buttons because it’s the same site, just different formatting.
How does it work?
Think of four people trying to walk side-by-side. In a wide open room they can fit easily, but in a hallway they might need to walk two-by-two. To fit through a doorway they might need to go single-file. Responsive design works in much the same way. Based in CSS media queries, the site identifies a user’s screen width and then formats the content accordingly. On large screens you might see 4 icons or 4 columns of text, but as the screen size gets smaller, the elements get stacked on top of each other.
Mobile Size Two-By-Two
What does my site look like?
Responsive designs vary site to site and theme to theme. One great way to see your responsive site is to visit studiopress.com/responsive/ this tool shows the approximate width of many popular devices. Enter your url into the field at the top to load your homepage into the screens.
Need help with a responsive design? We’d love to hear about your project.