Building a Mobile Site: Tools?
-
I've been tasked with re-building our company's mobile site and honestly have zero experience doing so. I know my way around HTML pretty well and have built several websites but never for mobile.
Does anybody have any recommendations for me as far as tools to use to construct a proper mobile site? I basically want a simple page with four buttons on the front and a little drop down menu in the top corner. (not that this matters terribly but just saying, shouldn't need to be overly complicated.)
Thanks in advance!
-
Kristina -
Thanks for reaffirming my notions! And that is a brilliant friggin' idea.. "mobile first!!" I LOVE IT!
Alrighty so I'll keep pluggin' away and I'm betting on the mobile site drawing in a surprising number of conversions as a result.. Time will tell! Thanks again
-
Wow Kristina thank you so much for all of these helpful tips and resources. This is fantastic. You guys over at Distilled are doing impressive work and I'm jealous of all of you over there working for such a fabulous company who gets it.
Yes time is tight on this project.. money not so much. I actually have a pretty decent budget to play with. That said we recently underwent a site re-design and while I personally think we should sub it out and have a professional (with my guidance) re-design the site AGAIN with responsive design, I can not convince my bosses of this. And my main concern with responsive design is that it would take a massive overhaul of our current site and take much more time.
But I'm also concerned with the content. There is far too much content on our current desktop site which I don't think fits at all in mobile. So that was the main reason I wanted a separate mobile site.. the content was to be scaled back, simplified, and streamlined with a much smaller sitemap and much less "blah blah blah." (Of course I feel our main site should be this way too but I digress. I'm hoping that I can design the mobile site with this concept and show a higher conversion rate thus helping my case to re-thinking our desktop site.)
At MozCon Avinash told us all we sucked and showed us how we sucked. His favorite mobile site was motrin's (m.motrin.com) which is a separate site with scaled-back content. I have to agree with him that it's pretty sleek and does the job. Basically I am addressing this from the angle of "if a potential/current client lands on our page via mobile, what are they trying to see or do?" and the answer is most likely far less than the desktop site offers.
Does this make sense to you and seem like good reasoning to stick with the mobile design? I've been playing with the dudamobile builder and it is so incredibly easy that I may just end up doing that and paying them their $9/month to host it ad-free.
Anyway thanks again for the awesome response!
-
Hey Jesse,
There's a lot of debate about the ideal way to build a mobile website, but your initial question made me think that you don't have a lot of time and/or money to spend on this. Is that correct?
If it isn't, I would spend some time researching the pros and cons of responsive vs. a separate mobile site (I won't go into it too much more than that - I'm obviously biased: http://moz.com/blog/seo-of-responsive-web-design). Setting your company up with the right sort of site the first time around is going to save you a lot of time, effort and money in the future. I really like Aleyda's mobile site audit to help guide you: http://www.stateofsearch.com/mobile-seo-audit/
But, if you don't have the time/money/support to knock it out of the park quite yet, building a decent separate mobile site is a good option. (You can't really half-ass responsive or else you'll mess up your desktop site too.)
You originally said you're good with HTML, so have you thought about just building the site yourself, with inspiration from CMS templates? Building mobile sites isn't that different from building desktop sites, although you want to stick to HTML and CSS as much as possible (no Flash)! The bigger issue is figuring out the design with such a drastically smaller screen size.
Like I said, you can probably look at a great CMS's design and mimic it somewhat with your own HTML. You can also read our guide to mobile best practices, http://www.distilled.net/training/mobile-seo-guide/ (ahem not to over promote ourselves or anything), which has a section on design. The key issues I'd keep in mind are:
- Use your web analytics to figure out the standard screen size for your mobile visitors. It's probably around 320px. Design your mobile site for that width, but make everything relative (i.e. 80% vs 80px) so that the display will change to fit the size of the mobile visitor's phone
- A button or link needs 28px x 28px around it to be easy to click. If it's inline links, there can be text around it, but no other links.
- Redesign for a single column layout. Get rid of ads or move them to the top or bottom of the body copy. Hide navigation behind a drop down. I really like how Bridgestone does that: http://m.bridgestonetire.com/
- Make your mobile site fast. Shrink images down to a smaller size, then compress them again (or, if they aren't already compressed on your desktop site, just compress them everywhere ). Go to http://tools.pingdom.com/fpt/ to test how fast your site is.
Good luck!
Kristina
-
Well I'm battling with this currently; The root of the problem is I'm not sure how it works either way. I'm not really a developer by heart and this is new to me.
Following distilled's flow-chart I ended up with "build a separate mobile," primarily because I want users to convert differently via the mobile site than the other. Also, our primary site is PACKED with text and content and I want to display a much simplified version of this on the mobile. Whereas some of our primary pages have 14 paragraphs on the desktop version, I want 2-3 max on the mobile.
In other words, the messaging will be simplified, streamlined, and targeting a separate conversion. Mobile users don't want to read all that crap, but I will have links to the "full site" on the bottom of each page if it turns out they need more info. Basically I'm assuming the mobile users know what they're looking for and are coming for quick info/conversions/support help.
(the support pages can be responsive I suppose...)
I don't know. Based on what I'm saying, what do you think?
I appreciate the thoughts everybody, as always.
-
I was about to say the same thing that Matt said, is there a reason why you're looking at a mobile site and not a responsive site?
Responsive sites give companies the flexibility of only managing one site and usually are very SEO friendly. (You don't have to worry about issues like duplicate content.)
-
Google's preferred approach is to have a single site that is responsive to the screen of users - ie it resizes, re-positions and shows/hides different blocks for different resolutions. They prefer this to a separate mobile site - which isn't a big surprise if you consider how much resource they use crawling websites!
Whether this is the best result for users can be dependent both on how well thought out the approach is, as well as what users are actually looking for.
Here is a useful post from Kristina Kledzik at Distilled weighing up the benefits of each: http://www.distilled.net/blog/seo/choosing-responsive-or-separate-mobile-site-platform/ (includes handy flow chart)
What else am I missing?
I am quite a heavy user of mobile web. I'd much rather use a well designed desktop site than a badly designed mobile one. My biggest (personal) frustrations are:
- Slow. I use the web on the move - I want sites to load quickly
- Dictatorial. If a mobile website sucks I want to use the full version. Don't stop me doing that (as an android user I have an advantage here - it is very hard to stop me! It is common on the ipad though)
- Too little info. Only really an issue when coupled with the above, but if information is cut back for mobile users then a "view desktop version" becomes even more important
- Small menus/links : Touch screen + fat hands. I want to be able to click stuff
- Not tested on mobile. THIS DRIVES ME NUTS. So many people have mobile or responsive sites then don't test them. It's surprisingly common to find someone's expensive mobile site totally unusable because of an interstatial ad that you can't remove, or a menu that can't be clicked.
- Speed... I mentioned speed right ??
-
Can you expand on that last notion?
I understand that I don't want to cram a full site's worth of info onto one mobile design.. My idea is to have a scaled back simplified version of our site with the most popular content covered as well as the blog feed updated and currently pulled from the live site.
What else am I missing?
Thanks to everybody so far you've all been incredibly helpful.
this community
-
So I was looking at this as it was the top organic google result and got worried when I saw the limitations of a "free" account. It seems to host on a monthly basis and I don't really love that concept. I want to be able to host the site on our own servers in-house. The company is a SaaS company so our login pages will need to be embedded and there are security issues when operating outside of our own servers...
*(I'm already going to have to talk with engineers about the mobile implementation and I just know they'd freak if I told them we were hosting offsite.)
Still I love the simplicity of the formatting and already saw a template I would want to use here... Anybody know of a tool like this I can purchase one-time and host the files on my own server?
-
Long term it may well be better/easier to use a simple CMS that has a responsive layout option.
I'm a big fan of Drupal, but the Drupal learning curve is infamously unforgiving if you are new to it. At the other end of the scale is Wordpress, which is about as easy as software adoption gets. Team that up with a responsive theme and you have something that will allow you to follow best practice at serving users at a variety of resolutions.
Don't forget though : Mobile isn't just about fitting everything on the users screen. In terms of return on effort, the best thing you can do for mobile users is often to make buttons/links bigger and speed up the site.
-
I did look at that first link briefly and didn't really love the templates they were giving me. Looked pretty cheesy but perhaps there was a way to customize this and I just didn't dig deep enough. Still, the howtogomo link is awesome and I will definitely be bookmarking/referring to this site as I go.
Thanks!
-
If the site is simple and you don't want to spend a ton of resources on it, just create it via: http://www.dudamobile.com/ (has limitations, but can create a site in 5 minutes).
-
Hi Jesse,
Have you already looked at Google's tool for building mobile sites?
This also has some great resources www.howtogomo.com which also is a Google site.
Hope this helps.
Mike
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Competitor's new site ranking with out much keywords - How?
Hi all, One of our competitors have recently redesigned their website with new content. Now I can see much less keywords in the content. And page title also changed away from keywords. Still this is ranking at good position. How? Previously they used to have much landing pages with related keywords which some of them are missing now. Still I wonder why this website is ranking high? Thanks
Web Design | | vtmoz0 -
What To Do When Improved Site Speed & Layout Result In Higher Bounce Rates & Lower Time On Site
We launched a new Bootstrap 3.0 site template 2 weeks ago. The site loads 5x faster and has a much improved layout (utilizing most common above the fold recommendations ). It's only been two weeks, but our bounce rate has increased 5-10% and our avg time on site decreased by 10-18%. Here is the page for one of our most common products so you can see the general experience: <a>http://www.jwsuretybonds.com/surety-bonds/commercial-bonds/auto_dealer_bond.htm</a> (here is the old version: <a>http://199.119.123.134/surety-bonds/commercial-bonds/auto_dealer_bond.htm</a>) We spent two months implementing the new design and working on a speedy load time. We had anticipated a drastic improvement, not mild downturn in user behavior. I'm hopeful that the Analytics metrics aren't showing the true picture on the keywords we care about (can't see anymore due to "Not Provided" listed as most keywords now. Argh!) and perhaps some of the more important/accurate user behavior metrics that we can't see are improving. We know our industry and our clients needs VERY well. We THOUGHT our new content/layout was perfect so it will be tough for us to try to make improvements at this point. We believe our best plan of action now is to add more content on each page and A/B test it along with other subtle changes. The problem is that our new content is very concise and hits on all of the primary visitor intentions, so additions of content could be redundant and making concise answers more "fluffy", which is what we tried to get away from. What do you think? Is there reason for panic? What would your plan of attack be if your "sure shot" new design didn't provide the improvements you "knew" it would? 🙂
Web Design | | TheDude0 -
Retina Sites
What's the best way to make a site retina ready? Just code one site with retina resolution graphics or rather serve up two different sets of graphics depending on what comp is being used on the other end? Thanks in advance. I appreciate the input. Stephan
Web Design | | stephanwb0 -
FTP hacked - links build...
Hi guys, our ftp got hacked a few days ago and the person uploaded a bunch of html pages with links to fake rolex websites. They also build a ton of links to the urls they had created in the image folder on our site with very spammy keyword anchor texts all in line of the same fake watches. What do you recommend as a plan of action? Make a list of all the backlinks and upload them in the Google disavow tool? Obviously i have already deleted the pages they were linking to and secured our ftp. Looking forward to your advice 🙂
Web Design | | Immanuel0 -
My Site Is Using A Lot of Hosting Bandwidth. Suggestions?
My website http://www.socialseomanagement.com/ is using tons of bandwidth. I received a message from the hosting company saying I exceeded my monthly bandwidth and it has only been a few days. Can anyone take a look and make suggestions? Thanks
Web Design | | JChronicle0 -
Turning my Design Business site into a site to promote SEO
I need advice on retooling my website for my SEO biz. I have shifted my business model from graphic designer who does websites, to "internet marketing consultant who does graphics too". My main website and domain name is over 10 years old, so I've made the decision to keep it, even though it has no keywords in the name. The name works well for the new business, otherwise. The site has a PR3 and I rank well for small business advertising terms, which gets me graphic design business. I intend to keep doing graphic design, but that is a smaller part of my income. I had considered making 3 satellite sites with keyword domain names to cover my offerings of graphic design SEO, website development, and internet marketing. But am leaning against it for several reasons (that all of us SEO's know) but mainly the fact that I cannot keep up with both working for my clients and blogging on multiple sites and link building for multiple sites. So my question is (you knew there was one coming, right?), what is the best approach to building categories of web development, internet marketing, and SEO into my existing graphic design/advertising oriented website? This is slightly embarrassing to ask as an SEO, but given the multiple approaches possible, and knowing the importance of doing it right the first time, it's best to get an consensus perspective on the BEST approach. My main concerns are the navigation system and the links from the homepage into the site. I have too many pages I've identified as essential to link off of the home page and navigation menus? (Website development, social media marketing, link building, keyword research, pay per click, online advertising, graphic design, brochures, catalogs, Logos, Branding, SEO, keyword research etc.) I've always tried for the ratio of one link off of any page for every 100 words of content. Do I create a home page that is of monster proportions? Do I just have the 4 basic areas linking off the home page then create a "landing zone" of 4 folders and create down from that? I am concerned about URL length as I go deeper with that approach. Or, does it make more sense to have a dozen second-level pages, and not link them all off the home page, and build from beneath (and relying on external juice). Next issue is the nav system. It will be huge. Am I best off just keeping it to 4-6, and creating subnavigation on everypage within the site according to section (PITA)? I've read dozens of blog opinions on how much nav systems do or do not hurt link juice. I've always thought footer links were right next to worthless to pass any juice, but given this situation, does it make sense to make a footer link for each major page (about 20)? Thanks for your opinions.
Web Design | | JCDenver0 -
Redesign of an ecommerce site
I was just wondering how we should deal with filters and pagination with our ecommerce website. We can do nofollow or noindex, follow or canonical for both filters and pagination. Which one we should choose and why? By the way we are trying to create more sub categories to avoid too many pages but we have 1,000s products and we still end up with a quite high amount of pages. I've read a few conflicting seomoz QA about this issue. Many Thanks
Web Design | | Jvalops0 -
Setup of three major retail sites.. need advice.
I recently have taken a new position responsible for three large national retail sites which are all owned by one parent organization. Through a series of acquisitions, these three major brands have been brought under one umbrella and a brand consolidation is likely not to happen within the next 2-4 years. I have a number of questions I’m hoping to get some feedback on, but first a little more background is necessary. A year ago (before my time) the three sites were over-hauled, but were designed to use one common custom CMS and all of the navigation and nearly all the content is the same (with some exceptions, such as tags, url, etc.). All of the brands have identical products and services; however, each one services a different demographic in the US. The design was intended for ease of management, but is terrible for seo. Additionally, without the geographic reference, they all compete for the same keywords. They have now begun a very large ecommerce project utilizing an ATG platform. The initial direction is to use one platform for all three brands, but keep them on separate domains and with the use of basic switching, replace nominal content such as logos and references of the brands for each of the domains. I’m concerned with this approach and would like to hear your feedback.. When optimizing a page for one keyword set, are they likely to be filtered due to dup content? The argument that management has is that all three current sites rank very well for one keyword on all three sites. They feel it won’t be an issue due to this. One option, that is currently still available, is to tri-band one ecommerce site, but it would have to be on an entirely new domain. The other three domains are very well established and are PR6s. Management, and even I, is afraid to abandon these other domains, but having a single domain would allow us to have unique content and really leverage all efforts to one domain. Thoughts? Any knowledge or thoughts what kind of impact having three domains on one ATG platform will be? Thanks much! John If you feel it will help, please message me and I can share the urls... Also, how would you handle a company blog in this case?
Web Design | | kavaliauskas0