While the growing adoption of responsive images cannot be ignored, it can be very difficult to employ the functionality under the constraints of a large CMS like WordPress. Although it is entirely possible to write the feature into your theme on your own, doing so is a challenging and time-consuming endeavour.
Thankfully, with the launch of WordPress 4.4, theme developers and maintainers will find it much easier to introduce responsive image functionality into their themes. In this recent launch, the RICG Responsive Images plugin has been merged into WordPress core, which means that responsive image support now comes as a default part of WordPress. Let’s take a look at how the feature works, and how you can use it to get the best support for your WordPress site.
As a blogger or webmaster, we all care for SEO (Search Engine Optimization, to be sure that we are on the same page). Since the majority of our websites are powered by the WordPress platform,...
Visual effects in games define their overall look and feel, and gameplay. Players are attracted to high visual quality, which generate more traffic and reach. It’s key for creating successful games and providing a lot of fun for players.
In this article I want to present a few ideas of how to implement different visual effects in <canvas>-based HTML5 games. These examples will be based on effects we made in our game, Skytte. I will explain the basic ideas supporting them and provide the effects used in our work.
Principles Of HTML5 Game Design http://www.smashingmagazine.com/2015/09/principles-of-html5-game-design/ http://rss1.smashingmagazine.com/feed/ Smashing Magazine For Professional Web Designers and Developers
Bloggers Darren Rowse and Chris Garret discuss the challenges of making money through blogging, and their new book Problogger: Secrets for Blogging Your Way …
Das Video zeigt alle wichtigen Informationen zur Monetarisierung auf YouTube einschließlich der Schritte, die man bei Google Adsense ausführen muss… ANMERK…
In the past year, adoption of Sketch at Google, where I work at, has taken off and is now a widely preferred tool. The more tools in our belts, the better, so here’s my take on why Sketch and the new material design1 system are a great match.
Tools are an extension of our hands, and as such, they should be versatile, quick and intuitive. A lot has changed between the print era of offset presses and the digital era of cross-platform screens. Developers have attempted to adapt our tools, but Sketch is perhaps the most successful app in this regard — its creators have removed the bloat, started afresh and presented a smaller, fit-for-purpose feature set. What may seem on the surface to be a simple drawing tool in fact nails the core workflows of digital design.
2 Sketch 3.2 comes ready with a material design sticker sheet to give you a jumpstart on new projects. (View large version3)
The latest version of Sketch (3.2) ships with something special for those interested in Google’s latest visual design language: the material design sticker sheet. In this tutorial, we’ll design a test app with the help of Sketch and the material design sticker sheet.
Let’s Create a Notes App!
In this article, we’re going to make a very simple app — a notes app. Luckily for us, all of the components we need are already available in the latest Sketch app. These are the screens we’ll create:
You can also download the Sketch file6 (ZIP) that was used to make this notes app prototype; it could help you along in the tutorial.
The Template
In our template — File → New from Template → Material Design — you’ll see a wide set of components, icons and layouts. The sheet itself was designed by the hardworking material design team at Google and has been ported with the love and care of Amar Sagoo and myself. The groups and objects are named, styled and organized in a truly Sketch-friendly way.
It All Starts With an Artboard
With your new document open — File → New (or Command + N) — press the A key (which is a shortcut for the Artboard tool). You can draw an artboard just as you would draw a shape, a slice or any other object. That’s because Sketch has a simple set of objects that all work the same way (more on that later). When the Artboard tool is selected, you can see on the right side a list of artboard sizes, including — you guessed it — all of the material design sizes. Click on the “Mobile Portrait” size and a white box should appear.
7 Sketch 3.2 provides the material design sizes within the new Artboard tool. (View large version8)
Note: Material design is defined using density-independent pixels9. As the Android Developers page explains10, a density-independent pixel (DP) unit corresponds to the physical size of a pixel at 160 DPI. Though we’ll be using pixel units11 (px) in this Sketch tutorial, these are really density-independent pixels because you can scale them up or down upon exporting.
In today’s world, you can’t depend on the same pixel density, so DP units allow us to talk the same language when dealing with different device layouts. Sometimes you may be compelled to work at double or triple pixel size because you want to match the pixel size of your surface — don’t go down that route.
Stay at 1x pixels and then just export at the upscaled sizes. Sketch makes that as easy as a simple drag and drop. You’ll see a panel in the bottom left showing you the sizes slotted for exports, and you can even add your own suffix conventions for file names. When you do an “Export All” operation (Command + Shift + E), you’ll see that artboard, and Sketch will export all versions of the bitmap.
12 Always work at 1× pixels. You can easily scale up or down in the “Export” panel. (View large version13)
Now, head to the sticker sheet template and select the “mobile global elements” artboard. Only the important stuff there is selectable, so just click on that artboard and copy and paste into your document. You now have the basic layout of a mobile material design app. As you can see in the Layers panel, you have a group named “screen”. You’ll only need the contents of that group, so just go ahead and ungroup (Command + Shift + G) the “screen” group. You’ll now see four layers:
14 In the sticker sheet, you’ll find some ready-made artboards that you can copy and paste directly into your sketch file. (View large version15)
navbar
This is a symbol (symbols in the Layers panel are marked with purple color), which means it will be the same everywhere, and if you change the contents of the symbol, it will change everywhere in the file.
status bar
This is the top bar on the screen with Wi-Fi, time and status information.
app bar
This is your main navigation header, which displays the name of the current page and a button to go up or open the drawer.
screen bg
This is a background color, but it’s also a mask. You can delete this because your artboard will act as the mask for your screen.
Masks in Sketch Work… Upward!
In Sketch, masks work upward, meaning that layers above a masking object are cropped by that object. In Adobe Illustrator, however, you would place a shape on top of other layers to create a clipping mask; this threw me off at first. For more on masks, check Bohemian Coding’s documentation16.
If you move these layers around within an artboard, you’ll see that they are masked by that artboard. That’s the only case when an object that is higher in the Layers panel masks the objects below. Artboards always mask their contents and also house the coordinate space; so, an x value of 0 and a y value of 0 would mean the top-left corner.
17 Cards are a standard pattern and work well for heterogenous information. (View large version18)
Let’s go back to the sticker sheet. Let’s grab the half-width card components19 and paste them in our composition. The suggested margins for these cards is 8 pixels, so go ahead and space them out.
Sketch’s Killer Feature #2: Hover Guides
One of Sketch’s most useful features has to do with spacing: Select an object, hold down Alt, and then mouse around to see distances from your selection to other objects. And holding down Command + Alt and mousing around will measure objects that are deep within the hierarchy relative to other objects contained in groups.
20 The floating action button is a unique component in material design. (View large version21)
Finally, let’s get the floating action button from our buttons components and put that in. It should be 16 pixels from the navbar and 16 pixels from the right side.
Great! So, we’ve got the composition for our first Material app. It’s a scrolling card view.
The Navigation Drawer
22 Navigation drawers provide navigation to primary sections within the app and global functions such as account switching and configuration. (View large version23)
To get around the various areas of our app, we’ll make use of the navigation drawer component. Let’s duplicate our original artboard: Click on the artboard in the Layers panel list or on the title of the artboard on the page, then press Command + D. This will duplicate the artboard and move the new artboard 100 pixels to the right. You can continue your flow simply by duplicating and modifying, which is what we’ll do now.
Grab the navigation drawer from the mobile artboard — the layer is called “side nav.” Paste it onto your new artboard. You can change the categories in the navigation, but the top area is reserved for switching user accounts.
Material Forms
24 Forms in material design morph. Depending on their state, placeholder text becomes labels. (View large version25)
What happens when you tap that big plus button? Well, you should probably be able to make a note. Let’s grab some of the form’s components in the sticker sheet and make a new artboard for them. Here, we can make use of the keyboard, which is a symbol that can be placed whenever we need it. We’ll use the dark one to fit our dark app.
Reusing Artboards
Of course, after you’ve created a note, you should see it added to the card view. Let’s duplicate the first screen and add in our new note. Just click on the name of the artboard right above the artboard itself. Now that the artboard is selected, press Command + D. That will duplicate the artboard and move it 100 pixels to the right, perfect for quickly mocking up a flow.
26 You can duplicate artboards and they’ll move to the right side of your flow. (View large version27)
Sketch’s Killer Feature #3: The Color Picker
Sketch provides a powerful color picker. Just press Control + C to select a color anywhere on the screen. Combining this with Command + click to click through to any element, you can easily recolor any object in no time.
28 The color picker is quick and accurate and can be used on anything on the screen. (View large version29)
Covering The Tabs
Tabs are a great way to show different sets of content. In our app, we will have notes of importance and notes shared with others. Let’s make some tabs for “saved” and “shared” notes, with our current view being “all” notes. Jump back to the sticker sheet and click on the “tabs” component. Copy and paste that and position it next to the app bar. If you’ve grabbed the whole “app bar” tab from the sticker sheet, you’ll notice that it’s the wrong color. So, change the background color: Click through (Command + click) to the background of the tabs, and change the color to our main color. Move the tabs to the top, and you’re set.
When copying components from the sticker sheet, you can take any level of elements. This means you can take a whole screen, just the components within or even just the icons. The tabs, as well as other components, have been prepared with a transparent background. Move within the “app bar” group and you’ll be able to copy the “tabs” group and paste onto any existing background. The advantage of a transparent background is that you will get the proper spacing around the component, but you can quickly place it on top of an existing background or toolbar.
Making A List
You’ll use lists a lot. They’re a fundamental component to any app, and material design gives us a number of options. We’ll have our “shared” tab contain a list view.
Copy the “three-line item” list from the sticker sheet and paste it in a new artboard. Ungroup the list and then just Alt + drag to duplicate an item, a set of items or a group. Do this until you have a full page of rows.
You’ll notice a box on the right side of the list. This box is a secondary action. Tapping anywhere to the right of this action would open up that list item; but for quick actions (such as calling a contact or opening information about a document) you can use the secondary action. We’ll replace this placeholder box with a heart so that the user can quickly save notes.
In the sticker sheet you’ll find a small set of icons in the top left under “typography.” Grab the heart icon and paste it where the gray box is located. The icon should be in a group containing the heart icon and a transparent 24 × 24 box. This box helps with spacing, so make sure to grab the whole group.
34 Symbols allow us to quickly manipulate many instances of the same icon, component or even layout. (View large version35)
Sketch’s Killer Feature #4: Shared Symbols And Styles
Now, let’s make the row group into a symbol. This will allow us to edit its contents in many places at once. When you select a group, you’ll see a field in the toolbar that says “No symbol.” Click on this field and select “Create new symbol.” The name will default to the selected group’s name: “row.” Now you’ve got a symbol!
36 Symbols allow us to quickly manipulate many instances of the same icon, component or even layout. (View large version37)
Select each of the other row groups you’ve positioned on the artboard and, once again, click on the area that says “No symbol.” This time you’ll see your row symbol available for use; select it. Now that you’ve got a bunch of rows using the row symbol, when you change one, they will all change. Just like that, you have an interconnected set of elements.
Using our newfound power, let’s replace the heart with an overflow icon. The overflow icon is a set of three vertically stacked dots and indicates that more than one action is available. All you have to do is copy the “overflow icon” group (along with the padding) from the sticker sheet and paste it right beside the existing heart icon. Line it up with the heart icon, and then delete the heart icon. As you’re doing this, you should see the other rows automatically update. Yay for symbols!
With Sketch’s symbols, there is no editing mode. Symbols act just like groups and update immediately. This makes it easy to change symbols. Watch out, though: You may be editing a symbol in one place only to find that it has also changed in many other places across the canvas!
38 Symbols allows us to quickly switch out icons or whole compositions. But be careful: A change in one place will be reflected everywhere, even on other pages. (View large version39)
Bottom Sheets
40 In material design, bottom sheets display a set of actions without covering the screen. These sheets emerge from the bottom of the screen, then drop back down when dismissed. (View large version41)
In material design, bottom sheets are a great way for the user to take action without leaving the current context. These enter from the bottom of the screen and display a set of actions. In our app, the bottom sheet will be invoked when the user taps the forward icon in the top right.
Let’s grab the bottom sheet from the sticker sheet and paste it in a new artboard. Also, grab the scrim (semitransparent background) from the previous navigation drawer artboard and paste it behind the bottom sheet.
Dialogs When Needed
42 Dialogs can be used for stopping actions, but use them sparingly because they could be unnecessary roadblocks for repeated flows. (View large version43)
As a last step, we’ll add in a dialog. This will be invoked when the user selects the delete action from the bottom sheet. In this case, we want to be really really sure that they want to delete this note. And finally, speaking of deleting, I encourage you to start fresh with your own designs. Sketch is such a quick program and material design is such an enabling guide that you can think big and different about how to delight users in your app. So, happy sketching!
Quick Start With Sketch Resources
Here’s a list of material design resources built for Sketch to get you up and running quickly:
Material design sticker sheet44
This is the latest sticker sheet. It holds a good set of components and styles, and it is easy to copy and paste in your new compositions.
Conclusion: Keep The Principle In Mind With The Tool In Hand
Thanks for walking through material design in Sketch with me and making an awesome notes app. We have not only learned a new tool, but also started on our way to a new design system.
One final note of caution: Sometime we focus on existing components and miss an opportunity to address our users’ needs in a new way. You can always check your designs against material design’s principles49:
Material is the metaphor
A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
Bold, graphic, intentional
The foundational elements of print-based design — typography, grids, space, scale, color, and use of imagery — guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus.
Motion provides meaning
Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.
Remember, no matter how good it looks, the greater focus is not on the pixels, but on the user. If your sight is true, all else will follow.
Sketch With Material Design http://www.smashingmagazine.com/2015/05/15/sketch-with-material-design/ http://www.smashingmagazine.com/feed/?# Smashing Magazine For Professional Web Designers and Developers
If you want to know the tips & strategies of becoming a problogger, then click here: http://donnygamble.com/recommends/problogger to get 31 Days to Build a B…
Tutorial sobre Google Adsense en Joomla. Para descargar los ejemplos usados en este tutorial o para más información, visita la web oficial www.nacloud.es en …
You’ve put a lot of thought, time and effort into creating great content, and you want users to have a great experience with your content. While you might have created the best content in the world, you don’t get to choose how users access it. That’s why it’s important to make sure your content works beautifully on every platform and device, desktop, mobile or something else entirely.
Before you panic, I’m not advocating that you create individual content strategies for each device or network that your content is published to. That would be crazy, and it wouldn’t necessarily work better for your users.
It’s not because you wouldn’t do a good job — it’s because it would be impossible to plan and keep up with special content strategies for every device that exists now (not to mention ones that haven’t been invented yet).
While there’s no magic bullet to make sure your content is publishable and useful on every device, you can change the way you think about, plan for and create content so that it can go anywhere it needs to go.
Developing a mobile content strategy isn’t just about making content look as good on phones and tablets as it does on the desktop. It’s about creating portable, flexible content structures that go wherever your users are, without sacrificing quality. It’s an intimidating task, but not impossible. We’ll start with an example, then cover some of the things you can do to make your content more flexible and accessible.
First, An Example: How NPR Learned To COPE
National Public Radio’s (NPR) core product has long been high-quality audio journalism. But because audiences don’t solely rely on their radio for news, NPR needed a content strategy that would allow it to reach a larger audience by publishing stories to multiple platforms. It needed a way to expand its radio stories with photos, videos, audio and text and get them to readers, no matter what devices they were using. They also needed to be efficient and cost-effective and make it easy for journalists to publish their stories. So, it developed a content strategy that would ensure that its stories would work well on every device without their having to create new publishing platforms for each type of device or having to duplicate every story for each platform.
The key to the strategy was to create “display-agnostic” content structures that allow journalists to COPE — create once, publish everywhere1. In NPR’s new strategy, journalists file their stories once to a CMS. Each story published to the CMS has common elements — titles, categories, tags, captions, etc. — that can be shown or hidden depending on the device and that is distributed via an API. This way, NPR’s designers can change the content’s presentation for each platform without sacrificing quality or requiring the editorial team to publish stories multiple times.
Here’s a small example of how it works. Check out one story about Downton Abbey from NPR’s Monkey See blog. The story was written, edited and then published to NPR’s CMS. But because of NPR’s COPE model and APIs, it displays a little differently on different screen sizes.
Here’s how the story’s excerpt was displayed on NPR’s home page on the desktop:
2 This is how the story appears on NPR’s home page on the desktop. (View large version3)
Looks good, right? Let’s break it down by the elements in the desktop excerpt:
categorization (of the Monkey See section)
headline
excerpt
a few links to related tags (to the right)
image
image caption (hidden behind that blue button)
image credits (also hidden behind the blue button)
Now, here’s how that same story’s excerpt looks on the mobile version of NPR’s home page:
4 This is how the story appears on NPR’s home page on mobile. (View large version5)
You’ll notice it’s pretty much the same, but with a few small differences:
While the category is still there, the related tags aren’t used.
The image credit is visible right below the image, while the caption is still hidden behind the button.
So, the journalist published the story once, and the same content is presented, but some of its elements are left out or rearranged to accommodate for the smaller screen.
In order to create a content strategy that works for you and that goes wherever your users are, you have to stop thinking about devices. Instead, start working to create content that has structure, even as it takes on different forms.
Content Modeling: A Difficult, Time-Consuming And Incredibly Necessary Process
Before you can build an effective content strategy, mobile or otherwise, you have to know exactly what you’re working with. That’s where content models come in — they’re a way to give your content an organizational structure without defining its form, and they’re very important to your strategy’s success.
Trust me, content modeling is something you want — no, need — to do, not because it’s a fun time necessarily, but because doing it early has the potential to save you a ton of time, money and heartache later. Doing content modeling early, before you get into the design and development process, is much better.
Raise your hand if your design team has ever spent weeks or months on a really lovely design for desktop and mobile, only to show it to the client for review and realize that you haven’t accounted for content types that need images or video or some other crucial element. That’s the worst, right? By spending a little time on content modeling, you’re reducing the risk of that happening, while also making your designers and developers’ lives easier. Content modeling isn’t difficult, but it takes some time and effort.
Let’s say you’re working on a website geared to home cooks. Your team is ready to start working on a new mobile content strategy. Before diving into your strategy, though, you need to get your team together for a content modeling session.
A content modeling session is easy to set up. You’ll just need to get a few key stakeholders together around a whiteboard for an hour or two (though, don’t be surprised if it takes longer). There’s no limit to how many people you should invite to the content modelling session, but don’t let it get too big. Include a few of the people who will be creating the content — they’re the ones who will be dealing with the content the most — as well as anyone charged with setting standards, goals and direction for the brand.
Start by looking at the website’s existing content types. What kinds of stories, blog posts or other content types are being created? List each content type and the elements it includes, like photos, captions, body copy, headlines, etc. Don’t forget to include things like newsletters, podcasts, listings and events — the point here isn’t to do this quickly, but to be thorough. For our cooking website, two of the website’s content types might be recipes and ingredients.
Once you’ve got a list of content types, break them down by element. You’ve established that two of the content types are recipes and ingredients. These two content types are related (recipes consist of ingredients, and ingredients can be tied to specific recipes), but each includes its own unique set of elements.
6 This is an example of what the content model for recipes and ingredients might look like. The diagonal lines show the relationships between content elements and content types. (View large version7)
After you’ve listed each existing content type and its elements, think about what content types you’d like to be able to create in future. For example, do you want to go beyond recipes and ingredients and create sets of seasonal dishes? Or is your business model shifting to include notable chefs or contributors, who will need to be featured. Nothing is off limits — think about your business goals, editorial goals and audience’s needs.
Once You’ve Got Models, Start Building Them Out in the CMS
Once you’ve got your content model in place, start setting up a CMS that will help you COPE.
Every CMS is a little different, but in most cases you won’t need to create an entirely custom CMS to support your new content strategy. In most cases, you can bend your existing CMS to your will by creating page types, post types, custom fields and field sets that make it easier to create and display content. You can tie field sets to page and post types, which will make it easier for your content creators to add all of the necessary information.
For example, you might set up a page type in your CMS for each recipe and include these fields:
ingredients list (linking each ingredient to its ingredient page);
cooking time;
categories (like season or course — think appetizers, desserts, etc.);
introductory copy about the recipe;
recipe instructions;
tags;
author (which could possibly include fields for the author’s name, a head shot and a short bio).
Once you know which elements make up each content type and have accounted for them in your CMS, you’ll be able to COPE. You’ll have a flexible content structure that allows you to publish each recipe or ingredient once, even though it might be presented differently on each platform. You can then work with your designers and developers to figure out which elements should appear when.
Understand How Your Content Will Be Used
Ultimately, we don’t get to choose when someone decides to use the content we create or which platform they use it on (but, oh, the world would be a much simpler, if less interesting place, if we did). So, why think about use cases? Because our job is to make our content accessible and useful to all users, no matter when or where it’s being used.
People use every device in every location, in every context. They use mobile handsets in restaurants and on the sofa. They use tablets with a focused determination in meetings and in a lazy Sunday morning haze in bed. They use laptops with fat pipes of employer-provided connectivity and with a thin trickle of data siphoned through expensive hotel Wi-Fi. They use desktop workstations on the beach—okay, they really only use traditional desktop machines at desks. You’ve got me on that one.
Going back to the recipe website, it has a ton of possible use cases. You may have users who:
spend time browsing the website for recipes on their desktops and planning their menu before going to the grocery store;
pick up an interesting ingredient at the store and pull up your website on their phone to learn more about it and to see what recipes it could be used in;
call on Google Glass to find a recipe on their way to the store;
prop their tablets up in the kitchen like a cookbook;
ask an audio interface to read a recipe to them step by step.
What do all of these users have in common? Each one of them deserves to have a great, complete experience with your content.
“But wait!” you might say. “We’ve got a ton of data showing that our users use our website in this particular way on this particular device.” That may be mostly true, but you can’t always be absolutely positive. That’s why the best solution is to make all of your content available and easily accessible across all platforms.
Such accessibility doesn’t mean sacrificing the user experience, though, nor does it mean that the presentation of your content must be identical on phones, desktops and tablets.
Each device has its own considerations for design and user experience that your content can work within. Let’s consider some examples.
You might choose to highlight specific content elements on different platforms, while placing others behind a menu.
Or you could opt for a more visual presentation on large screens, using larger images that might not work as well on smaller screens. (For example, you might hide each section of a recipe behind a tappable button on a phone, so that users can quickly see and access the information they need.)
On desktop displays, you might choose to immediately show more photos of recipes associated with an ingredient to encourage further browsing.
The point is that while your content’s presentation may change, users should be able to access the same amount and quality of content from any platform.
Adapt Your Editorial Process To Your Strategy
Once you’ve done the hard work of modeling your content and thinking about use cases, you should have a pretty good idea of the content you’re working with and where it needs to go.
Before running off and firing up your CMS, you need to consider one more thing: the editorial process. Remember that content strategy is not just about structuring content for the reader, but also about making the process of creating content efficient, thoughtful and sensitive to the content’s mobility.
Your editorial team and its process are crucial to implementing your new content strategy. Your content creators are the ones who will be dealing with the new structure the most, so it’s important to understand their existing processes, any pain points they may have and any changes they’d like to see. Even if you feel pretty good about the editorial process, this is a good time to check in with the content creators to see whether they need anything to make their work easier.
Creating and implementing a flexible content strategy could also mean making some changes to the way your content is published. In a perfect world, it’ll make things easier. When you don’t have to worry about publishing each piece of content to its own platform, you’ll probably be able to streamline the editorial process. Instead of content creators having to create content in more than one place and editors having to edit for each platform, a COPE model allows the editors to edit each piece only once.
During content modeling, you may have added a few new content types or elements to the content’s structure. Don’t forget that these new pieces will need to be brought into your editorial policy. Here are a few things to consider:
Who is responsible for creating each piece of content? The writer, the editor or someone else?
Who publishes the content once it has been edited? Does the editor publish it, or do they inform the writer that it’s ready to go?
Who is responsible for categorizing and tagging content? Will your writers do that or your editors?
How will the content be created? Will the writers create content directly in the CMS, copy and paste from a document, or submit a document to an editor for publication? Given that many CMS’ allow writers to save unpublished drafts, asking your writers to create their stories in the CMS instead of in a document might not be a bad idea. This will reduce the number of steps each story goes through and will make formatting and editing easier.
Additionally, the new content structure could require changes to your editorial standards. You’ll likely have to put new guidelines in place for any new content elements you have added. This is also a good time to review existing editorial guidelines to make sure they still make sense. Think about things like the following:
Who will choose the photos that go with posts? Who will write the captions? Do photos have to have captions?
If you’ve added any new content types (for example, “chefs”), who is responsible for creating those new pieces?
How many categories and tags should be assigned to each piece of content? Does the writer or editor choose them? Also, who determines when it’s time to add a new post category or tag? (Personally, I recommend that editors set them in order to keep things consistent and to make sure you’re not doubling up on tags. This is especially important in content structures such as in the recipe example, which require posts to be in certain categories in order to be found.)
Before implementing your new device-agnostic content strategy, you may need to revisit your guidelines to account for things that might display differently on small screens. Headline lengths may have to be adjusted so that they don’t completely take over small screens. Also, you might have to change the guidelines on image sizes to make sure that a photo attached to a story looks just as good on large monitors as it does on tablets.
Finally, even if you feel pretty good about the editorial process, this is a good time to check in with the editorial team to see whether they need anything or whether you could implement new processes as part of your strategy to make content creation easier.
Final Thoughts
Remember that any new strategy is partly a learning process. And content is messy — it’s human and it’s vital, and ensuring that its creation, distribution and use go smoothly requires a lot of time, effort and coordination. As long as you’re working to make sure that every user has a great experience with your content, you’re fighting the good fight.
Use content models to understand each type of content you’re publishing and the elements it includes. Then, use post types, page types and custom fields to account for each element in your CMS. Study your users to learn how they interact with your content. Try to address their most common needs while making sure the content works well across all platforms. Adapt the process of creating content to your new strategy. Train your content creators to use the new content structures you’ve created, and put editorial guidelines and practices in place to ensure that the strategy will be implemented.
By taking the time to create content structures that can go anywhere, as well as considering use cases and tightening up your editorial strategy, you’ll be confident that the content will work, no matter who’s using it or where.
If you’ve got stories about creating mobile or device-agnostic content strategies that you’d like to share, please leave them in the comments.
Help Your Content Go Anywhere With A Mobile Content Strategy http://www.smashingmagazine.com/2015/03/23/content-mobile-content-strategy/ http://www.smashingmagazine.com/feed/?# Smashing Magazine For Professional Web Designers and Developers
When you think of Santa Claus, we’re willing to bet that words like “jolly,” “bearded,” and “rosy-cheeked” come to mind. After all, that’s the image of Santa many of us — regardless of age — have grown to know and love, right?
The mall Santa that our parents forced us to take an annual photo with (despite the trauma it caused). The Santa we watched Tim Allen transform into in the first installment of The Santa Clause trilogy. And the Santa we’ve seen used in countless holiday advertisements — from Coca-Cola to Kodak.
Below, we’ve put together a festive timeline of Santa-inspired print and video ads, dating back to the early 1900s. Check ’em out to see how different companies over the past century have used Santa Claus to sell more products.
24 Jolly Advertisements Starring Santa Claus Throughout History
1900 – 1950 Advertisements
1) 1915: White Rock
Image Credit: White Rocking
This joyful depiction of Santa Claus carrying a sleigh full of White Rock water and various toys appeared in the 1915 issue of the San Francisco Examiner.
2) 1919: Murad Turkish Cigarettes
Image Credit: Vintage Product Ads
This sinister-looking Santa Claus is shown smoking a cigarette in this vintage advertisement … but it’s not just any cigarette. According to the ad copy, Murad’s Turkish Cigarettes are what all the “grown-ups” are choosing for Christmas.
3) 1935: Whitman’s Chocolates
Image Credit: Bamboo Trading
Another classic depiction. This chocolate advertisement shows a simple, familiar Santa — with a festive piece of holly attached to his otherwise uniform hat.
4) 1938: Essolube
Image Credit: Etsy
This French motor oil advertisement from Essolube shows Santa Claus delivering a sack of oil to eager automobile owners. The ad copy translates to “Merry Christmas and Happy New Year for Your Car.”
5) 1940: Bell Telephone System
Image Credit: Bamboo Trading
In this holiday advertisement from Bell Telephone Systems, a phone-shaped Santa Claus is shown “ringing in the holidays.” It’s not directly selling a product, though — the ad aims to send Bell Telephone System’s warm wishes to its customers.
6) 1948: Time Magazine Subscription
Image Credit: Bamboo Trading
In this late 1940s advertisement, Santa is shown piloting an airplane to deliver magazine subscriptions to all. The plane is embellished with various headlines, and the ad copy highlights their “special Christmas rates.”
7) 1949: Prince Albert Smoking Tobacco
Image Credit: Bamboo Trading
Santa is smoking again. This vintage ad includes a twinkle-eyed, rosy-cheeked image of Old Saint Nick promoting the gift that “says ‘Merry Christmas’ with every puff”: Camel Cigarettes.
1951 – 2000 Advertisements
8) 1954: Coca-Cola
Image Credit: Bamboo Trading
I don’t know about you, but I’ve always loved Coca-Cola’s warm, jolly portrayal of Santa Claus. This classic Coca-Cola ad features Santa Claus enjoying a “gift for his thirst” while he takes a break and puts down his sack of toys.
9) 1956: Jell-O
Image Credit: Etsy
This fun advertisement for Jell-O shows Santa enjoying a few bites of the good stuff left out for him by the soundly sleeping child underneath the table.
10) 1969: Hoover
Image Credit: Vintage Ads
You can almost hear the laughter in this classic, black-and-white display of Santa Claus showing off his Hoover appliances.
11) 1972: Kodak Pocket Instamatic Cameras
Image Credit: Etsy
“Say cheese, Santa!”
This cheerful advertisement shows Santa Claus gearing up to take a photo using the new Kodak Pocket camera — the perfect gift for “anyone that has a pocket,” according to the ad copy.
12) 1977: Smith Corona
Image Credit: Bamboo Trading
In this late 1970s advertisement, Santa is seen showing off the Smith-Corona typewriter. (The perfect piece of technology for him to make his list — and check it twice.)
13) 1977: Quaker Sugar Cookies
Image Credit: Vintage Ad Browser
In this 1977 ad for old-fashioned holiday cookies, Santa Claus is shown spending some quality, fireside time with the Quaker Oats man himself. If you look closely, you’ll also notice a curious child trying to sneak a peek from behind the chair.
14) 1983: Seagram’s Crown Royal
Image Credit: Vintage Ad Browser
This advertisement challenges viewers to look Santa in the eye and tell him they really deserve Crown Royal this year. It’s hard not to smile at the dubious look on Mr. Claus’ face.
15) 1993: Got Milk?
Santa proves that you can’t have cookies without milk in this classic 1993 commercial.
16) 1993: BluBlocker Sunglasses
Image Credit: Bamboo Trading
Now here’s one we haven’t seen before: Santa in sunglasses. This clever advertisement positions Santa’s job in a different light — Old Saint Nick and his reindeers are “famous aviators.”
17) 1996: M&M’s
This 90s commercial from M&M is a timeless classic. We love the mutual look of surprise and shock on both Santa and the M&M’s faces when they bump into one another late at night.
18) 1997: Hewlett Packard
Image Credit: Bamboo Trading
This HP advertisement shows Santa Paws … I mean Claus posing with a fury friend. Snowball, the featured dog, seems to be eager to join Santa as one of his reindeer.
2001 – 2015 Advertisements
19) 2001: Decathlon
Image Credit: Coloribus
It’s hard not to laugh at this crew of Santa Claus staff members getting all suited up in their locker room. The chimney entrance game plan on the board is especially amusing.
20) 2007: Niko Motion Detectors
Image Credit: This Is Not Advertising
Santa? A criminal? This advertisement pokes fun at Santa’s “breaking and entering” skills while highlighting the security of the company’s burglar-proof movement detectors.
21) 2011: Pepsi
This Pepsi commercial pokes fun at Santa Claus’ well-known Coca-Cola advertisements by showing him sneaking a Pepsi on vacation in his red and white Hawaiian shirt.
22) 2011: iPhone
Santa shows off his tech-savvy side as he communicates with Siri in this amusing commercial for the iPhone 4S.
23) 2013: Chevrolet
Even when cleverly disguised as a car salesman, it’s easy to pick Santa out in a crowd. This ad pokes fun at the interaction this potential car buyer has when he realizes that he just might be buying a car from Santa himself.
24) 2015: Reddi-Wip
This quick-witted Reddi-Wip commercial shows a dad spraying on a whipped cream beard to disguise himself after being caught in the act by his son. Turns out his son is not buying it, as the real Santa Claus is standing right behind him.
What’s your favorite advertisement? Share your thoughts in the comments section below.
Do you ever feel as a blogger like you’re talking to an empty room?
I know I have definitely felt that way! Particularly when I first started Digital Photography School. But if you feel that way too, I want you to know: you’re not alone.
When you write a blog post, you hope that your readers will interact, leave a comment, acknowledge that you’ve even written something, and today I’m going to talk about how to do just that – deepen that reader engagement, and some reasons why I think this is so important (particularly for those just starting out).
Today’s ProBlogger podcast is the first of a two-part series, following up in the next episode with some really practical tips on how you build community.
The first thing I want to tackle is to talk about why you should try to deepen reader engagement. I know especially when first starting out there can be more of a focus on creating good content and promoting it (and there are a handful of established bloggers who make it a point not to encourage community on their sites), but most of the successful bloggers I know have invested time and energy in really inviting and facilitating a collaborative environment.
But back to the beginnings of Digital Photography School when I made a choice that really impacted how people responded to it: in this episode I discuss when (and how) I realised the choice I made meant I was missing out on the key factor that was really going to help my blog take off.
I also give 9 reasons why I think creating community is so incredibly important, and a couple of tips for getting through the negative flip side – building community takes real time and effort!
You can find episode 60 of the ProBlogger podcast show notes here.
Further Reading:
Finding Readers: Strategies for Building Your Audience in 2015
How to Build a Blog that Has Lasting Impact Upon Its Readers
Top Three Takeaways from Finding Readers Week: What Can You Do Today to Create Community?
Finding Readers Week: Mrs Woog’s Tips to Create Conversations on Your Blog
7 Strategies for Growing Community on Your Blog
The post Why You Should Make Building Community a Priority in Your Blogging appeared first on @ProBlogger.
Why You Should Make Building Community a Priority in Your Blogging http://www.problogger.net/archives/2015/11/10/why-you-should-make-building-community-a-priority-in-your-blogging/ http://www.problogger.net/archives/category/blog-promotion/feed/ @ProBlogger » Blog Promotion Blog Tips to Help You Make Money Blogging – ProBlogger http://www.problogger.net/wp-content/plugins/podpress/images/powered_by_podpress_large.jpg
Make money online articles with no monetary investment is making big money online lessons Make money online articles earn money online, make money online and…
Lead-to-account matching enables marketers to have all the information they need to successfully target and engage potential customers. Read the full article at MarketingProfs
Choose one small thing to start with that will move you toward your dream and do it to the best of your ability (tweet this).
I issued that challenge in a post How to Make Your Blogging Dreams Come True just over a month ago. Since publishing that post, I’ve had literally hundreds of readers email me to let me know that they’ve been using the mantra to move them toward their blogging (and non blogging) dreams.
As a result, I thought I’d circle back to it today to check in with how people are going as well as suggesting another strategy for helping you to move toward your dreams.
Last week, I spoke at the World Domination Summit about ‘getting dreams out of your head’. I finished my talk by suggesting those in the audience take a moment to tell the person next to them a dream they wanted to chase.
What I’ve discovered, over the years, is that when I share my dreams the chances of them happening increases. I think this is for three reasons:
Sharing Dreams Creates Accountability
Firstly, it creates a little accountability. When I share a dream I have (whether it be a big dream or a small one) I find it opens a conversation that becomes ongoing. The other person then has permission to followup and ask how the dream chasing is going and even if they don’t ask, I know they know… so I am motivated to pursue it!
Sharing Dreams Helps You Recruit Dream Collaborators
Secondly, I find that by sharing a dream with another person you often find collaborators who can help you make it happen. Just last week I told a friend a dream of mine and two days later I received an email telling me that they’d been thinking about what I’d told them and that they:
knew someone that I should talk to that had experience in that area
had just read an article that I should read that touched on my dream
wanted to offer to help with one aspect of making the dream a reality
Sharing your dream might just unearth the keys to make that dream happen.
Sharing Dreams Makes Them More Robust
Lastly, I find that verbalising a dream helps the dream to find shape. My dreams usually start off just living in my mind. But once I share it, verbally, I begin to hear the strengths and weaknesses of what I’m saying. By putting words to your dream, you begin to test it and shape it. When others ask you questions about it you’re forced to look at it in a more realistic way – something that helps to make it a more robust idea!
Who to Share Your Dream With?
So at WDS last week I asked people in the audience to share a dream with the person next to them. This took a few people out of their comfort zone but in the days that have followed, I’ve had emails from a number of people who took the challenge who have already seen their dreams becoming a reality. And it all started when they shared a sentence or two about their dreams.
Sharing your dreams with random people is certainly something that can have a big impact but you might want to be a little more selective than that, particularly if your dream is more personal or in its very early stages.
Sometimes you want to be a little careful about who you want to share a dream with because some people will bring their critical thought processes to the dream before it is ready to be critiqued. There’s certainly nothing wrong with having a dream ‘tested’ by such people but I tend to do this once a dream has been developed and becomes a little emote robust!
I have a small group of friends and team members who I know are great for listening to my dreams and ambitions. They are people who care for me, who I trust and who I know will encourage and give energy towards making dreams come true. They are also people who can tell me if an idea isn’t so great when required – without crushing my spirt 🙂
Challenge: Share a Dream
So here’s my challenge to you. Share a dream!
Do you have a dream that you’ve been struggling to get out of your head? It may or may not relate to blogging – either way, I encourage you to share it with someone.
You may choose to do this by sharing it with a trusted friend as suggested above.
Or if your dream isn’t so personal or you’re ready to put it out there more publicly you might choose to do it in comments below or you might even write a blog post about that dream.
But don’t keep it to yourself!
How to Make Your Blogging Dreams Come True [Part 2] http://www.problogger.net/archives/2013/07/17/how-to-make-your-blogging-dreams-come-true-part-2/ http://www.problogger.net/archives/category/miscellaneous-blog-tips/feed/ @ProBlogger» Miscellaneous Blog Tips Blog Tips to Help You Make Money Blogging – ProBlogger http://www.problogger.net/wp-content/plugins/podpress/images/powered_by_podpress_large.jpg
Do you ever feel as a blogger like you’re talking to an empty room?