quite possibly this is a duplicate for another question, if it is please close this question,
I am wondering how is it possible to have different layout for desktop view and different for mobile, please check the pictures and sorry for the bad design i used msPaint
Thanks!
desktop view
mobile view
you must use media query. It's better to share your source code but you can use this link for more information: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Related
I need to make an email template and make it responsive. As I see that to achieve that you need to use media queries and css styles on a header etc. I was wondering if tables are not needed anymore to set the layout (they are quite annoying anyway).
But I see blogs explaining how to make a responsive HTML email with tables so I wonder why do they use tables if they have CSS?
Is it because it's some type of compatibility approach? So that old systems will still show the layout even if not perfect and new ones will show it better?
Cheers.
Email clients use really old rendering engines. If you opt for using div's instead of tables you will see your email breaking almost everywhere (specially outlook). Using tables allows you to support old email clients as well as making your email responsive for those that support it.
There are a lot of good tutorials out there that give you templates that you can start from, I suggest you use those and build from there. It takes a little while to perfect it across all clients and platforms and the testing ain't no fun!
This tutorial will come in handy.
If you can get a Litmus account it makes the testing less painful and they get it right most of the time.
Also, if you are already doing emails try to study what device/client most of audience uses and you can use that to make sure your new template renders fine on these.
Good luck!
I need some advices on how to create a website in a way that it will keep its size on every resolution.
I've tried in many ways but I never made it work, and it's hard to understand responsive web design because I can't find it in my language. I just want some brief advices, and simple explanations about how to keep resolutions of content divs on different resolutions in CSS/HTML
Here's what I've tried until now but it didn't work:
There are just the codes without images, its just a way to see what I did wrong and what I should do.
Check this piece of code and play with it to get a basic idea: http://jsfiddle.net/Hx5Xn/1/
Furthermore I would advise you to check some online tutorials.
Check
http://www.w3schools.com/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
I have an old ASP.NET web application (Web Forms, no MVC) and I would like to make it "look nice" in mobile browsers, while keeping the current design for desktop browsers.
One of my options is CSS media queries , but then - is there a list of standard screen sizes I should adapt it for?
I also read about Modernizr - but it seems to just detect browser capabilities, and I wouldn't know how to use it for my purposes.
What would be my best bet? Appreciate it.
You should take a close look at jquery-mobile which has a lot of built in functions to deal with both changing the display based on device as well as a variety of layouts pre-optimized for mobile views.
Take a look at this link for way more information : http://jquerymobile.com/
However this would not necessarily be easy, depending on the complexity and overall layout of the "normal" web page. However it could easily be implemented to judge what device is being used and then switch to an already defined layout.
I recurred to CSS media queries. Here's a nice introduction. Much appreciated.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
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 guess I just entered the wrong search phrases or is there really no overview of all the components that are useable on the mobile device?
I want a list/table that says: Instead of component A better use B for your mobile application because it has touch support...
Ideally this overview would also name all components that have been newly introduced for mobile development together with a picture.
Thanks a lot!
Check out this list here. I think it covers what you need.
You should check out tour de flex mobile: http://flex.org/tour-de-mobile-flex/
That should be enought together with the link that Chad posted. But I agree, a Page that puts the things from tour de flex mobile together with the mentioned list would be desireable - searching samples on the phone is not that perfect...
This post has a table of mobile-optimized components. It includes a lot of good information.
Note that most everything else in the Spark space is available. You might just need to create your own mobile skin to make it work well.