{"id":67778,"date":"2019-07-05T04:20:08","date_gmt":"2019-07-05T11:20:08","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/"},"modified":"2019-07-05T04:20:08","modified_gmt":"2019-07-05T11:20:08","slug":"how-to-integrate-social-media-into-mobile-web-design","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/","title":{"rendered":"How To Integrate Social Media Into Mobile Web Design"},"content":{"rendered":"How To Integrate Social Media Into Mobile Web Design<\/title><\/p>\n<article>\n<header>\n<h1>How To Integrate Social Media Into Mobile Web Design<\/h1>\n<address>Suzanne Scacca<\/address>\n<p> <time datetime=\"2019-07-04T13:00:59+02:00\">2019-07-04T13:00:59+02:00<\/time><time datetime=\"2019-07-05T11:05:05+00:00\">2019-07-05T11:05:05+00:00<\/time><\/header>\n<p>There are a number of reasons why social media is a popular form of socialization and communication today. For starters, it gives us a chance to connect with exponentially more people than in-person communities allow for (which is fantastic for both consumer and business). It\u2019s also encouraged a new style of communication where brevity and visual storytelling rules.<\/p>\n<p><strong>So, why aren\u2019t we using more social media-like features in mobile web design?<\/strong><\/p>\n<p>To be clear, I\u2019m not referring to the kinds of social media elements we already see on websites, like:<\/p>\n<ul>\n<li>Social logins<\/li>\n<li>Social follow icons<\/li>\n<li>Social share icons<\/li>\n<li>Social feeds<\/li>\n<li.instagram galleries>\n<li>YouTube embeds<\/li>\n<li>Pinnable images.<\/li>\n<\/li.instagram><\/ul>\n<p>I\u2019m talking about drawing inspiration from the abbreviated way in which we talk to others there. After all, mobile websites, PWAs, and native apps give us very little space to tell a story and engage an audience with it. Adopting a social media-inspired design would be helpful in quickly getting our message across on mobile screens.<\/p>\n<p>These elements, in particular, are worth exploring in your mobile design work.<\/p>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<h3>1. Use a Notification Symbol to Direct Visitors to Action<\/h3>\n<p>You don\u2019t have much space or time to waste on mobile, so why literally spell out what kind of action you want visitors to take? A lot of the symbols we use on social media can easily be repurposed for mobile websites.<\/p>\n<p>One such symbol is <strong>a notification ticker<\/strong>, a lot like the ones we\u2019re accustomed to seeing in the header or footer of social media apps when there\u2019s a message or reminder we need to be made aware of. Like this blue one found in the bottom bar on <a href=\"https:\/\/www.facebook.com\/\">Facebook<\/a>:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/834cb343-b546-4efc-8713-4e0530a036a6\/facebook-notification.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/facebook-notification.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/834cb343-b546-4efc-8713-4e0530a036a6\/facebook-notification.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/834cb343-b546-4efc-8713-4e0530a036a6\/facebook-notification.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/834cb343-b546-4efc-8713-4e0530a036a6\/facebook-notification.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/834cb343-b546-4efc-8713-4e0530a036a6\/facebook-notification.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/facebook-notification.png?w=900\" sizes=\"100vw\" alt=\"Facebook menu notification\"><\/a><figcaption>\n Facebook uses a small blue dot to signify that a new notification awaits you. (Source: <a href=\"https:\/\/www.facebook.com\/\">Facebook<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/834cb343-b546-4efc-8713-4e0530a036a6\/facebook-notification.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>On occasion, the <a href=\"https:\/\/www.redbull.com\/us-en\/\">Red Bull<\/a> website will put a similar-looking red ticker on its hamburger menu icon (this one is flashing though):<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a88402f2-2fcb-4be0-a7a1-6af600e58e9d\/red-bull-notification.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/red-bull-notification.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a88402f2-2fcb-4be0-a7a1-6af600e58e9d\/red-bull-notification.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a88402f2-2fcb-4be0-a7a1-6af600e58e9d\/red-bull-notification.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a88402f2-2fcb-4be0-a7a1-6af600e58e9d\/red-bull-notification.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a88402f2-2fcb-4be0-a7a1-6af600e58e9d\/red-bull-notification.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/red-bull-notification.png?w=900\" sizes=\"100vw\" alt=\"Red Bull menu notification\"><\/a><figcaption>\n The Red Bull mobile website displays a flashing red ticker on the hamburger menu. (Source: <a href=\"https:\/\/www.redbull.com\/us-en\/\">Red Bull<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a88402f2-2fcb-4be0-a7a1-6af600e58e9d\/red-bull-notification.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>This flashing notification has nothing to do with alerting me to account activity (because I\u2019m not logged into the website). However, it does certainly draw my eye to the navigation before anything else.<\/p>\n<p>If you have something pertinent you want visitors to see in the navigation or header of the site, a notification icon is a good way to grab their attention fast. And it doesn\u2019t have to be a colored dot the way Facebook or Red Bull have handled it. You could also use a number counter like the ones that appear when items sit in a shopping cart or emails in an inbox.<\/p>\n<h3>2. Boost Branding with Hashtags and Handles<\/h3>\n<p>The way we talk to one another on social media is quite unique. Not only do many people use acronyms to truncate how much they say in a tiny amount of space, but we\u2019ve also adopted a quicker way of getting our messages in front of target users.<\/p>\n<p>Take, for example, this message I\u2019ve written on <a href=\"https:\/\/twitter.com\/\">Twitter<\/a> about <a href=\"https:\/\/www.smashingmagazine.com\/2019\/06\/pwa-webpack-workbox\/\">a post Jad Joubran recently wrote about PWAs<\/a>.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4ee5fff7-ad40-4aec-9e4b-1ec7f600c09d\/twitter-message.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/twitter-message.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4ee5fff7-ad40-4aec-9e4b-1ec7f600c09d\/twitter-message.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4ee5fff7-ad40-4aec-9e4b-1ec7f600c09d\/twitter-message.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4ee5fff7-ad40-4aec-9e4b-1ec7f600c09d\/twitter-message.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4ee5fff7-ad40-4aec-9e4b-1ec7f600c09d\/twitter-message.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/twitter-message.png?w=900\" sizes=\"100vw\" alt=\"Basic Twitter message\"><\/a><figcaption>\n Example of a basic message shared on Twitter. (Source: <a href=\"https:\/\/twitter.com\/\">Twitter<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4ee5fff7-ad40-4aec-9e4b-1ec7f600c09d\/twitter-message.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Now, I could leave my message as is and hope that Jad runs across the mention or that people interested in learning how to build PWAs find it. But there\u2019s just too much noise on social media, which is why the usage of the handle (@) and hashtag (#) symbols has become helpful in getting our messages in front of the right people:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/39ee9dc6-b752-409d-b959-17b61c7af63e\/twitter-message-with-hashtags.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/twitter-message-with-hashtags.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/39ee9dc6-b752-409d-b959-17b61c7af63e\/twitter-message-with-hashtags.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/39ee9dc6-b752-409d-b959-17b61c7af63e\/twitter-message-with-hashtags.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/39ee9dc6-b752-409d-b959-17b61c7af63e\/twitter-message-with-hashtags.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/39ee9dc6-b752-409d-b959-17b61c7af63e\/twitter-message-with-hashtags.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/twitter-message-with-hashtags.png?w=900\" sizes=\"100vw\" alt=\"Twitter message with hashtags and handles\"><\/a><figcaption>\n Example of a Twitter message with hashtags and handles. (Source: <a href=\"https:\/\/twitter.com\/\">Twitter<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/39ee9dc6-b752-409d-b959-17b61c7af63e\/twitter-message-with-hashtags.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Take a look at the message above and note the differences. First, I\u2019ve included hashtags in this post for #pwa and #progressivewebapp. That way, if someone is interested in related topics, it\u2019ll be easier to locate this post now.<\/p>\n<p>In addition, I\u2019ve tagged Jad. This way, he\u2019ll see my shout-out. I\u2019ve also tagged Smashing Magazine since that\u2019s the magazine in which the article appeared. This is good for them since it\u2019ll increase the visibility of the brand while helping people who encounter the post make a direct connection between #pwa and @smashingmag.<\/p>\n<p>The <strong>hashtag and handle<\/strong> have become such an innate part of how we communicate online, that I\u2019m surprised more brands don\u2019t use them on their websites. And I\u2019m not talking about listing social media handles on a page. I mean actually integrating branded hashtags or handles within their designs as <a href=\"https:\/\/evolutionofsmooth.com\/\">eos<\/a> does here:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/40a26b87-796d-4c48-8d71-3d8e4cb7ed2b\/eos-hashtag.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/eos-hashtag.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/40a26b87-796d-4c48-8d71-3d8e4cb7ed2b\/eos-hashtag.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/40a26b87-796d-4c48-8d71-3d8e4cb7ed2b\/eos-hashtag.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/40a26b87-796d-4c48-8d71-3d8e4cb7ed2b\/eos-hashtag.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/40a26b87-796d-4c48-8d71-3d8e4cb7ed2b\/eos-hashtag.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/eos-hashtag.png?w=900\" sizes=\"100vw\" alt=\"eos website hashtag\"><\/a><figcaption>\n eos includes a branded hashtag within an image. (Source: <a href=\"https:\/\/evolutionofsmooth.com\/\">eos<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/40a26b87-796d-4c48-8d71-3d8e4cb7ed2b\/eos-hashtag.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>A couple of years back, I saw more hashtags and handles incorporated into web designs. Today, I don\u2019t see it as much.<\/p>\n<p>My guess is that designers have moved away from placing handles and hashtags into designs since visitors can\u2019t readily copy or click and do anything with them. But there is value in placing branded handles and hashtags into your designs on mobile.<\/p>\n<p>Think of it as a watermark for your brand images. Like the example above, people won\u2019t just walk away thinking about how cool that chapstick \u201cegg\u201d looks. They\u2019ll take note of the hashtag sitting perpendicular to it, too. And for those that are on their way to becoming loyal <em>eos<\/em> customers, that hashtag will stick with them.<\/p>\n<div><\/div>\n<h3>3. Add Trust Marks into the Design<\/h3>\n<p>There are certain social media platforms that give brands and public figures the ability to verify their identity. That way, anyone who wants to follow them will know who the person on the other side of the profile actually is (instead of, say, a bot or someone pretending to be them).<\/p>\n<p>Rather than slap a \u201cVerified Profile\u201d label on these profiles, platforms like <a href=\"https:\/\/twitter.com\/\">Twitter<\/a> and <a href=\"https:\/\/www.instagram.com\/\">Instagram<\/a> use a tiny symbol that lets people know it\u2019s okay to trust that the user is who they say they are. And it comes in the form of a small blue checkmark next to their username.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7e249551-219c-4c9e-b59d-3e3090ef0d5f\/instagram-verified-checkmark.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/instagram-verified-checkmark.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7e249551-219c-4c9e-b59d-3e3090ef0d5f\/instagram-verified-checkmark.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7e249551-219c-4c9e-b59d-3e3090ef0d5f\/instagram-verified-checkmark.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7e249551-219c-4c9e-b59d-3e3090ef0d5f\/instagram-verified-checkmark.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7e249551-219c-4c9e-b59d-3e3090ef0d5f\/instagram-verified-checkmark.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/instagram-verified-checkmark.png?w=900\" sizes=\"100vw\" alt=\"Instagram trust mark\"><\/a><figcaption>\n Instagram uses a small blue checkmark to let people know it\u2019s a real profile.. (Source: <a href=\"https:\/\/www.instagram.com\/\">Instagram<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7e249551-219c-4c9e-b59d-3e3090ef0d5f\/instagram-verified-checkmark.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Trust marks are already used on the web to let visitors know when a site is safe enough to engage with and make a purchase through. However, they usually come in the form of big security provider logos like Norton Security that build consumer trust just before checkout.<\/p>\n<p>Instead, you should find ways to leverage smaller <strong>trust marks<\/strong> to reinforce trust throughout the entire experience. Here\u2019s how <a href=\"https:\/\/www.sephora.com\/\">Sephora<\/a> does this for its store:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/be1e3dd8-8f76-472b-8bad-8fcf3d886f8c\/sephora-stamps.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/sephora-stamps.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/be1e3dd8-8f76-472b-8bad-8fcf3d886f8c\/sephora-stamps.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/be1e3dd8-8f76-472b-8bad-8fcf3d886f8c\/sephora-stamps.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/be1e3dd8-8f76-472b-8bad-8fcf3d886f8c\/sephora-stamps.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/be1e3dd8-8f76-472b-8bad-8fcf3d886f8c\/sephora-stamps.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/sephora-stamps.png?w=900\" sizes=\"100vw\" alt=\"Sephora trust marks\"><\/a><figcaption>\n Sephora uses the same trust mark stamps to call attention to more notable products. (Source: <a href=\"https:\/\/www.sephora.com\/\">Sephora<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/be1e3dd8-8f76-472b-8bad-8fcf3d886f8c\/sephora-stamps.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>There are two trust marks present in the screenshot above.<\/p>\n<p>The GlamGlow product has a red-and-white stamp on it that says \u201cAllure Readers\u2019 Choice Award Winner\u201d. You already know how much people trust in the reviews and recommendations of other consumers, so you can imagine what this sort of symbol does to pique their interest and build trust in the product.<\/p>\n<p>The Farmacy product has a green-and-white stamp on it that says \u201cClean at Sephora\u201d. This is a label Sephora slaps onto any product that\u2019s free of questionable ingredients. For customers that are extra conscious about where their products come from and what they\u2019re made from, this symbol will quickly direct their attention to the kinds of products they\u2019re looking for.<\/p>\n<h3>4. Lead with a Singular Memorable Image<\/h3>\n<p>When you scroll through your social media feed, you\u2019re not likely to see post after post with galleries of images attached to them. Unless, that is, someone just went on vacation and they want to show off everything they did or saw.<\/p>\n<p>Usually, most of the social media posts you encounter keep it simple: a text message with a complementary image attached to it. And if the image didn\u2019t come courtesy of the link they\u2019re promoting, then they\u2019ll attach something equally as memorable and relevant.<\/p>\n<p>Social media feeds are full of posts from the people we\u2019re connected to, so it\u2019s important to have one strong image that helps ours stand out among the crowd. A mobile website would benefit from that same approach.<\/p>\n<p>In this case, I\u2019m going to point you to this promotional element on the <a href=\"https:\/\/www.westelm.com\/\">West Elm<\/a> mobile website for the approaching July 4th holiday in the United States:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18cf931e-fdb0-4004-ba70-460cfad5a6a7\/west-elm-gif.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/west-elm-gif.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18cf931e-fdb0-4004-ba70-460cfad5a6a7\/west-elm-gif.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18cf931e-fdb0-4004-ba70-460cfad5a6a7\/west-elm-gif.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18cf931e-fdb0-4004-ba70-460cfad5a6a7\/west-elm-gif.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18cf931e-fdb0-4004-ba70-460cfad5a6a7\/west-elm-gif.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/west-elm-gif.png?w=900\" sizes=\"100vw\" alt=\"West Elm GIF\"><\/a><figcaption>\n A sparkler GIF used to promote West Elm\u2019s July 4th promotion. (Source: <a href=\"https:\/\/www.westelm.com\/\">West Elm<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18cf931e-fdb0-4004-ba70-460cfad5a6a7\/west-elm-gif.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Since sparklers are a big part of how we celebrate Independence Day, this sparkler GIF is an incredibly effective, yet simplistic way to draw visitors\u2019 attention to the relevant promotion.<\/p>\n<p>Not only is the GIF memorable, but it\u2019s very relevant to what online shoppers are looking for at the moment. Plus, it all fits within the space of a smartphone screen, which makes it a more convenient way to read about the promotion before clicking through to claim the 20% offer.<\/p>\n<h3>5. Make Your Brand Meme-like<\/h3>\n<p>When brands use social media, they have to think about more than just pairing a carefully crafted message with an engaging image. They also have to consider the consistency of their posts. In some cases, brands will use color to tie their posts together. Others will rely on the messaging itself to create a cohesive identity.<\/p>\n<p>Then, there are brands that have <strong>turned their brands into memes<\/strong>. Old Spice\u2019s \u201cThe Man Your Man Could Smell Like\u201d or Terry Crews campaigns are some of the more successful and memorable examples of how to do this.<\/p>\n<figure><\/figure>\n<p>It\u2019s not just brands like Old Spice or Dollar Shave Club whose humorous advertising become memes that can pull this off. Take a brand like <a href=\"https:\/\/www.oreo.com\/\">Oreo<\/a>, for example.<\/p>\n<p>Oreo is a household name. And, yet, would anyone have considered sharing posts about Oreo cookies with others? Before 2013, I\u2019m not so sure. <em>After<\/em> Oreo published its now-famous post during the Super Bowl blackout, though, things changed.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0857f095-3148-4b48-b5e7-27c843354b95\/oreo-super-bowl.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/oreo-super-bowl.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0857f095-3148-4b48-b5e7-27c843354b95\/oreo-super-bowl.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0857f095-3148-4b48-b5e7-27c843354b95\/oreo-super-bowl.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0857f095-3148-4b48-b5e7-27c843354b95\/oreo-super-bowl.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0857f095-3148-4b48-b5e7-27c843354b95\/oreo-super-bowl.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/oreo-super-bowl.png?w=900\" sizes=\"100vw\" alt=\"Oreo Super Bowl meme\"><\/a><figcaption>\n Oreo gave a boost to its already iconic image during the 2013 Super Bowl. (Source: <a href=\"https:\/\/www.oreo.com\/\">Oreo<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0857f095-3148-4b48-b5e7-27c843354b95\/oreo-super-bowl.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>This might not be a meme on the level of Old Spice. However, it most certainly is on a similar level of trendiness and shareability.<\/p>\n<p>Oreo has continued to find ways to turn its iconic Oreo cookie image into a meme-like status symbol.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/24cffad8-c362-4960-bfdc-19afd60681d0\/oreo-meme.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/oreo-meme.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/24cffad8-c362-4960-bfdc-19afd60681d0\/oreo-meme.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/24cffad8-c362-4960-bfdc-19afd60681d0\/oreo-meme.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/24cffad8-c362-4960-bfdc-19afd60681d0\/oreo-meme.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/24cffad8-c362-4960-bfdc-19afd60681d0\/oreo-meme.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/oreo-meme.png?w=900\" sizes=\"100vw\" alt=\"The Oreo cookie meme\"><\/a><figcaption>\n Oreo has turned its cookie into a meme of its own. (Source: <a href=\"https:\/\/www.oreo.com\/\">Oreo<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/24cffad8-c362-4960-bfdc-19afd60681d0\/oreo-meme.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>You know how everyone and their mother has been sharing <a href=\"https:\/\/www.smashingmagazine.com\/2019\/04\/privacy-ux-better-cookie-consent-experiences\/\">cookies notices<\/a> on their websites, thanks to GDPR? Oreo utilizes its brand image to have a little fun with it.<\/p>\n<p>As you can see here, the drop-down creatively uses the Oreo image while also playing on the word \u201ccookie\u201d itself. It\u2019s a fantastic example of how to be creative, even in the smallest of spaces and for a limited amount of time. It certainly grabbed my attention enough to deem it worth sharing here.<\/p>\n<div><\/div>\n<h3>6. Embrace the Selfie<\/h3>\n<p>I recognize that selfies don\u2019t always have the most positive of connotations, but it\u2019s really difficult to have a discussion about using social media-like elements in design without addressing them. So, I\u2019m going to go out on a limb here and say that mobile websites would benefit from including selfie-like portraits\u2026 when not used in a phony or obnoxious context.<\/p>\n<p>I mean, that\u2019s the main complaint about <strong>selfies<\/strong>, right? They\u2019re staged and not at all realistic of a person\u2019s actual life. Or they\u2019re not staged because they\u2019re taken at the worst possible time and in the least professional of contexts.<\/p>\n<p>That said, selfies do stand out from super-glossy headshots and other staged company photos. And when you present them on a mobile interface, it gives a website (and the brand behind it) a more social-like presence. In other words, you\u2019re inviting people to engage with you, not to just casually glance through copy and photos on their way to mindlessly converting. There\u2019s something more to this experience when a selfie is present.<\/p>\n<p>One example of this that I particularly love comes from <a href=\"https:\/\/www.aleydasolis.com\/en\/\">Aleyda Solis<\/a>, an SEO consultant and author.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a2f73597-dca7-47de-98de-8c85d68632aa\/aleyda-solis-selfie.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/aleyda-solis-selfie.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a2f73597-dca7-47de-98de-8c85d68632aa\/aleyda-solis-selfie.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a2f73597-dca7-47de-98de-8c85d68632aa\/aleyda-solis-selfie.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a2f73597-dca7-47de-98de-8c85d68632aa\/aleyda-solis-selfie.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a2f73597-dca7-47de-98de-8c85d68632aa\/aleyda-solis-selfie.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/aleyda-solis-selfie.png?w=900\" sizes=\"100vw\" alt=\"Aleyda Solis selfies\"><\/a><figcaption>\n Aleyda Solis uses selfies as promotional images on her website. (Source: <a href=\"https:\/\/www.aleydasolis.com\/en\/\">Aleyda Solis<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a2f73597-dca7-47de-98de-8c85d68632aa\/aleyda-solis-selfie.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Just looking at the above screenshot out of context, I feel like I\u2019m scrolling through her personal feed on Instagram. And because I\u2019m so accustomed to seeing interesting-looking photos on Instagram and then immediately seeking out the captions for more information on them, I\u2019m compelled to do the same here. Talk about Pavlov\u2019s dog, right?<\/p>\n<p>For brands with a recognizable figure or team behind them, a selfie could be a great way to up your visitors\u2019 engagement with a website. Just make sure it paints the person or people in a positive light.<\/p>\n<h3>7. Use Filters to Tell Individual Stories<\/h3>\n<p>Way, way back in the day, we used to take photos using film and pray that the images came out okay and would be acceptable enough to frame. Then, we got digital cameras that allowed us to see what our pictures looked like in real-time, though it often led to too many rounds of picture-taking to try to capture the perfect lighting or shot.<\/p>\n<p>Nowadays, our smartphones and social media platforms make all of this so much simpler. We can take photos wherever we are, whenever we feel like it and many of the tools we need to clean up a shot and apply an attractive filter are already built into our apps.<\/p>\n<p>Needless to say, <strong>filters<\/strong> are a big part of what makes sharing photos on social media so appealing to users.<\/p>\n<p>Now, it\u2019s not as though brands haven\u2019t utilized filters before to spruce up their branding or photography. However, have you considered what using different filters in different contexts could do for your mobile website? They could effectively turn different pages or products into unique experiences or stories of their own.<\/p>\n<p><a href=\"https:\/\/us.abelodor.com\/\">Abel<\/a> is an online perfume shop that sells a small collection of perfumes, with scents like pink iris, red santal and green cedar. Notice the trend? Each scent is described by a distinct color, as this example of golden neroli demonstrates:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/270058a2-e3d2-4887-b8b4-869f3a7ef26b\/abel-yellow-product-1.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/abel-yellow-product-1.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/270058a2-e3d2-4887-b8b4-869f3a7ef26b\/abel-yellow-product-1.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/270058a2-e3d2-4887-b8b4-869f3a7ef26b\/abel-yellow-product-1.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/270058a2-e3d2-4887-b8b4-869f3a7ef26b\/abel-yellow-product-1.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/270058a2-e3d2-4887-b8b4-869f3a7ef26b\/abel-yellow-product-1.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/abel-yellow-product-1.png?w=900\" sizes=\"100vw\" alt=\"Abel\u2019s golden neroli scent\"><\/a><figcaption>\n An example of one of Abel\u2019s product pages. (Source: <a href=\"https:\/\/us.abelodor.com\/\">Abel<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/270058a2-e3d2-4887-b8b4-869f3a7ef26b\/abel-yellow-product-1.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Although the perfume itself is clear in color, the design of this image gives the bottle a golden color to match its namesake. Now, here\u2019s where it gets interesting:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a519304e-db94-4c79-b04c-89bc7bd7e32c\/abel-yellow-product-2.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/abel-yellow-product-2.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a519304e-db94-4c79-b04c-89bc7bd7e32c\/abel-yellow-product-2.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a519304e-db94-4c79-b04c-89bc7bd7e32c\/abel-yellow-product-2.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a519304e-db94-4c79-b04c-89bc7bd7e32c\/abel-yellow-product-2.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a519304e-db94-4c79-b04c-89bc7bd7e32c\/abel-yellow-product-2.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/abel-yellow-product-2.png?w=900\" sizes=\"100vw\" alt=\"Abel golden filter\"><\/a><figcaption>\n Abel applies a color-specific filter to images on each product page. (Source: <a href=\"https:\/\/us.abelodor.com\/\">Abel<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a519304e-db94-4c79-b04c-89bc7bd7e32c\/abel-yellow-product-2.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>This is one of the images lower on the product\u2019s page. While I suspect the sunset captured in the photo is real, it\u2019s obvious that a filter has been applied to lighten and warm the overall tone of the image.<\/p>\n<p>The same is done with another image further down on the page:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e95a6a8e-3fd9-49c3-8a0f-3e989ad9e11a\/abel-yellow-product-3.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/abel-yellow-product-3.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e95a6a8e-3fd9-49c3-8a0f-3e989ad9e11a\/abel-yellow-product-3.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e95a6a8e-3fd9-49c3-8a0f-3e989ad9e11a\/abel-yellow-product-3.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e95a6a8e-3fd9-49c3-8a0f-3e989ad9e11a\/abel-yellow-product-3.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e95a6a8e-3fd9-49c3-8a0f-3e989ad9e11a\/abel-yellow-product-3.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/abel-yellow-product-3.png?w=900\" sizes=\"100vw\" alt=\"Abel image filters\"><\/a><figcaption>\n Another filter-enhanced image on Abel\u2019s product page. (Source: <a href=\"https:\/\/us.abelodor.com\/\">Abel<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e95a6a8e-3fd9-49c3-8a0f-3e989ad9e11a\/abel-yellow-product-3.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Again, the emphasis is placed on making the image lighter and warmer in tone. And if you look at the snippet of text just above, you can see that Abel even compares the sensation of this perfume to \u201cthe warm warm blanket of the night falling over Lisbon\u201d.<\/p>\n<p>So, rather than get hung up on designing your mobile website with one singular color palette, consider the individual emotion and identity of each of its pages or elements. You may find that filters and colors help you tell a stronger and unique story for each than the words alone could.<\/p>\n<h3>The Benefits Of A Social Media-Inspired Mobile Design<\/h3>\n<p>As we attempt to unlock more ways to design for mobile without stifling creativity or overwhelming the user experience, I think it\u2019s important to look to other kinds of media for inspiration.<\/p>\n<p>It\u2019s not like we haven\u2019t already found ways to tell a visual story through design on smaller or more isolated screens. Just look at <a href=\"https:\/\/www.smashingmagazine.com\/2018\/03\/future-mobile-web-design-video-game-design-storytelling\/\">video game design<\/a>. Social media is another type of media that\u2019s successfully carved out a style of its own. And considering how addictive and engaging social media often is for consumers, it\u2019s a good platform to turn to for design inspiration.<\/p>\n<div>\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/logo-red-3.png?w=900\" alt=\"Smashing Editorial\"><span>(ra, yk, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How To Integrate Social Media Into Mobile Web Design How To Integrate Social Media Into Mobile Web Design Suzanne Scacca 2019-07-04T13:00:59+02:002019-07-05T11:05:05+00:00 There are a number of reasons why social media is a popular form of socialization and communication today. For starters, it gives us a chance to connect with exponentially more people than in-person communities…<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/\"> Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":67779,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-67778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"How To Integrate Social Media Into Mobile Web DesignHow To Integrate Social Media Into Mobile Web Design Suzanne Scacca 2019-07-04T13:00:59+02:002019-07-05T11:05:05+00:00There are a number of reasons why social media is a popular form of socialization and communication today. For starters, it gives us a chance to connect with exponentially more people than in-person communities allow for\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"How To Integrate Social Media Into Mobile Web Design | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"How To Integrate Social Media Into Mobile Web DesignHow To Integrate Social Media Into Mobile Web Design Suzanne Scacca 2019-07-04T13:00:59+02:002019-07-05T11:05:05+00:00There are a number of reasons why social media is a popular form of socialization and communication today. For starters, it gives us a chance to connect with exponentially more people than in-person communities allow for\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-07-05T11:20:08+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-07-05T11:20:08+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"How To Integrate Social Media Into Mobile Web Design | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"How To Integrate Social Media Into Mobile Web DesignHow To Integrate Social Media Into Mobile Web Design Suzanne Scacca 2019-07-04T13:00:59+02:002019-07-05T11:05:05+00:00There are a number of reasons why social media is a popular form of socialization and communication today. For starters, it gives us a chance to connect with exponentially more people than in-person communities allow for\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/how-to-integrate-social-media-into-mobile-web-design\\\/#article\",\"name\":\"How To Integrate Social Media Into Mobile Web Design | Design for Immersive Technologies\",\"headline\":\"How To Integrate Social Media Into Mobile Web Design\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/facebook-notification.png?fit=400%2C400&ssl=1\",\"width\":400,\"height\":400},\"datePublished\":\"2019-07-05T04:20:08-07:00\",\"dateModified\":\"2019-07-05T04:20:08-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/how-to-integrate-social-media-into-mobile-web-design\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/how-to-integrate-social-media-into-mobile-web-design\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/how-to-integrate-social-media-into-mobile-web-design\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/how-to-integrate-social-media-into-mobile-web-design\\\/#listItem\",\"name\":\"How To Integrate Social Media Into Mobile Web Design\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/how-to-integrate-social-media-into-mobile-web-design\\\/#listItem\",\"position\":3,\"name\":\"How To Integrate Social Media Into Mobile Web Design\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/how-to-integrate-social-media-into-mobile-web-design\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/how-to-integrate-social-media-into-mobile-web-design\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/how-to-integrate-social-media-into-mobile-web-design\\\/\",\"name\":\"How To Integrate Social Media Into Mobile Web Design | Design for Immersive Technologies\",\"description\":\"How To Integrate Social Media Into Mobile Web DesignHow To Integrate Social Media Into Mobile Web Design Suzanne Scacca 2019-07-04T13:00:59+02:002019-07-05T11:05:05+00:00There are a number of reasons why social media is a popular form of socialization and communication today. For starters, it gives us a chance to connect with exponentially more people than in-person communities allow for\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/how-to-integrate-social-media-into-mobile-web-design\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/facebook-notification.png?fit=400%2C400&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/how-to-integrate-social-media-into-mobile-web-design\\\/#mainImage\",\"width\":400,\"height\":400},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/how-to-integrate-social-media-into-mobile-web-design\\\/#mainImage\"},\"datePublished\":\"2019-07-05T04:20:08-07:00\",\"dateModified\":\"2019-07-05T04:20:08-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"How To Integrate Social Media Into Mobile Web Design | Design for Immersive Technologies","description":"How To Integrate Social Media Into Mobile Web DesignHow To Integrate Social Media Into Mobile Web Design Suzanne Scacca 2019-07-04T13:00:59+02:002019-07-05T11:05:05+00:00There are a number of reasons why social media is a popular form of socialization and communication today. For starters, it gives us a chance to connect with exponentially more people than in-person communities allow for","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/#article","name":"How To Integrate Social Media Into Mobile Web Design | Design for Immersive Technologies","headline":"How To Integrate Social Media Into Mobile Web Design","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/facebook-notification.png?fit=400%2C400&ssl=1","width":400,"height":400},"datePublished":"2019-07-05T04:20:08-07:00","dateModified":"2019-07-05T04:20:08-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/#listItem","name":"How To Integrate Social Media Into Mobile Web Design"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/#listItem","position":3,"name":"How To Integrate Social Media Into Mobile Web Design","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/","name":"How To Integrate Social Media Into Mobile Web Design | Design for Immersive Technologies","description":"How To Integrate Social Media Into Mobile Web DesignHow To Integrate Social Media Into Mobile Web Design Suzanne Scacca 2019-07-04T13:00:59+02:002019-07-05T11:05:05+00:00There are a number of reasons why social media is a popular form of socialization and communication today. For starters, it gives us a chance to connect with exponentially more people than in-person communities allow for","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/facebook-notification.png?fit=400%2C400&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/#mainImage","width":400,"height":400},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/#mainImage"},"datePublished":"2019-07-05T04:20:08-07:00","dateModified":"2019-07-05T04:20:08-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"How To Integrate Social Media Into Mobile Web Design | Design for Immersive Technologies","og:description":"How To Integrate Social Media Into Mobile Web DesignHow To Integrate Social Media Into Mobile Web Design Suzanne Scacca 2019-07-04T13:00:59+02:002019-07-05T11:05:05+00:00There are a number of reasons why social media is a popular form of socialization and communication today. For starters, it gives us a chance to connect with exponentially more people than in-person communities allow for","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/","article:published_time":"2019-07-05T11:20:08+00:00","article:modified_time":"2019-07-05T11:20:08+00:00","twitter:card":"summary","twitter:title":"How To Integrate Social Media Into Mobile Web Design | Design for Immersive Technologies","twitter:description":"How To Integrate Social Media Into Mobile Web DesignHow To Integrate Social Media Into Mobile Web Design Suzanne Scacca 2019-07-04T13:00:59+02:002019-07-05T11:05:05+00:00There are a number of reasons why social media is a popular form of socialization and communication today. For starters, it gives us a chance to connect with exponentially more people than in-person communities allow for"},"aioseo_meta_data":{"post_id":"67778","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 19:05:51","updated":"2026-09-01 14:30:16","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHow To Integrate Social Media Into Mobile Web Design\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"How To Integrate Social Media Into Mobile Web Design","link":"https:\/\/www.taterboy.com\/blog\/2019\/07\/how-to-integrate-social-media-into-mobile-web-design\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-hDc","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/facebook-notification.png?fit=400%2C400&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/67778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=67778"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/67778\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/67779"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=67778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=67778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=67778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}