I'm using MetroJS (http://www.drewgreenwell.com/projects/metrojs) and its working well.
But now I want to make the Metro layout responsive for mobile devices and so on.
Normally I would say I rearrange the tiles with the #media tag. But since the property about the tile size is in the class tag its not working that way or?
<div class="tiles tile-group five-tall six-wide">
Furthermore it would be awesome to make a animation while resizing the window like in the example:
http://themeforest.net/item/matrix-responsive-tilebased-template/full_screen_preview/2761654
Does anyone have an idea?
If you're looking to create different sizes for your tiles at different screen sizes you can use the theme generator to do this. Just click 'add' under the Size Options and it will create a new media query for you
http://www.drewgreenwell.com/projects/metrojs/theme-generator
.live-tile can be sized to whatever you would like to implement you own responsive. I started a responsive version of the tile layouts but have not had time to finalize it or test enough to include it in a release.
http://www.drewgreenwell.com/scripts/metrojs/src/css/responsive.css
As I move towards GSAP, I plan to build responsive in from the start rather than adaptive.
If you want animated movement of tiles as you resize your browser window (nice, but useful?), then I would recommend using something like Isotope or Masonry for your layout.
Isotope http://isotope.metafizzy.co/
Masonry http://masonry.desandro.com/
Probably worth noting that the theme you linked is using Metro JS (LiveTile) with Masonry for the layout
Related
So, i've been struggeling with getting my website to work on phones, i'm using a grid, but once i'm trying to view it on a phone it looks awful.
I just want to scale down the desktop-version to half the size on phones.
I've been trying the old zoom:0.5; and transform:scale(0.5); but neither has yeilded me any acceptable result, does anyone know how i can fix this?
I'm using <meta name="viewport" content="width=device-width, initial-scale=1" /> right now, but i've tried without it also.
Here's a link to the website: http://7b772c72.ngrok.io/wordpress/
My grid: https://github.com/joelfolkesson/jf/blob/master/style.css
Shrinking down the content will most likely result in an illegible website on smaller view ports.
You can try media queries for your CSS to give your website the appropriate scale for the sizes defined in said media queries.
If you have not invested too much time I would suggest using Twitter Bootstrap as it already has decent cross device CSS that allow for quick and easy mobile friendly deployments.
You can check out this site that was build with Twitter Bootstrap.
UPDATE:
You want to keep the layout the same as the desktop view for mobile. But as stated above the text will become illegible on mobile view ports and that is in deed the case.
What I would suggest is that you change the CSS media query that governs your menu and logo and increase its size to be readable on the mobile view, instead of using zoom: 0.5;.
Change your logo sizing for the mobile view to about 75% and either change your menu items to 100% width or try using a different defined style for it and either put them in a grid of 3 with 33.3% width and your menu should split into 2 sections above and below or change the grid to 6 with 16.6% width and fit them next to each other and decrease your padding to allow for bigger text.
Other than that I can't help much further as your stylesheet naming conventions are very confusing to me.
I have a website i'm designing right now, and i'm new to using JQuery. I'm noticing on my slick-carousel slider that the slides and styles adjust them self's while the user is loading the page for the first time in the browser. I have a few media-queries in place for different resolutions, and it seems that it has to adjust.
Is this because of the way i wrote the code, or is this something that happens with Javascript? What's the best practice to avoid this?
Here is the site link - Advanced Litho Website Re-design
Look at this URL: https://gtmetrix.com/reports/www.advancedlitho.com/aCuNhAl7
Here you can see that your images are huge in size. GTMetrix is showing that scaling your images properly can give you a boost of 1.9MB
Do whatever is said on the test and you should be fine.
I'm using the jQuery "Lightbox" plugin, although I don't know if that's necessary information about the problem at hand.
The images I'm putting through my slideshow are quite large; each of them is far larger than the screen (I don't host the images on my server so I cannot resize them). I need to scale them to fit within the bounds of the screen (probably with some margin as well). Are there some JQuery or other Javascript snippets out there to take care of this?
Edit
Now I use "zoombox", which certainly fixes the scaling issue. However, now all the nice slideshow features are lost! I.e., I cannot use the arrow keys or cycle through the gallery of images!
Here are three plugins which are pretty feature rich and widely used, they should do the job with ease :
http://www.jacklmoore.com/colorbox
http://fancybox.net/
http://www.grafikart.fr/zoombox
Edit: Pretty much every lightbox solution is listed and compared at : http://planetozh.com/projects/lightbox-clones/
I've settled on Floatbox after testing out a dozen of these libraries. The default settings size the image to fit the screen and allow navigation with the arrow keys. Clicking on an image zooms it to 100%. It's easily configurable in terms of colors, window decorations, and the like.
I forked Lightbox2 to include automatic scaling.
Now, if an image is larger than the window, it will automatically resize to 80%.
You can find it here, on my new repo.
I'm building a website that will need to have diff mobile layouts depending on the screen size of the device but I don't want to have to design entirely new layouts for each device. So I was wondering if there are things I need to watch out for that don't convert well into a mobile layout? Or how to set up the original to scale well to smaller devices. Thanks a lot
Read about media queries:
http://www.w3.org/TR/css3-mediaqueries/
Then read about responsive layouts done with purely CSS:
http://css-tricks.com/6731-css-media-queries/
This is basically all about styles and sometimes javascript (if you want to make responsive design)
Take a look on what CSS should be loaded for different devices and how to use
http://podlipensky.com/post/2011/08/25/What-CSS-file-to-load-for-mobile.aspx
http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
And here you can read about responsive web design
http://www.alistapart.com/articles/responsive-web-design/
http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/
I am playing around with Sencha Touch, especially with examples like http://dev.sencha.com/deploy/touch/examples/
However I am faced with a problem, when using the component the scale is set on the iPhone and the user cannot scroll the page or zoom in or out.
How may I disable these settings as I would like to have the carousel on a page which can be scrolled, and zoomed in/out.
Thanks.
[Sencha person] You can't zoom in or out of a Sencha component. Having fixed UI Chrome is one of the reasons to even use a UI framework (otherwise you'd might use a simple mobile-optimized web page).
You can have a scrollable area within a carousel, but you might want to consider whether that's really the best UX, since the carousel is already a scroller (it just scrolls in fixed increments) Take a look at touchstyle.mobi/app for an example of a data-store backed carousel.
I could be wrong, but it seems to me that the goal of sencha is to make full screen apps, so it seems logical that you cannot zoom/scroll the page ?
There are methods and plugins for zooming if you want.
Carousel ImageViewer (plugin) - Zoom feature
Pinch-to-zoom in panels
Pinch emulator (plugin)