I have an existing website running in wordpress, and uses a custom headway theme. I want to make it compatible with BlackBerry.
What is the process of making it compatible with a BlackBerry?
Do I need separate css, or a separate site dedicated just for mobile?
How do I emulate a BlackBerry and debug my css or design?
Zourtney linked a pretty cool looking plugin, but if you're looking to do this by hand you want to use css3 Media Queries.
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
http://www.davidrcole.com/2010/11/make-your-website-mobile-friendly-in-one-night/
For older blackberries - basically anything pre torch I believe you're going to have very shoddy css and JS support, so you'll want to do some testing on an actual device, and use clean semantic html on your page for better rendering.
First off, you certainly don't want another site -- that is, you don't want another copy of your database. What you do want is theme switching -- found through a quick Google search.
You will want a completely separate Wordpress theme (CSS + html/php). And always be sure that you also include links for mobile users to view the full site (default theme) as well.
Related
I'm trying to create a mobile version of an already existing website. I've tried to read the previous questions on SO but they don't entirely give me all the answers I'm looking for.
The options I have to make my site more mobile friendly are:
1) Convert my current website to be more responsive using CSS Media Queries:
I don't think this approach is suitable in my case, as the UI is fairly complicated and there is more information that I can properly show on a mobile. I will need to make sure I don't show some information that is not as relavent on the mobile.
2) Use php detection and serve up different versions of the same page by using different templates:
This way I can show only what is most useful on the mobile version and load up additional css which specific to mobile. A lot of websites including StackOverflow/Imdb seem to be going this route.
If i go this route, Is it necessary to have a subdomain such as m.mywebsite.com and serve a mobile version on that? Or can i just serve the current page with the same domain and url structure to mobile, only different html/css to better suit mobile. I would prefer to not have the subdomain(StackOverlow seems to be doing this). Also will this be confusing to users and something to avoid as a best practice? Most importantly, how will this affect the SEO for the site? Since some content is missing on the mobile, but present on the desktop, with the same url structure - will it trigger a red flag in search engines and penalize?
Thank you!
Regarding option 2:
There's no need to do the m.domain.com subdomain thing anymore. It makes life much more confusing.
I use the mobiledetect php library (there's a wordpress plugin for it too) to determine the client.
Then use conditionals in your php to provide different content for each.
Regarding indexing, the crawlers will not be flagged by mobiledetect as mobile browsers, so they will index your desktop version of the site. You want this, as the desktop version will no doubt have more content and provide increased page rank. The crawlers will never know that mobile-only content exists so there won't be any penalty.
I want to build a mobile website for an already existing Wordpress site. I prefer to redirect the users to the mobile site automatically if the user is browsing from a mobile device. I will also need to change the contents of the pages regularly and may have to add more pages over time. But I do not want to create two different copies of the same page for desktop and mobile.
Please suggest the best option to go forward with this situation.
Thanks.
I think you would pretty much have to design your theme to dynamically change what it's doing as needed. This might just be a matter of activating the right style sheets or it might be more complicated.
There's a good book on this subject you might want to check out.
http://www.amazon.com/Professional-Development-WordPress-Programmer-ebook/dp/B004T6RKT0/ref=dp_kinw_strp_1?ie=UTF8&m=AG56TWVU5XWC2
You want two sites with the same content, but you don't want to enter the content twice, and for some reason you don't want the site to be responsive. That makes things difficult.
Theoretically you could have both sites taking their information from the same database but in reality it just makes so much more sense to build a responsive site.
In any case, if you must have two sites, you can start by detecting mobile devices with this PHP class.
I am building a website both mobile and pc version.But I am in a fix what should be used to do it.I have some question for which I am confused :
1. make a website with separate mobile version and pc version and render page depending on the device users use ?
2. Another is a single version website that would be all device compatible.this can adapt the layout according to the device resolution ?
3. if I do the thing I mentioned at point 1 , Can I built a site with wordpress and mobile version with jquery mobile ?
4. If I use a mobile compatible wordpress template I mentioned in point 2, can I use all other plugin form outside?
Please Help me.Thanks in advance.
So what should I do? building two different version ?? if yes, Can I
use the wordpress for both? do you know any plugin or way to make both
pc and mobile version in wordpress ?
This is what I did to achieve what you are aiming for:
Install WordPress as normal.
Add the Mobile Smart plugin - or possibly mobile smart pro.
Create a theme for regular desktop browsers and activate it in WordPress
Create a completely separate theme for mobile browsers. You may wish to use the sample code supplied with the plugin; I created my own from scratch.
Change the settings of Mobile Smart so that it knows which is your mobile theme
Add content and enjoy!
Please read the documentation with Mobile Smart. It is important to understand what it is doing.
Also, remember that your two themes are completely separate, in completely separate directories, so you can use completely different functions.php, headers, footers, scripts, etc. as necessary.
Quote from https://github.com/ChristianPeters/crispy-mobile that I agree with:
CSS media queries are nice. But not for mobile.
They just add up code you send to your clients instead of reducing it for mobile devices.
Imagine you want to make a responsive product page.
Do you really want to deliver a big 90KB product photo, if a 15KB photo would already fill the mobile screen?
Do you really want to compute personalized product recommendations if they are just hidden afterwards?
Do you really want mobile devices to download and interpret your whole stylesheet if half of the interface elements are going to be hidden anyway?
You don't.
If you start mobile-first, don't let your mobile performance be affected by additional desktop features.
Be kind, serve the clients exactly what they need.
If the mobile internet was fast enough and limits weren't as low as they are, I would probably think the other way. But we have to wait few years for that. For now in my opinion it is better to build seperate mobile website. But it is also very useful to have responsive design - that can't hurt even with separate mobile design.
I'm going to avoid too much subjectivity here, as everyone will have a different opinion.
Yes, I have this approach working well on my company website (www.achaleon.com). I was involved in the beta testing for a WordPress plugin called Mobile Smart Pro. It implements elements from a bigger open source project to detect mobile devices and apply a completely different theme to the mobile site. It has the advantage that you can create two completely separate themes and optimise every aspect of them for the device and the context in which it is being used. You can even serve up different content if you wish in the two versions.
This approach requires careful planning and thorough testing. It is also more demanding for the designer. I have friends in the WP community who have built sites this way. My understanding is that this requires stronger programming skills (you need to plan far more carefully than with a standard 'static' css implementation). They used cssgrid.net as a start point
I am about to help a client develop a mobile version of their EPiServer site. The mobile version should have different functionality than the regular but some content might be shared so that it won't have be maintained twice.
I'm thinking about using jQuery Mobile as the user interface system to reach as many users as possible with the same solution and possibly 51degrees.mobi for best detection of mobile devices.
Does anyone have any experience in how to do this with EPiServer? How to structure? I'm thinking of using a sub-node (/mobile) that gets hidden on the regular site but I'm not sure it's the best solution.
If you want content in one place without having your editors work with "Fetch data from" a sub-node won't work.
The best option is probably to have "one content serve all" and have a cookie that says "mobile" OR "full site". The default mode can be determined by detection. If mobile is selected then you serve different CSS/JS or even other page properties or functionality.
Another option is to make use of the globalization mechanism and add "Mobile" as a language. This could be an easy way for editors to create separate mobile content if needed and keep the original content for other pages. I recall you can add different top domains for different languages without violating the license agreement so you could have a .mobi-name for the mobile "language".
Take a look at the following blog post:
IPhone Optimalization Made Easy
It demonstrates how to build mobile-friendly websites using HTML, conditional CSS and jquery - all in EPiServer
Have a look at this: http://www.epinova.no/blog/Anders-Murel/dates/2012/5/flexible-episerver-mobile-content-strategy-with-epinovamobiletemplateprovider/
Currently using CKEditor + IMCE.
http://drupal.org/project/ckeditor + http://ckeditor.com/
http://drupal.org/project/imce
Are there better alternatives for a Drupal rich-text editor with image upload support?
To set it up, I add the modules, enable them, add the CKEditor source, configure the Default CKEditor profile to not load unless I tell it to, disable security filters until it loads, and enable the Drupal - Full toolbar version. This gives me all the CKEditor features and flexibility, image and flash upload support via IMCE.
I have tried CKFinder, but I rarely use it on client projects (non-free usage licences). Other modules are a pain to configure and may sometimes break the interface or content (especially around full HTML or PHP inputs).
Update 1: Added a small bounty, looking for more answers.
After having trouble with the CKEditor module over and over again, I switched to http://www.drupal.org/project/wysiwyg , which encapsulates the JS of multiple WYSIWYG Editors in a generic way (by using input filters, which somehow feels like The Right Thing to me).
Add http://www.drupal.org/project/imce_wysiwyg - the WYSIWYG IMCE bridge module, and it works almost exactly as CKEditor.module and IMCE would. A plus: It works with other editors, too, just download and install the editor JS code per the instructions.
I suggest you http://drupal.org/project/whizzywig it is light, full featured and natively includes an image browser (have a look at the comparison table).
I did a comparison on our blog a while ago, looking at some solutions.
Currently I'm sticking with wyswiwyg + imce + tinymce + imce_wysiwyg.
BUT I don't think it's the perfect solution. However in Drupal 6, we don't really have a central image library, this will be a lot better in Drupal 7.
I would recommend checking this module out:
http://drupal.org/project/nrembrowser
It integrates with CKEeditor and might be the way to go.