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.
Related
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
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 planning to use foundation 3 css framework, but has no idea where should I start.
I got the jpeg mock up from designer, which design from scatch. Does the mock up need to be designed based on the founcation's grid?
Best if you take a look at the documentation for Foundation here: http://foundation.zurb.com/docs/grid.php
It doesn't necessarily have to be designed by keeping the grid in mind. Any thing can be achieved with the grid system. This is basically way to create a responsive website and also helps in maintaining uniformity through out the page.
I also suggest the following:
1) get a template you like form the foundation 3 website and then start with that. Try to see how the html structure is and then.
2) try to change the backgrounds, colors by adding properties inside app.css (ITS BEST IF YOU DO NOT MAKE CHANGES TO foundation.css file).
3)Use tools like firebug or the inbuilt "inspect element" in browsers to find out which css property is being used and you can change it.
4)You need to explore it for atleast a couple of hours.
cheers!!
I have been searching for and have not located (I fear it doesn't exist) a wire frame application that will use our current css for objects.
We have spent a lot of time perfecting our css to get the look we want, now I want to be able to use that css for new mockups without creating new objects each time we add something (as we would have to in photoshop).
In a perfect world, it would even handle the page layout so all that remains is the logic.
Has anyone heard of a tool that can do this?
I haven't used it, and I can't vouch for it, but https://alpha.easel.io/ might fit the bill. It's still in beta, but looks very interesting.
From their homepage: "Implement designs quickly using exact CSS properties rather than guessing from a mockup."
http://axure.com is a popular wireframing tool. There ways to make it use custom CSS: http://enterpriseux.tumblr.com/post/8972215862/an-axure-html-prototype-hack
Reference this question:
What is the best CSS Framework and are they worth the effort?
Do I go back to the "old" way of manually creating a template or downloading free ones again. For a little bit I thought a grid was the new thing and the best, now it appears I am wrong after all and not sure of best practice.
And, yes, I can write my own CSS but didn't want to create the infrastructure if I didn't have to.
Perosnally I use the YUI stylesheets and sometimes the YUI grid builder. I don't use their whole framework, but just some of their stylesheets. It keeps everything really lightweight and it's still all just standard CSS.
http://developer.yahoo.com/yui/grids/
I don't see anything wrong with using a framework to rapid prototype your design, as long as when that design is approved by your client / boss you clean it up and remove the unnecessary parts.
You can make your own grid layout with the Variable Grid System (css grid framework). It works for fixed and fluid layouts.