How To Use Cards And Tiles On Your Website

How To Use Cards And Tiles On Your Website Builder
How To Use Cards And Tiles On Your Website Store
How To Use Cards And Tiles On Your Website Free

Say what you want about live tiles, but some use them and love them (I do- on my phone in particular) and since you can create a live tile in just a few minutes for your site I would suggest that you go ahead and make one if you have a feed of some sorts.
It gives you one more way to make yourself visible to users/readers and keep them posted. It’s as simple as adding a little XML config file and some images, such as this one (this is the config generated by the site I use for this post):

A card is also known as a tile, a module, or a portrait, just to name a few. Because card based design is in its infancy, there’s a lot of haze and confusion about what is and isn’t a card. Adding to the trail of uncertainty is the fact that not everyone calls it a card.

The completed style tiles will allow you to quickly establish whether you're on the same page as your client from a visual language perspective. The styletil.es website, created by Samantha Warren, provides a handy PSD template for you to download and use as a starting point for your style tiles output. Iterate until style is agreed.
This editor provides a template to construct your games rules. You can add your tiles, tokens, cards, and dice sides to the rules to help explain. The game rules can be viewed during the game for reference only. Gamestructor cannot enforce these rules. It is up to the players to obey them correctly.
'Tiles' and 'cards' are vague terms - in fact, you could easily argue that tiles are exactly the same thing as cards except without a shadow. If whether to have a shadow is your main question, then: Consider the design of the rest of the web app.
It works but, at the same time, it doesn’t!! Yes, I can click on more options and then pin to start. It does put a new tile at the bottom of the other tiles but it doesn’t use the website’s.

This post goes well with a post I wrote last year ('Connecting your website to your Windows Store App with meta tags') on how to connect your site with an existing Windows Store App, if you have an app make sure to do that as well (and don’t forget iOS tags if you have an iOS app). For the live tile you don’t need an app of course :)

Let’s talk live tiles. If you want to have more level of control you can follow the guide on MSDN ‘Build a Live Tile’- the steps are described in details as well as the options you have. However, if you want a first basic tile with less fuss you can use the website mentioned below to configure the XML schema for the tiles with notifications based of your feed. This is not new, but since I finally got around to doing this for my site today I decided to take some screen shots as I did it and share. Pretty much how all my posts are born :)

EDIT:

I originally posted this post yesterday, but after noticing that the tiles didn’t work and confirming with several other users of the website used to dynamically generate the tiles I decided to pull the post. I’ve notified the team, but haven’t gotten a response (let’s give it some more time).

But most often I got this:

The service seems to return a 500 (internal server error) 80-90% on the requests. At some point it does work, as you can see below. On my phone the tiles are now working, but not on the laptop (I’ve made sure to set IE as main browser and have the tile pinned). It’s strange that the tile doesn’t work on the desktop as the tiles generated should be supported by both Windows and Windows Phone- and ‘manual’ tiles work fine. And yes I missed a null check. Its a mock- hence why no copy and paste given to you.

If you wanted to dynamically generate the tile xml from your feed in code you could do something like this (just a mock- my site runs on PHP (eeeek) and I’ll set up the manual tiles when I move the site in a few weeks from WordPress to Node).

Here are the steps:
Go to http://www.buildmypinnedsite.com/

Adding logo and text
In Step 1 add text, a transparent PNG and background color

Select each tile on the right side and crop the uploaded photo for each tile
In Step 2 add your feed

Get the images and tags
In Step 3 you can grab either the markup to add to the site (and then upload images and make sure the urls are correct for the images) or do as I did, and download the package

Unzip it

The config file contains the polling sources, frequency, which tiles to show notifications on, and images:

Frequency can be set to (in minutes):

360 (6 hours)

720 (12 hours)

1440 (1 day)

As for ‘Cycle’ (this is a copy and paste from MSDN):

0: (default if only one notification) Don’t cycle.
1: (default if multiple notifications) Cycle notifications for all tile sizes.
2: Only cycle notifications for medium tiles.
3: Only cycle notifications for wide tiles.
4: Only cycle notifications for large tiles.
5: Only cycle notifications for medium or wide tiles.
6: Only cycle notifications for medium or large tiles.
7: Only cycle notifications for wide or large tiles.

And then FTP up the contents of the package

And add the meta tag to the head section of the site

In my case:

After you have done that you are good to go- but let’s try to pin the site first. On your computer find the IE tile and open it, go to the site and select favorite (start icon)

A menu opens and you can then pin the site (you can select tile size)

You should now find the tile pinned, and you can go through the different tile sizes and make sure everything looks okay.

Once my feed updates and I have a tile update I’ll post a picture of the tile with the notification :)

Here it is:

Here is the tile on my Windows Phone as a static tile (if you wonder what that ‘Pick up- second hand’ is since I’m moving to UK I’m donating 80% of my stuff to a second hand store that does awesome things for people struggling):

Comments

Making Responsive Squares

The foundation of our project is responsive squares – that is, squares that automatically resize, both horizontally and vertically, based on the layout. We start by using a percentage-based width for a div. For example, let's make a box with width: 25%. Twenty-five percent of what, you ask? The parent container's width. If we place that box directly in the <body> of a page, here's what we have (view source):

Now, suppose that we add height: 25%; to the CSS and preview again:

That's no mistake – it looks just the same as before. This is because height percentages are based on the vertical height of the container (in this case, the <body>). But because the box is the only content in its parent, the height is based on a percentage of itself (which doesn't make any sense). We can avoid this by adding the following special CSS that tells the <body> to base its height on the browser window's height:

Adding that declaration yields the following (view source):

If you resize your browser window, you'll notice how the box's height is now tied to the window's height. That's nice, but we want our box to be square, with the height matching the width. The trick is to use the padding-bottom property instead of the height property. Padding values are based on the container's width, the same as the width property is. If we use width: 25%and padding-bottom: 25%, here's what we get (view source):

If you resize your browser window horizontally, you'll notice that the box remains a square, always adjusting both dimensions together. Perfect, right? But it's a little more complicated than that. (You knew I was going to say that, didn't you!) As you may notice, I removed the text from the box for this demo. That's because the actual height of the box is based on padding-bottomplus the height of any content in the box. If I had left the text, the box would have been too tall:

But if we place the content inside another div with position: absolute applied, it won't be counted when the box height is calculated. To use absolute positioning on the content div, we have to also apply position: relative to the parent. This makes the absolute positioning relative to the parent box instead of the entire page. Here's what we now have (view source):

To review, here's the HTML and CSS we now have:

I've added 10 pixels of spacing on each edge to help you see what's happening, but we could use 0 and there would be no way to tell that two boxes are actually in use. A side-benefit of using the absolute positioning is that we can also apply padding and borders to the inner box without affecting the outer box's size. (Note: There's a way to do this with the experimental box-sizing property, but our method is backward-compatible.)

Creating a Grid

How To Use Cards And Tiles On Your Website Builder

We've successfully created a resizable square using nothing but CSS. The next step is to turn this into a grid. That's as simple as placing several boxes within a 'wrapper' that has overflow: hidden, then setting float: left on each box:

View the demo here and resize your window to see how the tiles expand and contract. (Full source here.)

Making the Grid Responsive

Now we have a grid; but on a small screen, the tiles are tiny and the contents are cut off, and on a large screen, the tiles are huge. We're ready to make the grid responsive with media queries. To modify the number of tiles per row, all we need to change is the width and padding-width of each box. The following CSS creates 'breakpoints' at 480 pixels, 650 pixels, 1050 pixels and 1290 pixels (all representative of common screen sizes):

These breakpoints ensure that the tiles' size always remains within a comfortable range. We'll also update the default width and padding-bottom properties for .box to be 20% (5 tiles); this is what will be shown for large screens.

To enable media query compatibility for IE8 and older, we have to add the following code after the CSS:

How to use cards and tiles on your website store

Note: Best practices dictate you should download the referenced file and save it to your site, then link to that local version. We're hotlinking just for the sake of simplicity in this demo.

View the final demo here; again, resize your browser window to see the grid snap. When your browser window is very narrow, there will be only 1 tile. As you expand the width, the number of tiles will grow until it reaches 5. The full source is here.

Putting It All Together

Now that you know how to create a responsive grid of square tiles, we'll apply those skills in a practical and fun way to create the photo gallery you saw at the beginning of the tutorial. Our photos are 460 pixels square, which ensures that they are scaled down slightly except on the largest of screens. This way, the photos always will look crisp.

Additionally, we have a title box that appears over each photo when it is hovered-over (or tapped on a touchscreen).

The HTML

Start with a basic HTML5 page:

First, add the following <meta> tag just inside the opening <head> tag:

This line, which is very important, tells mobile browsers to not scale the page by default. This allows our media queries to be applied instead of the default 'scale the page way down' behavior.

Next, let's add the markup that defines all of the tiles. Add the following HTML within the <body> of your page:

Note that we place all content within a wrapper, <div>, and that each tile is defined with the following code:

The highlighted values specify the image and associated text to be displayed for that tile. You can use the sample HTML above, or add your own photos. For best results, the photos should have the same height and width.

The CSS

If you preview your page now, you'll see just a linear list of photos. Style the page by adding the following CSS inside the <style> tag:

Here is a commented version of that code, to help you understand what each part does:

And a Little JavaScript...

As I mentioned earlier, media queries only function in Internet Explorer version 9 and higher by default. To work around this, we need to add the helpful css3-mediaqueries.js script immediately following the <style> tag in the page's <head>:

Again, you should download the referenced file and save it to your site, then link to that local version. Note that the code is wrapped in a conditional IE comment, which ensures that we don't waste loading time in browsers where native media query support is available.

How To Use Cards And Tiles On Your Website Store

The layout is now complete (as you'll see by previewing), but the title boxes aren't yet enabled. This is because we want to enable slightly different behaviors for traditional computers and touchscreens. On desktops/laptops, we want the title to appear when hovering over a photo. On touchscreens, we want to toggle the title on and off by tapping on a photo. To enable this, first add the no-touch class to the <body> tag:

If you preview now on a desktop/laptop, you'll see that the titles now appear when hovering over an image. To enable the touchscreen behavior, however, we need to add the following chunk of JavaScript at the end of the page, just before the closing </body> tag:

This JavaScript code (which uses the jQuery library) switches out the no-touch class with the touch class on the body tag when viewing on a touchscreen device. It also adds a listener for taps on the photos, toggling the touchFocus CSS class we defined earlier whenever a tap occurs.

Tip: If you're new to JavaScript and jQuery, check out Eloquent JavaScript and jQuery Fundamentals, two excellent and free eBooks linked in this article.

If you preview again now (full-window view), your tiled photo gallery should be fully functional on all devices and browsers.

Conclusion

In this article, you learned the necessary skills to create resizable square tiles and place them in a responsive tiled grid. To review, here are all of the techniques we've used along the way:

Creating flexible-size CSS tiles (using width and padding-bottom in combination with an inner absolutely-positioned content area)
Building a responsive layout by using CSS media queries
Using the css3-mediaqueries.js script to enable media query compatibility for old IE versions
Using CSS floats and relative+absolute positioning
Enhancing our page with CSS3 transitions (to show/hide the title box)
Enabling enhanced touchscreen functionality with JavaScript/jQuery

We used these techniques to create a photo gallery, but they are applicable to countless other types of projects too. How will you use them?

How To Use Cards And Tiles On Your Website Free

(And just a reminder – if you want to easily create tiled galleries with a fullscreen view too, check out our new Hummingbird Photo Gallery plugin for WordPress.)

Foxhuman520