I was looking to design a template in Joomla 3 using Bootstrap and was wondering how I would go about designing the template just for the smartphone. I have heard of 'Mobile First' and was wondering if this is the best way to put the template together or is it better to start larger and work my way down?
I am guessing if i start with Mobile First then I would need to create the styles within the media queries i.e. 320/480px for mobiles..
If somebody could please advise, would really appreciate it.
Thanks
In my opinion it's always a good idea starting with a free joomla framework so that you can concentrate your job on web design.
Frameworks like helix3, T3, Gantry5 are already responsive (free to use also for commercial purpose).
Also try this link http://www.joomlashine.com/joomla-extensions/jsn-mobilize-joomla-mobile-extension.html
I didn't use it, just tested, it makes a mobile version of your website.
There are lot of tools that you can use to create your own template,
hope it helps,
Marco
Related
I am going to start new layout and want build my site using modern technology. What is the best way to build new site?
These are what I have been thinking of using:
Media Queries+adobe regions+Flexbox
Media Queries+CSS Grid (from Microsoft)+Flexbox
Media Queries+Flexbox
I want to hear good advice befor starting my project. Thanks!
Looks like Flexie would be a good choice for your case given you want to use Flexbox. Flexie provides legacy support. Give it a go.
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
We're just wondering what you guys think is the best way to optimise an existing website for mobile use (preferably, though not necessarily exclusively without the use of plugins).
Making the site responsive would be very difficult as the completed site has thousands of lines of CSS etc that would need to be changed, not to mention the structure changes that would be necessary.
If we were to set up a new site (say at m.xxxxxx.co.uk or xxxxxxxxxxx.co.uk/m) would it be better to start from scrath or import the existing stuff and edit it. Then that raises the question of databases etc.
Anyway just wanting some opinions on the best way to do it from any Wordpress experts out there?
Thanks,
Mike
Responsive design, or scaling elements of the site based on the available space. You are going to have to do the CSS all over anyway if you make a new site. Sounds like a good opportunity to clean up your styles.
Running two WordPress sites off of the same data presents a few issues that would be much more of a headache than the 'too much' CSS problem you have now.
I am looking to develop websites, that have a updated and modern look and feel. A sample site is Manta Media Inc
I am guessing those are stylesheets to some extent.
What should I search for on google, if I want to learn how to create a web interface similar to that? My expertiese is in .Net applicatio development, not quite the User Interface side.
Any reference to websites is also appreciated.
I would start by looking at a site like css-tricks.com, the earlier video tutorials are a decent look into beginning to "template" a site. You will also have to look into learning about Photoshop or Illustrator (adobe) in order to get those background images created.
The site you linked to is a simple site with four boxes. Learn to use 1. floats and clears, 2. position and display, 3. padding and margins.
If you‘re looking to design websites to have an updated and modern look and feel, then you have to learn about design. I’ve no idea where to start with that.
If you’re looking to implement existing designs using CSS, there’s a couple of books that are well worth reading:
‘CSS: The Definitive Guide’, by Eric Meyer
‘Bulletproof Web Design’, by Dan Cederholm
I am working in Drupal. My friend is a designer and he does not know Drupal. If he designs in the usual way and then I convert his traditional HTML into Drupal then will that work? Or does he have to know Drupal also?
One of you will need to learn at least the basics of Drupal theming; however, most any design can be adapted to be a Drupal theme. I've adapted plenty of basic HTML themes, WordPress themes, Joomla themes, and others into Drupal themes.
The more experimental or cutting edge the design, the more effort it will take to make it work with Drupal. For instance, Mega Menus are not easy to implement in Drupal because of the way Drupal's menu system works.
Apart from avoiding stuff like Flash, the designer doesn't need to know a lot about Drupal. I've taken numerous designs from non-Drupal designers, and they tend to fall into two categories.
HTML designs. These tend to be the easiest by just turning a bog standard HTML file into a tpl file and replacing the content with print statements for Drupal regions and other bits. There can be some work needed for thing actual content, but the basics can usually be done in a couple of hours.
Photoshop designs. In this case the designer knows little about web design, but knows how to draw pretty pictures. As long as the designer puts everything on separate layers, these can work well. I start with the Zen theme, slice up the Photoshop file, and insert the graphics and add colours to the CSS. Generally more work than 1, but I can usually produce a basic theme in about a day.
Of course, the less the designer knows about Drupal, the more expert the developer needs to be.
Totally not. I (as the Drupal developer) have worked with someone who had CSS/HTML chops like few others ( not just wrote books on it but actually knew what he is doing :) ) he gave me HTML and I made Drupal emit that HTML.
Drupal is very flexible. If the person implementing the theme is relatively acquainted with the Drupal theming system, the designer should not need to know a great deal about Drupal. The vast majority of designs can be implemented effectively with the Drupal theming system.
It is best if he works with a starter theme such as Zen http://drupal.org/project/zen
Zen is very easy to build with for designers, and they do not need to know much about Drupal to work with it. When they are finished, they will have a theme that works with any Drupal install.
In answer to your question then, the answer is no.
I think you should give him a short run-down so he understands how Drupal works, so he can assure his designs don't 'fight' with the undelying framework. But I don't think he needs to know how it's done step by step (it wouldn't hurt though, is my guess).