Millions of smartphone users are searching the web with their mobile phones looking for your services. You need a mobile-friendly website to capture their attention and convert them from visitors into buyers. Many of you have business websites that look great on your desktop and laptop. How will you convert your large scale website with large amounts of information to work on the small screens found on mobile phones and tablets?
Like many companies, SeascapeWebDesign.com is working to build a solution that works well on both large and small screens. There are several options available. You can build a separate mobile-only website to attract mobile web users. Or you can build a responsive website that responds to the size of your mobile device and automatically resizes so that it looks good on both the small and large screens.
Katy of SeascapeWebDesign.com found some challenges involved in redesigning a large screen website to work on a small screen. Here are some of them:
1. How to downsize large banners found in the homepage slideshow to work on smartphones?
2. I have portfolio slideshow built with Lightbox with large screenshots and blurbs. How do I get this to look good on a small smartphone?
3. What about background images?
4. How to optimize navigation and content for mobile devices
I learned at the recent PNW Drupal Summit, that maximum 5 buttons is best for mobile displays. Ask your clients what are the 5 most important things you want visitors to do. Put these top 5 items in your main navigation. If your client’s desktop website has 10 buttons and they say that all 10 are important, what do you do with the other 5?
Mobi.seascapewebdesign.com – the In Between site
- I have a Drupal 6 website with hundreds of articles that need to be migrated to Drupal 7. Not ready for that yet - it’s on my to do list.
- I chose not to make a separate mobile-only website. That seems too limiting
- So I made a Responsive website with smaller amount of content that focuses on building mobile-friendly websites for clients
Making the Content Responsive
Navigation
- I have 6 buttons for desktop so I kept it 6 buttons for mobile-friendly version
Homepage Slideshow
- I downsized the slides to large screenshots with captions. Later I will make the captions larger
Background images
- I turned off the background images for mobile and tablet portrait displays
Content
- My Drupal 6 website has hundreds of blog posts that need to be migrated to Drupal 7. I haven’t had time to do this yet. So I decided to focus on mobile-friendly articles and put the latest 6-10 posts on my new site.
- I put the 3 most recent articles on my home page so I always have fresh new content. This is good for SEO
- My desktop website has 10 blog teasers on the blog page. I think 5 teasers would be better for mobile-friendly version
Portfolio
- I created 300 px wide screenshots since this will fit perfectly on smartphone portrait display. Then I wrote blurbs for each project. When you resize the screen, it flows nicely and looks great on mobile devices
Services
- I rewrote my company services page and used large icons instead of tiny bullet points. Using large icons is a great way to illustrate content instead of text headlines and tiny bullet points
Free Responsive Drupal themes
- I looked for mobile-only themes for Drupal 7 but found only one. It's very simple. You need to add your own CSS styling. Has anyone else found any good mobile-only Drupal 7 themes?
- What about a mobile-friendly Admin theme for Drupal? I have a client requesting one for my next project. He loves his tablet and insists on editing his Drupal website with his tablet.
- The most popular base themes are Omega, Adaptive Theme, Zen
Some free responsive themes by devsaran.com
- Premium Responsive (
http://www.devsaran.com/theme/responsive/)
- looks good with nice image slider
- don’t like the mobile version nav dropdown. I prefer thick buttons
- Responsive Business and Responsive Blog
- Professional Theme (
http://www.devsaran.com/theme/professional/)
- I like the large desktop width slider and it downsizes to nice image slider for
mobile except the caption covers most of the image
Here are some Responsive image handling modules:
- Client side adaptive image,
http://drupal.org/project/cs_adaptive_image
- Adaptive Image styles,
http://drupal.org/project/ais
- Responsive images and styles,
http://drupal.org/project/resp_img
- Adaptive image,
http://drupal.org/project/adaptive_image
For testing your responsive websites:
-
www.responsinator.com
-
www.ipadpeek.com
- Firefox web developer toolbar
The most simple way to test your website for responsive behaviour is to grab the bottom right corner of your browser and resize and watch it respond!
Other Drupal mobile resources:
- Browscap Panels and Browscap Blocks
- AdaptiveTheme integrates with Browscap to allow regions to be unset or blocks to change regions when the theme is viewed on a mobile device.
- You can use Panels or Display suite and Context to hide/display blocks for the different layouts. Panels adds a ton of markup and can be difficult to theme
- Mobile Switch, Mobile Switch Block
- Mobile jQuery Theme
- Respond.js
What resources do you use to build and/or test your websites for responsiveness?
