Ever spent an hour (or even a day) working on something just to throw the whole lot away and redo it in five minutes? That isn’t just a beginner’s code mistake; it is a real-world situation that you can easily find yourself in especially if the problem you’re trying to solve isn’t well understood to begin with.

This is why I’m such a big proponent of upfront design, user research, and creating often multiple prototypes — also known as the old adage of “You don’t know what you don’t know.” At the same time, it is very easy to look at something someone else has made, which may have taken them quite a lot of time, and think it is extremely easy because you have the benefit of hindsight by seeing a finished product.

This idea that simple is easy was summed up nicely by Jen Simmons while speaking about CSS Grid and Piet Mondrian’s paintings:

“I feel like these paintings, you know, if you look at them with the sense of like ‘Why’s that important? I could have done that.’ It’s like, well yeah, you could paint that today because we’re so used to this kind of thinking, but would you have painted this when everything around you was Victorian — when everything around you was this other style?”

I feel this sums up the feeling I have about seeing websites and design systems that make complete sense; it’s almost as if the fact they make sense means they were easy to make. Of course, it is usually the opposite; writing the code is the simple bit, but it’s the thinking and process that goes into it that takes the most effort.

With that in mind, I’m going to explore building a text box, in an exaggeration of situations many of us often find ourselves in. Hopefully, by the end of this article, we can all feel more emphatic to how the journey from start to finish is rarely linear.

Brief

We all know that careful planning and understanding of the user need is important to a successful project of any size. We also all know that all too often we feel to need to rush to quickly design and develop new features. That can often mean our common sense and best practices are forgotten as we slog away to quickly get onto the next task on the everlasting to-do list. Rinse and repeat.

Today our task is to build a text box. Simple enough, it needs to allow a user to type in some text. In fact, it is so simple that we leave the task to last because there is so much other important stuff to do. Then, just before we pack up to go home, we smirk and write:

<input type="text">

There we go!

Oh wait, we probably need to hook that up to send data to the backend when the form is submitted, like so:

<input type="text" name="our_textbox">

That’s better. Done. Time to go home.

How Do You Add A New Line?

The issue with using a simple text box is it is pretty useless if you want to type a lot of text. For a name or title it works fine, but quite often a user will type more text than you expect. Trust me when I say if you leave a textbox for long enough without strict validation, someone will paste the entire of War and Peace. In many cases, this can be prevented by having a maximum amount of characters.

In this situation though, we have found out that our laziness (or bad prioritization) of leaving it to the last minute meant we didn’t consider the real requirements. We just wanted to do another task on that everlasting to-do list and get home. This text box needs to be reusable; examples of its usage include as a content entry box, a Twitter-style note box, and a user feedback box. In all of those cases, the user is likely to type a lot of text, and a basic text box would just scroll sideways. Sometimes that may be okay, but generally, that’s an awful experience.

Thankfully for us, that simple mistake doesn’t take long to fix:

<textarea name="our_textbox"></textarea>

Now, let’s take a moment to consider that line. A </code>: as simple as it can get without removing the name. Isn’t it interesting, or is it just my pedantic mind that we need to use a completely different element to add a new line? It isn’t a type of input, or an attribute used to add multi-line to an input. Also, the <code><textarea></code> element is not self-closing but an input is? Strange.</p> <p>This “moment to consider” sent me time traveling back to October 1993, trawling through the depths of the <a target="_blank" href="http://1997.webhistory.org/www.lists/www-talk.1993q4/0182.html">www-talk</a> mailing list. There was clearly much discussion about the future of the web and what “HTML+” should contain. This was 1993 and they were <a target="_blank" href="http://1997.webhistory.org/www.lists/www-talk.1993q4/0182.html">discussing ideas</a> such as <code></code> which wasn’t available until HTML5, and <a target="_blank" href="http://1997.webhistory.org/www.lists/www-talk.1993q4/0184.html">Jim Davis</a> said:</p> <blockquote><p>“Well, it’s far-fetched I suppose, but you might use HTML forms as part of a game playing interface.”</p></blockquote> <p>This really does show that the web wasn’t just intended to be about documents as is widely believed. Marc Andreessen <a target="_blank" href="http://1997.webhistory.org/www.lists/www-talk.1993q4/0158.html">suggested</a> to have <code></code> instead of allowing new lines in the single-line <code>text</code> type, [saying]: (<a target="_blank" href="http://1997.webhistory.org/www.lists/www-talk.1993q4/0200.html">http://1997.webhistory.org/www.lists/www-talk.1993q4/0200.html</a>)</p> <blockquote><p>“Makes the browser code cleaner — they have to be handled differently internally.”</p></blockquote> <p>That’s a fair reason to have <code><textarea></code> separate to text, but that’s still not what we ended up with. So why is <code><textarea></code> its own element?</p> <p>I didn’t find any decision in the mailing list archives, but by the following month, the <a target="_blank" href="https://www.w3.org/MarkUp/HTMLPlus/htmlplus_41.html">HTML+ Discussion Document</a> had the <code><textarea></code> element and a note saying:</p> <blockquote><p>“In the initial design for forms, multi-line text fields were supported by the INPUT element with TYPE=TEXT. Unfortunately, this causes problems for fields with long text values as SGML limits the length of attributea literals. The HTML+ DTD allows for up to 1024 characters (the SGML default is only 240 characters!)”</p></blockquote> <p>Ah, so that’s why the text goes within the element and cannot be self-closing; they were not able to use an attribute for long text. In 1994, the <code><textarea></code> element was included, along with many others from HTML+ such as <code></code> in the HTML 2 spec.</p> <p>Okay, that’s enough. I could easily explore the archives further but back to the task.</p> <h3>Styling A <code><textarea></code></h3> <p>So we’ve got a default <code><textarea></code>. If you rarely use them or haven’t seen the browser defaults in a long time, then you may be surprised. A <code><textarea></code> (made almost purely for multi-line text) looks very similar to a normal text input except most browser defaults style the border darker, the box slightly larger, and there are lines in the bottom right. Those lines are the resize handle; they aren’t actually part of the spec so browsers all handle (pun absolutely intended) it in their own way. That generally means that the resize handle cannot be restyled, though you can disable resizing by setting <code>resize: none</code> to the <code><textarea></code>. It is possible to create a custom handle or use browser specific pseudo elements such as <code>::-webkit-resizer</code>.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f354a41-76e5-457e-8a08-41e4a201d7ad/textbox-unabridged-default-textarea.png"><br /> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f354a41-76e5-457e-8a08-41e4a201d7ad/textbox-unabridged-default-textarea.png 400w,<br /> https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f354a41-76e5-457e-8a08-41e4a201d7ad/textbox-unabridged-default-textarea.png 800w,<br /> https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f354a41-76e5-457e-8a08-41e4a201d7ad/textbox-unabridged-default-textarea.png 1200w,<br /> https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f354a41-76e5-457e-8a08-41e4a201d7ad/textbox-unabridged-default-textarea.png 1600w,<br /> https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f354a41-76e5-457e-8a08-41e4a201d7ad/textbox-unabridged-default-textarea.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f354a41-76e5-457e-8a08-41e4a201d7ad/textbox-unabridged-default-textarea.png" sizes="100vw" alt="The default <code><textarea></code> looks very small with a grey border and three lines as a resize handle.”></a><figcaption> A default textarea with no styling (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f354a41-76e5-457e-8a08-41e4a201d7ad/textbox-unabridged-default-textarea.png">Large preview</a>)<br /> </figcaption></figure> <p>It’s important to understand the defaults, especially because of the resizing ability. It’s a very unique behavior; the user is able to drag to change the size of the element by default. If you don’t override the minimum and maximum sizes then the size could be as small as 9px × 9px (when I checked Chrome) or as large as they have patience to drag it. That’s something that could cause mayhem with the rest of the site’s layout if it’s not considered. Imagine a grid where <code><textarea></code> is in one column and a blue box is in another; the size of the blue box is purely decided by the size of the <code><textarea></code>.</p> <p>Other than that, we can approach styling a <code><textarea></code> much the same as any other input. Want to change the grey around the edge into thick green dashes? Sure here you go: <code>border: 5px dashed green;</code>. Want to restyle the focus in which a lot of browsers have a slightly blurred box shadow? Change the outline — responsibly though, you know, that’s important for accessibility. You can even add a background image to your <code><textarea></code> if that interests you (I can think of a few ideas that would have been popular when skeuomorphic design was more celebrated).</p> <div></div> <h3>Scope Creep</h3> <p>We’ve all experienced scope creep in our work, whether it is a client that doesn’t think the final version matches their idea or you just try to squeeze in a tiny tweak and end up taking forever to finish it. So I ( enjoying creating the persona of an exaggerated project manager telling us what we need to build) have decided that our <code><textarea></code> just is not good enough. Yes, it is now multi-line, and that’s great, and yes it even ‘pops’ a bit more with its new styling. Yet, it just doesn’t fit the very vague user need that I’ve pretty much just thought of now after we thought we were almost done.</p> <p>What happens if the user puts in thousands of words? Or drags the resize handle so far it breaks the layout? It needs to be reusable, as we have already mentioned, but in some of the situations (such as a ‘Twittereqsue’ note taking box), we will need a limit. So the next task is to add a character limit. The user needs to be able to see how many characters they have left.</p> <p>In the same way we started with <code></code> instead of <code><textarea></code>, it is very easy to think that adding the <code>maxlength</code> attribute would solve our issue. That is one way to limit the amount of characters the user types, it uses the browser’s built-in validation, but it is not able to display how many characters are left.</p> <p>We started with the HTML, then added the CSS, now it is time for some JavaScript. As we’ve seen, charging along like a bull in a china shop without stopping to consider the right approaches can really slow us down in the long run. Especially in situations where there is a large refactor required to change it. So let’s think about this counter; it needs to update as the user types, so we need to trigger an event when the user types. It then needs to check if the amount of text is already at the maximum length.</p> <p>So which event handler should we choose?</p> <ul> <li><strong><code>change</code></strong><br /> Intuitively, it may make sense to choose the change event. It works on <code><textarea></code> and does what it says on the tin. Except, it only triggers when the element loses focus so it wouldn’t update while typing.</li> <li><strong><code>keypress</code></strong><br /> The keypress event is triggered when typing any character, which is a good start. But it does not trigger when characters are deleted, so the counter wouldn’t update after pressing backspace. It also doesn’t trigger after a copy/paste.</li> <li><strong><code>keyup</code></strong><br /> This one gets quite close, it is triggered whenever a key has been pressed (including the backspace button). So it does trigger when deleting characters, but still not after a copy/paste.</li> <li><strong><code>input</code></strong><br /> This is the one we want. This triggers whenever a character is added, deleted or pasted.</li> </ul> <p>This is another good example of how using our intuition just isn’t enough sometimes. There are so many quirks (especially in JavaScript!) that are all important to consider before getting started. So the code to add a counter that updates needs to update a counter (which we’ve done with a span that has a class called <code>counter</code>) by adding an <code>input</code> event handler to the <code><textarea></code>. The maximum amount of characters is set in a variable called <code>maxLength</code> and added to the HTML, so if the value is changed it is changed in only one place.</p> <pre><code>var textEl = document.querySelector('textarea') var counterEl = document.querySelector('.counter') var maxLength = 200 textEl.setAttribute('maxlength', maxLength) textEl.addEventListener('input', (val) => { var count = textEl.value.length counterEl.innerHTML = ${count}/${maxLength} }) </code></pre> <h3>Browser Compatibility And Progressive Enhancement</h3> <p>Progressive enhancement is a mindset in which we understand that we have no control over what the user exactly sees on their screen, and instead, we try to guide the browser. Responsive Web Design is a good example, where we build a website that adjusts to suit the content on the particular size viewport without manually setting what each size would look like. It means that on the one hand, we strongly care that a website works across all browsers and devices, but on the other hand, we don’t care that they look exactly the same.</p> <p>Currently, we are missing a trick. We haven’t set a sensible default for the counter. The default is currently “0/200” if 200 were the maximum length; this kind of makes sense but has two downsides. The first, it doesn’t really make sense at first glance. You need to start typing before it is obvious the 0 updates as you type. The other downside is that the 0 updates as you type, meaning if the JavaScript event doesn’t trigger properly (maybe the script did not download correctly or uses JavaScript that an old browser doesn’t support such as the double arrow in the code above) then it won’t do anything. A better way would be to think carefully beforehand. How would we go about making it useful when it is both working and when it isn’t?</p> <p>In this case, we could make the default text be “200 character limit.” This would mean that without any JavaScript at all, the user would always see the character limit but it just wouldn’t feedback about how close they are to the limit. However, when the JavaScript is working, it would update as they type and could say “200 characters remaining” instead. It is a very subtle change but means that although two users could get different experiences, neither are getting an experience that feels broken.</p> <p>Another default that we could set is the <code>maxlength</code> on the element itself rather than afterwards with JavaScript. Without doing this, the baseline version (the one without JS) would be able to type past the limit.</p> <h3>User Testing</h3> <p>It’s all very well testing on various browsers and thinking about the various permutations of how devices could serve the website in a different way, but are users able to use it?</p> <p>Generally speaking, no. I’m consistently shocked by user testing; <strong>people never use a site how you expect them to</strong>. This means that user testing is crucial.</p> <p>It’s quite hard to simulate a user test session in an article, so for the purposes of this article, I’m going to just focus on one point that I’ve seen users struggle with on various projects.</p> <p>The user is happily writing away, gets to 0 characters remaining, and then gets stuck. They forget what they were writing, or they don’t notice that it had stopped typing.</p> <p>This happens because there is nothing telling the user that something has changed; if they are typing away without paying much attention, then they can hit the maximum length without noticing. This is a frustrating experience.</p> <p>One way to solve this issue is to allow overtyping, so the maximum length still counts for it to be valid when submitted but it allows the user to type as much as they want and then edit it before submission. This is a good solution as it gives the control back to the user.</p> <p>Okay, so how do we implement overtyping? Instead of jumping into the code, let’s step through in theory. <code>maxlength</code> doesn’t allow overtyping, it just stops allowing input once it hits the limit. So we need to remove <code>maxlength</code> and write a JS equivalent. We can use the input event handler as we did before, as we know that works on paste, etc. So in that event, the handler would check if the user has typed more than the limit, and if so, the counter text could change to say “10 characters too many.” The baseline version (without the JS) would no longer have a limit at all, so a useful middle ground could be to add the <code>maxlength</code> to the element in the HTML and remove the attribute using JavaScript.</p> <p>That way, the user would see that they are over the limit without being cut off while typing. There would still need to be validation to make sure it isn’t submitted, but that is worth the extra small bit of work to make the user experience far better.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9bd74a36-054c-4c61-8c1f-01bfde7ebb3e/textbox-unabridged-overtype.png"><br /> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9bd74a36-054c-4c61-8c1f-01bfde7ebb3e/textbox-unabridged-overtype.png 400w,<br /> https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9bd74a36-054c-4c61-8c1f-01bfde7ebb3e/textbox-unabridged-overtype.png 800w,<br /> https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9bd74a36-054c-4c61-8c1f-01bfde7ebb3e/textbox-unabridged-overtype.png 1200w,<br /> https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9bd74a36-054c-4c61-8c1f-01bfde7ebb3e/textbox-unabridged-overtype.png 1600w,<br /> https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9bd74a36-054c-4c61-8c1f-01bfde7ebb3e/textbox-unabridged-overtype.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9bd74a36-054c-4c61-8c1f-01bfde7ebb3e/textbox-unabridged-overtype.png" sizes="100vw" alt="An example showing “17 characters too many” in red text next to a <code><textarea></code>.”></a><figcaption> Allowing the user to overtype (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9bd74a36-054c-4c61-8c1f-01bfde7ebb3e/textbox-unabridged-overtype.png">Large preview</a>)<br /> </figcaption></figure> <h3>Designing The Overtype</h3> <p>This gets us to quite a solid position: the user is now able to use any device and get a decent experience. If they type too much it is not going to cut them off; instead, it will just allow it and encourage them to edit it down.</p> <p>There’s a variety of ways this could be designed differently, so let’s look at how Twitter handles it:</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35a0665c-7809-492a-b90d-a8b975d02680/textbox-unabridged-twitter-overtype.png"><br /> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35a0665c-7809-492a-b90d-a8b975d02680/textbox-unabridged-twitter-overtype.png" alt="A screenshot from Twitter showing their textarea with overtyped text with a red background."></a><figcaption> Twitter’s <code><textarea></code> (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35a0665c-7809-492a-b90d-a8b975d02680/textbox-unabridged-twitter-overtype.png">Large preview</a>)<br /> </figcaption></figure> <p>Twitter has been iterating its main tweet <code><textarea></code> since they started the company. The current version uses a lot of techniques that we could consider using.</p> <p>As you type on Twitter, there is a circle that completes once you get to the character limit of 280. Interestingly, it doesn’t say how many characters are available until you are 20 characters away from the limit. At that point, the incomplete circle turns orange. Once you have 0 characters remaining, it turns red. After the 0 characters, the countdown goes negative; it doesn’t appear to have a limit on how far you can overtype (I tried as far as 4,000 characters remaining) but the tweet button is disabled while overtyping.</p> <p>So this works the same way as our <code><textarea></code> does, with the main difference being the characters represented by a circle that updates and shows the number of characters remaining after 260 characters. We could implement this by removing the text and replacing it with an SVG circle.</p> <p>The other thing that Twitter does is add a red background behind the overtyped text. This makes it completely obvious that the user is going to need to edit or remove some of the text to publish the tweet. It is a really nice part of the design. So how would we implement that? We would start again from the beginning.</p> <div></div> <p>You remember the part where we realized that a basic input text box would not give us multiline? And that a <code>maxlength</code> attribute would not give us the ability to overtype? This is one of those cases. As far as I know, there is nothing in CSS that gives us the ability to style parts of the text inside a <code><textarea></code>. This is the point where some people would suggest web components, as what we would need is a pretend <code><textarea></code>. We would need some kind of element — probably a div — with <code>contenteditable</code> on it and in JS we would need to wrap the overtyped text in a span that is styled with CSS.</p> <p>What would the baseline non-JS version look like then? Well, it wouldn’t work at all because while <code>contenteditable</code> will work without JS, we would have no way to actually do anything with it. So we would need to have a <code><textarea></code> by default and remove that if JS is available. We would also need to do a lot of accessibility testing because while we can trust a <code><textarea></code> to be accessible relying on browser features is a much safer bet than building your own components. How does Twitter handle it? You may have seen it; if you are on a train and your JavaScript doesn’t load while going into a tunnel then you get chucked into a decade-old legacy version of Twitter where there is no character limit at all.</p> <p>What happens then if you tweet over the character limit? Twitter reloads the page with an error message saying “Your Tweet was over the character limit. You’ll have to be more clever.” No, Twitter. <em>You</em> need to be more clever.</p> <h3>Retro</h3> <p>The only way to conclude this dramatization is a retrospective. What went well? What did we learn? What would we do differently next time or what would we change completely?</p> <p>We started very simple with a basic textbox; in some ways, this is good because it can be all too easy to overcomplicate things from the beginning and an MVP approach is good. However, as time went on, we realized how important it is to have some critical thinking and to consider what we are doing. We should have known a basic textbox wouldn’t be enough and that a way of setting a maximum length would be useful. It is even possible that if we have conducted or sat in on user research sessions in the past that we could have anticipated the need to allow overtyping. As for the browser compatibility and user experiences across devices, considering progressive enhancement from the beginning would have caught most of those potential issues.</p> <p>So one change we could make is to be much more proactive about the thinking process instead of jumping straight into the task, thinking that the code is easy when actually the code is the least important part.</p> <p>On a similar vein to that, we had the “scope creep” of <code>maxlength</code>, and while we could possibly have anticipated that, we would rather not have any scope creep at all. So everybody involved from the beginning would be very useful, as a diverse multidisciplinary approach to even small tasks like this can seriously reduce the time it takes to figure out and fix all the unexpected tweaks.</p> <h3>Back To The Real World</h3> <p>Okay, so I can get quite deep into this made-up project, but I think it demonstrates well how complicated the most seemingly simple tasks can be. Being user-focussed, having a progressive enhancement mindset, and thinking things through from the beginning can have a real impact on both the speed and quality of delivery. And I didn’t even mention testing!</p> <p>I went into some detail about the history of the <code><textarea></code> and which event listeners to use, some of this can seem overkill, but I find it fascinating to gain a real understanding of the subtleties of the web, and it can often help demystify issues we will face in the future.</p> <div> <img decoding="async" src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial"><span>(ra, il)</span> </div> </article> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-1643955"> <h2><a class="title" href="http://www.webmastersgallery.com/2018/09/06/local-vs-global-web-design-how-to-reach-the-right-audience/" rel="bookmark">Local Vs. Global Web Design: How to Reach the Right Audience</a></h2> <div class="info"> <span class="date">September 6th, 2018</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2018/09/06/local-vs-global-web-design-how-to-reach-the-right-audience/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="https://www.webdesignerdepot.com/2018/09/local-vs-global-web-design-how-to-reach-the-right-audience/"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2018/05/Target-Colors.png" title="" alt=""></a></div> <p> Businesses have more options today in terms of how they get their goods and services out to customers: strictly brick-and-mortar, 100% online, or a combination of the two. Because of this, web design isn’t necessarily as straightforward as we’d like it to be.</p> <p>Of course, there will always be certain best practices to abide by—abundant <a target="_blank" href="https://www.webdesignerdepot.com/2017/10/4-things-every-designer-should-know-about-whitespace/">white space</a>; <a target="_blank" href="https://www.webdesignerdepot.com/2017/10/7-free-tools-for-testing-responsive-layouts/">responsive</a> and mobile-first design; easy-to-find <a target="_blank" href="https://www.webdesignerdepot.com/2017/11/how-to-design-better-ctas/">CTAs</a>; streamlined user flow; consistent design and messaging site-wide.</p> <p>But big-picture items aside, what exactly do you need to know about designing for local businesses, global enterprises, and those that attempt to span both categories? Let’s take a look at the differences in designing for audiences based on location.</p> <h1>Local vs. Global Web Design, What You Need to Know</h1> <p>Below are 4 parts of the web design and development experience that drastically differ between local and global-serving websites. Keep these in mind as you work on future projects:</p> <h2>1. Web Hosting</h2> <p>I won’t get too much into the specifics of web hosting; however, I do think it’s important to understand that some web hosting solutions just aren’t ideal for global web design. This isn’t just because of server resources and how much traffic the server, in turn, is able to handle. There’s also the matter of distance.</p> <p>Think about it like this: You designed a website that’s hosted from a server in Denver, Colorado. The website sells hats. There’s nothing really tying the hat design to a regional audience, and so you’ve targeted the web design to a global audience. And, for whatever reason, people in Australia love it. However, the web hosting provider doesn’t have a web server anywhere near Australia. They are solely based in the U.S. With already limited resources in the hosting plan, the high amounts of traffic from Australia severely compromise the speed of the website (which happens when transmitting lots of website files, images, scripts, and so on around the world).</p> <p>So, what do you do? Simply hope the web design and selection of hat offerings are enough to make visitors look past the sluggish loading times? Nope. If you’re serving a global audience, you need to 1) use a web hosting company with servers around the world, 2) choose a web hosting plan capable of handling that kind of traffic, and 3) equip your site with a <a target="_blank" href="https://www.webdesignerdepot.com/2017/06/supercharge-your-site-with-a-cdn/">CDN</a>.</p> <h2>2. Colors</h2> <p>Something like <a target="_blank" href="https://www.webdesignerdepot.com/2017/09/the-designers-guide-to-color-contrast/">color contrast</a> is a pretty basic consideration for any website you design. But have you ever thought about the underlying meaning behind the colors you’ve chosen? And have you put those in the context of your audience’s perception?</p> <p>For instance, let’s look at the color red. Red is an incredibly powerful color. It’s also very memorable. Ask any consumer what <a target="_blank" href="https://www.target.com/">Target</a>‘s logo is and they’re bound to tell you it’s a red bullseye. Not just a bullseye, but a <i>red</i> one.</p> </p> <p>But red can have more somber associations in other countries. In South Africa and China, red is used for mourning and funerals, respectively. If you have a growing audience in those parts of the world, that color choice might not make sense despite its more positive connotations in other parts of the world.</p> <p>Conversely, you can think about how color plays into local design. If you’re trying to form a strong attachment with an audience, say in Chicago, you could use colors reminiscent of one of the more beloved sports teams there. Or design it in a way that it makes them think of a local landmark or event.</p> <h2>3. Images</h2> <p>As with color, you have to be careful about what kind of message you send with images on your website.</p> <p>For a local audience, you’d be best off using recognizable images from your base of operations as well as of your team; not some cold, generic stock photography. Take <a target="_blank" href="https://www.phase3mc.com/">Phase 3</a>, as an example.</p> <p><a target="_blank" href="https://www.phase3mc.com/"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2018/05/phase3.jpg" width="650" title="" alt=""></a></p> <p>The background video that plays on the home page looks pretty darn authentic, giving visitors a glimpse behind the scenes of what the agency does. Scroll down further on the page and you’ll see that they’ve added images representative of each office location:</p> <p><a target="_blank" href="https://www.phase3mc.com/"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2018/05/phase3-b.jpg" width="650" title="" alt=""></a></p> <p>These small touches give a local audience a greater connection to a brand.</p> <p>Now, with a global company, it may be okay to use premium stock photography, though you might be better off relying on strong swatches of colors (<a target="_blank" href="https://www.webdesignerdepot.com/2018/04/10-reasons-to-love-and-use-gradients-in-2018/">gradients</a> are huge right now anyway).</p> <h2>4. Copy</h2> <p>I would suggest that, when it comes to copy, there are a few rules to stick by for global visitors:</p> <ul> <li>Keep the copy on your site short.</li> <li>Avoid any colloquial speak or jargon.</li> <li>Use long-tail keywords that focus on your service or product.</li> <li>If you sell anything on the site, include easy options for choosing other countries, languages, or currencies.</li> <li>If you have a contact form, streamline the process of filling it out by providing easy-to-use dropdowns to select country codes, populate addresses, etc.</li> <li>Mention partnerships, awards, and other associations that bring to mind a global presence (e.g. Google certifications, Amazon integration, major enterprise partners, etc.)</li> </ul> <p><a target="_blank" href="https://www.majux.com/">Majux</a> is an example of a Philadelphia-based company that targets a nationwide audience:</p> <p><a target="_blank" href="https://www.majux.com/"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2018/05/Majux-Philly.png" width="650" title="" alt=""></a></p> <p>As you can see, there’s no mention of “Philadelphia” in the copy, the metadata doesn’t include a hint of it, and they’re even using an 800-number instead of a local area code.</p> <p>To write copy for a local audience, use these tips instead:</p> <ul> <li>Craft copy that’s longer and feels more personalized.</li> <li>Use colloquial speak the local audience will recognize and quickly warm to.</li> <li>Use long-tail keywords that include mention of the physical location.</li> <li>Reference the location in the copy, too.</li> <li>If you have a corresponding brick-and-mortar location, create a juxtaposition between the two experiences. Encourage customers to use the site to check prices, let them know they can order online and pick up in store, etc. Make it clear that you want it to be a seamless experience between digital and in-house.</li> <li>Mention partnerships, awards, and other associations with well-known local companies.</li> </ul> <p><a target="_blank" href="https://smalltalkmedia.com/">Small Talk Media</a> is a media agency that touts its Philadelphia roots:</p> <p><a target="_blank" href="https://smalltalkmedia.com/"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2018/05/Small-Talk-Philly.png" width="650" title="" alt=""></a></p> <p>As you can tell from this highlight reel, their Philly location plays a big part in the brand’s identity:</p> <p><a target="_blank" href="https://smalltalkmedia.com/"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2018/05/Small-Talk-Blog-Highlights.png" width="650" title="" alt=""></a></p> <h1>Wrapping Up</h1> <p>In order to design a website well, you need to translate the users’ needs and expectations into an experience. And the key to having success with that experience is to target the right audience in the first place. But targeting a local user set versus one scattered around the region, country, or world requires different considerations.</p> <p>In general, it’s best to play it safe and buttoned-up when designing for a global audience. That way, you run less of a risk of isolating any one group of people and you give off the impression that your brand is much larger and capable of handling <i>anyone’s</i> needs. And, for local design, have fun with it. Show off your local pride and give visitors a way to more deeply connect with your brand.</p> <table width="100%"> <tr> <td valign="center"> <a target="_blank" href="https://www.mightydeals.com/deal/sketchit.html?ref=inwidget"><b>Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!</b></a> </td> <td width="90"> <a target="_blank" href="http://www.mightydeals.com/?ref=inwidget"><br /><img decoding="async" loading="lazy" src="https://mightydeals.com/web/images/widget-logo.png" height="40" width="90" border="0" title="" alt=""><br /></a> </td> </tr> </table> <p><a target="_blank" href="https://www.webdesignerdepot.com/2018/09/local-vs-global-web-design-how-to-reach-the-right-audience/">Source</a></p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-1642843"> <h2><a class="title" href="http://www.webmastersgallery.com/2018/09/05/what-do-we-call-browsers-native-development-tools/" rel="bookmark">What do we call browser’s native development tools?</a></h2> <div class="info"> <span class="date">September 5th, 2018</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2018/09/05/what-do-we-call-browsers-native-development-tools/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="https://css-tricks.com/what-do-we-call-browsers-native-development-tools/"><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2018/08/devtool-chrome-150x150.png" alt=""></a></div> <p>You know, that panel of tools that allows you to do stuff like inspect the DOM and see network requests. How do the companies that make them refer to them?</p> <ul> <li>Chrome calls them <a target="_blank" href="https://developers.google.com/web/tools/chrome-devtools/">DevTools</a>.</li> <li>Edge calls them <a target="_blank" href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide">DevTools</a>.</li> <li>Firefox calls them <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Tools">Developer Tools</a>.</li> <li>Safari calls it the <a target="_blank" href="https://developer.apple.com/safari/tools/">Web Inspector</a>.</li> </ul> <p>I think it’s somewhat safe to generically refer to them as DevTools. Safari is the only browser that doesn’t use that term, but I imagine even die-hard Safari users will know what you mean.</p> <p><span></span></p> <p><a target="_blank" href="https://css-tricks.com/what-do-we-call-browsers-native-development-tools/devtools-safari/"></a><br /> <a target="_blank" href="https://css-tricks.com/what-do-we-call-browsers-native-development-tools/devtools-firefox/"><img decoding="async" loading="lazy" width="150" height="150" src="https://css-tricks.com/wp-content/uploads/2018/08/devtools-firefox-150x150.png" alt=""></a></p> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/what-do-we-call-browsers-native-development-tools/">What do we call browser’s native development tools?</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-1642170"> <h2><a class="title" href="http://www.webmastersgallery.com/2018/09/05/big-bold-bison-font-fotw8/" rel="bookmark">Big Bold Bison Font FOTW#8</a></h2> <div class="info"> <span class="date">September 5th, 2018</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2018/09/05/big-bold-bison-font-fotw8/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="https://webdesignledger.com/big-bold-bison-font-fotw8/"><img decoding="async" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/5e646ef4-bison1-970x646.jpg" alt="Bison"></a></div> <h4><strong><em>There are few fonts out there that <a target="_blank" href="https://webdesignledger.com/graphics/">really strike me as bold</a>. Sometimes, you have a certain project, company, or product that is deserving of nothing less than bold. Well, for all of you out there that need such boldness in your life, I have good news.. I have found what you’ve been looking for.</em></strong></h4> <p><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/5e646ef4-bison1-970x646.jpg" alt="Bison" width="970" height="646"></p> <h2><span>Introducing: Bison Font</span></h2> <p><span>Bison is a powerful font created by Ellen Luff. Inspired by the animal, the Bison Font is bold, sturdy, and uncompromising. The straight and controlled lines combined with the smooth curves very much remind me of a bison. It says, “I’m in charge” and “I won’t be moved.”</span></p> <p><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/e413440f-bison3-970x646.jpg" alt="bison font" width="970" height="646"></p> <h2><span>What does it come with?</span></h2> <p><span>Like any great font package, you get a few goodies when you purchase it. The Bison Font package includes 10 all caps fonts: 4 weights, 6 italics, and 2 outlines. In addition, you’ll also get:</span></p> </p> <ul> <li><span>Bison Bold – Commanding and structured</span></li> <li><span>Bison Demibold – Persuasive and middleweight</span></li> <li><span>Bison regular – The perfect balance between light and bold</span></li> <li><span>Bison Light – Soft but strong</span></li> <li><span>Bison Outline – The best of both worlds: thick and thin</span></li> </ul> <p><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/15f91bcd-bison2-970x646.jpg" alt="bison font" width="970" height="646"></p> <h2><span>When to use Bison</span></h2> <p><span>Because of the wide range of weights, Bison works well in many applications. Mostly, I imagine it to be used in branding, logos, magazines, and maybe even a few films. It’s the perfect font for grabbing someones attention and getting your point across quickly. </span></p> </p> <p><span>One of the really cool things about Bison is that it supports a few other languages. Bison supports all Central and Western European, Vietnamese, and even some African languages.</span></p> <h2><span>Other work by Ellen</span></h2> <p><span>Ellen Luff has been hard at work for a while to create some of the best fonts out there. When you take a look at her work on <a target="_blank" href="https://creativemarket.com/">Creative Market</a>, you’ll quickly realize the shear amount of talent we’re dealing with. Here are some of the other amazing fonts you’ll find:</span></p> <p><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/85fcf1dd-kiona-970x646.jpg" alt="bison font " width="970" height="646"><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/190c7cde-august-970x646.jpg" alt="bison font " width="970" height="646"><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/983334f9-athena-970x646.jpg" alt="bison font " width="970" height="646"><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/c7388b02-lucy-rose-970x646.jpg" alt="bison font " width="970" height="646"></p> <p><span>If you like Ellen’s work, and want to see more or get some for your own, be sure to check out her page and other works. And, if you like content like this and want to stay up to date with the design world, check out more from Webdesignledger.</span></p> <p>Read More at <a target="_blank" rel="nofollow" href="https://webdesignledger.com/big-bold-bison-font-fotw8/">Big Bold Bison Font FOTW#8</a></p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-1642507"> <h2><a class="title" href="http://www.webmastersgallery.com/2018/09/05/designing-with-code/" rel="bookmark">Designing With Code</a></h2> <div class="info"> <span class="date">September 5th, 2018</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2018/09/05/designing-with-code/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <p>Wall Street Journal design director Matthew Ström on <a target="_blank" href="https://css-tricks.com/tools-thinking-tools-systems/">something near and dear to me</a>: the link between code and design tools:</p> <blockquote> <p>We’re in the middle of a design tool renaissance. In the 8 years since Sketch 1.0 was released, there’s been a wave of competition among traditional design tools. And as the number of tools available to designers grows exponentially, ideas that were once considered fringe are finding a broader audience.</p> <p>One of these ideas will significantly change the way digital products are designed: integrating design and code at a deep level. Figma can update a React code base in real time; InVision, Abstract, and Zeplin have done away with design-developer handoff documents; Framer’s new Framer X can render interactive React components directly into its workspace. These examples are just a hint of what’s to come.</p> </blockquote> <p><span></span></p> <p>Matthew then looks at how this combination of code and design has been improving his own design process, specifically on the “story cards” that appear on the homepage of the WSJ: </p> <blockquote> <p>A tiny bit of NodeJS fills in the cards with live data from the WSJ.com home page. I can make small changes to parts of the component and see how the system reacts in a matter of seconds. This multiplicative process means that small changes have a huge output, making my designs much more comprehensive in the process.</p> </blockquote> <p>I really can’t wait to see how our design tools are evolve. It’s a thoroughly exciting time to be a designer that’s interested in code.</p> <p><a target="_blank" href="https://matthewstrom.com/writing/designing-with-code.html" title="Direct link to featured article">Direct Link to Article</a> — <a target="_blank" href="https://css-tricks.com/designing-with-code/">Permalink</a></p> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/designing-with-code/">Designing With Code</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-1641718"> <h2><a class="title" href="http://www.webmastersgallery.com/2018/09/05/flutter-googles-take-on-cross-platform/" rel="bookmark">Flutter: Google’s take on cross platform</a></h2> <div class="info"> <span class="date">September 5th, 2018</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2018/09/05/flutter-googles-take-on-cross-platform/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="https://css-tricks.com/flutter-googles-take-on-cross-platform/"><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2018/08/flutter-01.png" alt=""></a></div> <p><a target="_blank" href="https://flutter.io/">Flutter</a> is a mobile <abbr title="Software Development Kit">SDK</abbr> that, at its core, is about empowering everyone to build beautiful mobile apps. Whether you come from the world of web development or native mobile development, Flutter makes it easier to create mobile apps in a familiar, simplified way, without ever giving up control to the framework.</p> <p><span></span></p> <p>As of this writing, Google AdWords and Alibaba are both using Flutter in production. <a target="_blank" href="https://flutter.io/showcase">You can see more examples of who’s using Flutter</a> (including the app I’ve worked on) on Flutter’s website on the showcase page.</p> <p>Right now, there’s a lot of buzz about Flutter. The question I see most often is, <em>“Flutter or React Native…which one should I use?”</em> Like all things in programming, its all about the tradeoffs you’re willing to make.</p> <p>I’m going to try to convince you that Flutter is the best option for mobile app development. I believe it’s better than any other cross platform framework, and it’s possibly better than native development — but more on that in a bit.</p> <p>Before that though, let me walk (quickly) through what Flutter is, and what it is not, starting with the Dart programming language.</p> <h3>What’s Dart?</h3> <p>Dart is a programming language created by Google and was used to write Flutter. Dart was created, more or less, because Google wanted a language that was “better” than JavaScript to write server side and front-end code. From what I understand, the main issue they had with JavaScript is how slowly it updates with new features since it relies on a huge committee for approvals and several browser vendors to implement it.</p> <p>After a series of decisions about whether to take on JavaScript directly or not, Google decided to make a language that semantically fit inside of JavaScript. In other words, every single thing you write in Dart can compile to JavaScript. This is why they didn’t just use Java — it’s semantically huge.</p> <p> <a target="_blank" href="https://gist.github.com/paulmillr/1208618">Here’s a leaked email chain from Google from 2010.</a> It’s the “coming to Jesus” moment that they decided they needed to do something about JavaScript.</p> <p>The fundamentals of Dart are similar to all high-level languages. That said, programming languages are, as it turns out, hard to learn. </p> <p>There’s good news, though. Dart excels at being a “safe” language to learn. Google didn’t set out to create anything innovative with Dart. They were seeking to make a language that was simple, productive and could be compiled into JavaScript.</p> <p>There is nothing particularly exciting about its syntax, and no special operators that will throw you through a loop. In Dart (unlike JavaScript), there is one way to say true: True. There is one way to say false: False.</p> <p>In JavaScript, this coerces to True:</p> <pre><code>if (3) { ... }</code></pre> <p>In Dart, that would blow up your program. Dart is, at its core, a productive, predictable, and simple language.</p> <p>This is important, because writing an app in Flutter is simply writing Dart. Flutter is, underneath it all, a library of Dart classes. There is no markup language involved or JSX-style hybrid language. Every bit of front-end code is written in Dart. No HTML. No CSS. </p> <h3>Why does Flutter use Dart?</h3> <p>If you’re coming from literally any other background (and you’re like me), you’ve probably complained about the fact that Flutter uses Dart, and not JavaScript. (Developers are, believe it or not, opinionated.)</p> <p>And there are reasons to be skeptical of this choice. It’s not one of the hot languages of today. It’s not even one of the top 25 most used languages. What gives? Is Google just using it because it’s their language? I’d imagine that played a role, but there are practical reasons, too.</p> <ul> <li>Dart supports both Just In Time (JIT) compiling and Ahead of Time (AOT) compiling. <ul> <li>The AOT compiler changes Dart into efficient native code. This makes Flutter fast (a win for the user and the developer), but it also means that almost all of the framework is written in Dart. For you, the developer, that means you customize everything.</li> <li>Dart’s optional JIT compiling allows hot-reloading to exist. Fast development and iteration is a key to the joy of using Flutter. When you save code in your text editor, your app is updated in your simulator in less than a second.</li> </ul> </li> <p>Dart is Object Oriented. This makes it easy to write visual user-experiences exclusively with Dart, with no need for a markup language. </p> <li>Dart is a productive and predictable language. It’s easy to learn and it feels familiar. Whether you come from a dynamic language or a static language, you can get up and running with ease.</li> <li>And yes, I’d image that it is extremely appealing to use a language made by the same company, because the Flutter team could work closely with the Dart team to implement new needed features.</li> </ul> <h3>Flutter vs. React Native (and other options)</h3> <p>Before I offer up my unsolicited opinions on your other options, I want to make this crystal clear: Flutter is not the answer 100% of the time. It’s a tool and we should choose the right tool for the job at hand. That said, I’d only argue that it’s something you should strongly consider in the future. </p> <h4>Native development (iOS and Android)</h4> <p>Your first choice is to write native apps for iOS and Android. This gives you maximum control, debugging tools, and (potentially) a very performant app. At a company, this likely means you have to write everything twice; once for each platform. You likely need different developers on different teams with different skillsets that can’t easily help each other.</p> <h4>React Native, WebViews, and other cross-platform JavaScript options</h4> <p>Your second option: cross-platform, JavaScript-based tools such as WebViews and React Native. These aren’t bad options. The problems you experience with native development disappear. Every front-end web developer on your team can chip in and help — all they need are some modern JavaScript skills. This is precisely why large companies such as AirBnb, Facebook, and Twitter have used React Native on core products. (AirBnb recently <a target="_blank" href="https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a">announced</a> that it would stop using React Native, because of some of the issues I’ll describe below.)</p> <p>The first “mobile apps” to be built cross platform are simply WebViews that run on WebKit (a browser rendering engine). These are literally just embedded web pages. The problem with this is basically that manipulating the DOM is very expensive and doesn’t perform well enough to make a great mobile experience. </p> <p>Some platforms have solved this problem by building the “JavaScript bridge.” This bridge lets JavaScript talk directly to native widgets.</p> <p>This is much more performant than WebViews, because you eliminate the DOM from the equation, but it’s still not ideal. Every time your app needs to talk directly to the rendering engine, it has to be compiled to native code to “cross the bridge.” On a single interaction, the bridge must be crossed <em>twice</em>: once from platform to app, and then back from app to platform.</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2018/08/flutter-01.png" alt=""></figure> <p>Flutter differs because it uses its own rendering engine, <a target="_blank" href="https://skia.org/">Skia</a>, which is the same rendering engine used in Chrome. Skia can communicate with Flutter apps. As a result, Flutter accepts local events <em>directly</em>, rather than having to first compile them into JavaScript. This is essentially possible because <em>Flutter compiles to native ARM code.</em> This is the secret to its success. When your app is fired up on a user’s device, it’s entirely running in the language that the device’s operating system expects.</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2018/08/flutter-02.png" alt=""></figure> <p>The JavaScript bridge is a marvel of modern programming, to be sure, but it presents three big problems.</p> <p>The first problem is that debugging is hard. When there’s an error in the runtime compiler, that error has to be traced back across the JavaScript bridge and found in the JavaScript code. It may be in markup or CSS-like syntax as well. The debugger itself may not work as well as we’d like it to.</p> <p>A second bigger issue, though, is performance. The JavaScript bridge is very expensive. Every time something in the app is tapped, that event must be sent across the bridge to your JavaScript app. The result, for lack of better term, is <em>jank</em>.</p> <p>The third big problem, <a target="_blank" href="https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a">according to AirBnb,</a> is that they found themselves having to dip down into the native code more often than they wanted to, which was a problem for their teams comprised mostly of JavaScript developers. (The jury is still out on this issue with Flutter, but I can say that I’ve never once had to try and write native code at my job. Some members of my team have created plugins in Objective-C and Java.)</p> <h3>The immediate benefits of Flutter</h3> <p>It’s likely, since you’re reading this article, that you’re interested in Flutter… but you might be skeptical. I admire how thorough you are in vetting technology.</p> <p>Your reasons for being skeptical are fair. It’s a new technology. That means breaking changes in the API. It means missing support for important features (such as Google Maps). It seems possible that Google could abandon it altogether one day.</p> <p>And, despite the fact that you believe Dart is great language, that doesn’t change the fact that Dart isn’t widely used, and many third-party libraries that you want may not exist.</p> <p>I would argue against all those points, though. The API unlikely to change, as the Google uses Flutter internally on major revenue-generating apps, including Google AdWords. Dart has recently moved into version 2, which means it will likely be a while until it changes much. It will likely be years until breaking changes are introduced which, in a computer world, is practically forever.</p> <p>Yes, there are indeed missing features, but Flutter gives you the complete control to add your own native plugins. In fact, many of the most important operating system plugins already exist, such as a map plugin, camera, location services, and device storage. The Dart and Flutter ecosystem and community already exists. It’s much smaller than the JavaScript community, of course, but I would argue that it’s concise. I see people every day contributing to existing packages, rather than creating new ones. </p> <p>Now, let’s talk about Flutter’s specific benefits.</p> <h4>No JavaScript bridge</h4> <p>This is a major bottleneck in development and in your application’s performance. Again, it leads to <em>jank</em>. Scrolling isn’t smooth, it’s not always performant, and it’s hard to debug.</p> <p>Flutter compiles to actual native code and is rendered using Skia. The app itself is running in native, so there’s no reason to convert Dart to native. This means that it doesn’t lose any of the performance or productivity when it’s running on a user’s device.</p> <h4>Compile time</h4> <p>If you’re coming from native development, one of your major pains is the development cycle. iOS is infamous for its insane compile times. In Flutter, a full compile generally takes less than 30 seconds, and incremental compiles are sub-seconds, thanks to hot-reload. At my day job, we develop features for our mobile client first because Flutter’s development cycle allows us to move so quickly. Only when we’re sure of our implementation do we go write those features in the web client.</p> <h4>Write once, test once, deploy everywhere</h4> <p>Not only do you get to write your app one time and deploy to iOS and Android, you also only have to write your tests once. Dart unit testing is quite easy, and Flutter includes a library for testing Widgets.</p> <h4>Code sharing</h4> <p>I’m going to be fair here: I suppose this is technically possible in JavaScript as well. But, it’s certainly not possible in native development. With Flutter and Dart, your web and mobile apps can share all the code, except each client’s views. (Of course, only if you’re using Dart for your web apps.) You can quite easily use dependency injection to run an <a target="_blank" href="https://webdev.dartlang.org/angular">AngularDart</a> app and Flutter app with the same models and controllers.</p> <p>And of course, even if you don’t want to share code between your web app and your mobile app, you’re sharing all your code between the iOS and Android apps.</p> <p>In practical terms, this means that you are super productive. I mentioned that we develop our mobile features first at my day job. Because we share business logic between web and mobile, once the mobile feature is implemented, we only have to write views that expect that same controller data.</p> <h4>Productivity and collaboration</h4> <p>Gone are the days of separate teams for iOS and Android. In fact, whether your use Dart or JavaScript in your web apps, Flutter development is familiar enough that all your teams will be unified. It’s not a stretch by any means to expect a JavaScript web developer to also effectively develop in Flutter and Dart. If you believe me here, then it follows that your new unified team will be three times more productive.</p> <h4>Code maintenance</h4> <p>Nothing is more satisfying then fixing a bug once and having it corrected on all your clients. Only in very specific cases is there a bug in a iOS app produced with Flutter that is not also in the Android version (and vice versa). In 100% of these cases, these bugs aren’t bugs, but cosmetic issues because Flutter follows the device OS design systems in it’s built-in widgets. Because these are issues like text sizing or alignment, they are trivial in the context of using engineering time to fix.</p> <h3>Flutter for JavaScript developers</h3> <p>Since you’re reading CSS-Tricks, I’d be willing to bet you’re a web developer. If you’ve used any of today’s hottest frameworks (e.g. React, Angular, Vue, etc.), then you’ll be happy to know that picking up Flutter is <em>easy</em>.</p> <p>Flutter is completely reactive, so the same mindset and paradigm that you’re used to with React carries over to Flutter. You’re essentially building a ton of small, reusable components (called Widgets in Flutter) just like React. These widgets are complete with lifecycle methods, and they’re written in classes. If you’ve used this syntax in React:</p> <pre><code>const MyComponent extends React.Component { //... render(){} }</code></pre> <p>…then you’ll pick up Flutter with no problem. This is how you do the same in Flutter:</p> <pre><code>class MyWidget extends StatelessWidget { //... build(){} }</code></pre> <p>And, just like React, Flutter favors composition over inheritance. For example, if you want to make a special <code>AddToCartButton</code> in React, you’d build a button with special functions and styles in JSX. That’s exactly how you do it in Flutter (minus the JSX).</p> <p>Finally, the layout system in Flutter is similar to CSS rules we’re familiar with, like flexbox and absolute positioning.</p> <p>This is also where a big difference in making views in Flutter comes in, though. In Flutter, literally <em>everything</em> is a Widget. There are some obvious, concrete Widgets, like <code>Text</code>, <code>Button</code>, and <code>AppBar</code>. But Animations and Layout declarations are also Widgets. To center text, you wrap a <code>Text</code> Widget in a <code>Center</code> Widget. To add padding, there’s a <code>Padding</code> Widget. </p> <p>Imagine breaking down a React app to the smallest possible reusable components you could make. For example, what if you made a higher-order React component that simply took a prop “padding” and all it did was add that amount of padding to whatever was nested within it. That’s how Flutter works, because there is no CSS or markup. </p> <p>In this sample picture, here are <em>a few</em> layout widgets that you might use, but you can’t ‘see’ as the user:</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2018/08/flutter-03.jpg" alt=""></figure> <p>That may seem like a ton of monotonous work, but Flutter comes with many, many Widgets built right in (such as <code>Padding</code> and <code>Center</code>) so you don’t have to waste time doing that yourself. </p> <p>These are some of the most common widgets:</p> <ul> <li><a target="_blank" href="https://flutter.io/widgets/layout/)">Layout</a> – <code>Row</code>, <code>Column</code>, <code>Scaffold</code>, <code>Stack</code></li> <li><a target="_blank" href="https://flutter.io/widgets/material/#App%20structure%20and%20navigation">Structures</a> – <code>Button</code>, <code>Toast</code>, <code>MenuDrawer</code></li> <li><a target="_blank" href="https://flutter.io/widgets/text/">Text</a> – <code>TextStyle</code>, <code>Color</code></li> <li><a target="_blank" href="https://flutter.io/widgets/animation/">Animations</a> – <code>FadeInPhoto</code>, transformations</li> <li><a target="_blank" href="https://flutter.io/widgets/styling/">Styling</a> – <code>Center</code>, <code>Padding</code></li> </ul> <h3>Final note</h3> <p>TL;DR: should you try Flutter? </p> <p>If you want to make buttery smooth mobile apps in a familiar style, then yes! The performance and developer experience are both completely held in tact in Flutter. Its animations tick at 60fps, and it has a bundle of built-in Cupertino-style and Material Design-style Widgets. Or, long story short: it’s <em>incredible</em> how quick you can be productive in Flutter, without sacrificing native performance.</p> <p>If you want to try Flutter today, here are a couple great places to start:</p> <ul> <li><a target="_blank" href="https://flutter.io/docs/">Flutter Docs – Getting Started</a></li> <li><a target="_blank" href="https://flutter.io/web-analogs/">Flutter for Web Developers (HTML/CSS equivalents)</a></li> <li><a target="_blank" href="http://flutterbyexample.com/">Flutter by Example</a></li> </ul> <p>The Flutter docs are truly some of the best I’ve ever seen, and they’ll teach you everything you need to know.</p> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/flutter-googles-take-on-cross-platform/">Flutter: Google’s take on cross platform</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-1641832"> <h2><a class="title" href="http://www.webmastersgallery.com/2018/09/05/preparing-your-app-for-ios-12-notifications/" rel="bookmark">Preparing Your App For iOS 12 Notifications</a></h2> <div class="info"> <span class="date">September 5th, 2018</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2018/09/05/preparing-your-app-for-ios-12-notifications/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="http://feedproxy.google.com/~r/SmashingMagazine/~3/uG9F4Csg1jc/"></a></div> <p> <title>Preparing Your App For iOS 12 Notifications</title></p> <article> <header> <h1>Preparing Your App For iOS 12 Notifications</h1> <address>Kaya Thomas</address> <p> 2018-09-05T13:30:35+02:002018-09-05T11:52:50+00:00</header> <p>In 2016, Apple announced a new extension that will allow developers to better customize their push and local notifications called the <code>UNNotificationContentExtension</code>. The extension gets triggered when a user long presses or 3D touches on a notification whenever it is delivered to the phone or from the lock/home screen. In the content extension, developers can use a view controller to structure the UI of their notification, but there was no user interaction enabled within the view controller — until now. With the release of iOS 12 and XCode 10, <strong>the view controller in the content extension now enables user interaction</strong> which means notifications will become even more powerful and customizable.</p> <p>At WWDC 2018, Apple also announced several changes to notification settings and how they appear on the home screen. In an effort to make users more aware of how they are using apps and allowing more user control of their app usage, there is a new notification setting called “Deliver Quietly.” Users can set your app to <em>Delivery Quietly</em> from the Notification Center, which means they will not receive banners or sound notifications from your app, but they will appear in the Notification Center. Apple using an in-house algorithm, which presumably tracks often you interact with notifications, will also <strong>ask users if they still want to receive notifications from particular apps</strong> and encourage you to turn on <em>Deliver Quietly</em> or turn them off completely.</p> <p>Notifications are getting a big refresh in iOS 12, and I’ve only scratched the surface. In the rest of this article, we’ll go over the rest of the new notification features coming to iOS 12 and how you can implement them in your own app.</p> <p><strong>Recommended reading</strong>: <em><a target="_blank" href="https://www.smashingmagazine.com/2018/06/wwdc-2018-diary-ios-developer/">WWDC 2018 Diary Of An iOS Developer</a></em></p> <h3>Remote vs Local Notifications</h3> <p>There are two ways to send push notifications to a device: remotely or locally. To send notifications remotely, you need a server that can send JSON payloads to Apple’s Push Notification Service. Along with a payload, you also need to send the device token and any other authentication certificate or tokens that verify your server is allowed to send the push notification through Apple. For this article, we focus on local notifications which do not need a separate server. Local notifications are requested and sent through the <code>UNUserNotificationCenter</code>. We’ll go over later how specifically to make the request for a local notification.</p> <p>In order to send a notification, you first need to get permission from the user on <strong>whether or not they want you to send them notifications</strong>. With the release of iOS 12, there are a lot of changes to notification settings and permissions so let’s break it down. To test out any of the code yourself, make sure you have the Xcode 10 beta installed.</p> <aside> <div> <div> <p>Getting the process <em>just</em> right ain’t an easy task. That’s why we’ve set up <strong>‘this-is-how-I-work’-sessions</strong> — with smart cookies sharing what works really well for them. A part of the <a target="_blank" href="https://smashed.by/casestudypanelmembership">Smashing Membership</a>, of course.</p> <p> <a target="_blank" href="https://smashed.by/casestudypanelmembership"><br /> Explore features ?<br /> </a> </div> <div> <a target="_blank" href="https://smashed.by/casestudypanelmembership"></p> <div> </div> <p> </a> </div> </p></div> </aside> <h3>Notification Settings And Permissions</h3> <h4>Deliver Quietly</h4> <p><em>Delivery Quietly</em> is Apple’s attempt to allow users more control over the noise they may receive from notifications. Instead of going into the settings app and looking for the app whose notification settings you want to change, you can now change the setting directly from the notification. This means that a lot more users may turn off notifications for your app or just delivery them quietly which means the app will get badged and notifications only show up in the Notification Center. If your app has its own custom notification settings, Apple is allowing you to link directly to that screen from the settings management view pictured below.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/015ae8de-f1c1-460e-82c4-303f9339246a/deliverquietly.png"><br /> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/983fa66d-c378-48b6-a2e1-4aab6c720733/app-ios-12-notifications-deliverquietly.png" alt="iPhone 8 Plus shown with Manage selected from notification which brings up the Deliver Quietly and Turn Off options."></a><figcaption> Delivery quietly feature. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/015ae8de-f1c1-460e-82c4-303f9339246a/deliverquietly.png">Large preview</a>)<br /> </figcaption></figure> <p>In order to link to your custom notification setting screen, you must set <code>providesAppNotificationSettings</code> as a <code>UNAuthorizationOption</code> when you are requesting notification permissions in the app delegate.</p> <p>In <code>didFinishLaunchingWithOptions</code>, add the following code:</p> <pre><code>UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .badge, .sound, .providesAppNotificationSettings]) { ... } </code></pre> <p>When you do this, you’ll now see your custom notification settings in two places:</p> <ul> <li>If the user selects <code>Turn Off</code> when they go to manage settings directly from the notification;</li> <li>In the notification settings within the system’s Settings app.</li> </ul> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e6fba0db-8684-420c-8d3d-414aaf80ce07/turnoffnotifications.png"><br /> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4ee20c1-ca99-419b-bfa4-4f5ebbffabf3/app-ios-12-notifications-turnoffnotifications.png" alt="iPhone 8 Plus shown with Turn Off selected from notification which brings up the Turn Off All Notifications and Configure in NotificationTester options."></a><figcaption> Deep link to to custom notification settings for NotificationTester from notification in the Notification Center. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e6fba0db-8684-420c-8d3d-414aaf80ce07/turnoffnotifications.png">Large preview</a>)<br /> </figcaption></figure> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/658ab8e1-d0f1-46b2-b092-7f8ed643f4e0/systemnotificationsettings.png"><br /> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45e51038-8365-4064-ab03-feee8cc56eef/app-ios-12-notifications-systemnotificationsettings.png" alt="iPhone 8 Plus shown with system Settings app open with Notifications screen for NotificationTester app."></a><figcaption> Deep link to custom notification settings for NotificationTester from system’s Settings app. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/658ab8e1-d0f1-46b2-b092-7f8ed643f4e0/systemnotificationsettings.png">Large preview</a>)<br /> </figcaption></figure> <p>You also have to make sure to handle the callback for when the user selects on either way to get to your notification settings. Your app delegate or an extension of your app delegate has to conform to the protocol <code>UNUserNotificationCenterDelegate</code> so you can then implement the following callback method:</p> <pre><code>func userNotificationCenter(_ center: UNUserNotificationCenter, openSettingsFor notification: UNNotification?) { let navController = self.window?.rootViewController as! UINavigationController let notificationSettingsVC = NotificationSettingsViewController() navController.pushViewController(notificationSettingsVC, animated: true) }</code></pre> <p>Another new <code>UNAuthorizationOption</code> is provisional authorization. If you don’t mind your notifications being delivered quietly, you can set add <code>.provisional</code> to your authorization options as shown below. This means that you don’t have to prompt the user to allow notifications — the notifications will still show up in the Notification Center.</p> <pre><code>UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .badge, .provisional]) { ... } </code></pre> <p>So now that you’ve determined how to request permission from the user to deliver notifications and how to navigate users to your own customized settings view, let’s go more into more detail about the actual notifications.</p> <h3>Sending Grouped Notifications</h3> <p>Before we get into the customization of the UI of a notification, let’s go over how to make the request for a local notification. First, you have to register any <code>UNNotificationCategory</code>, which are like templates for the notifications you want to send. Any notification set to a particular category will inherit any actions or options that were registered with that category. After you’ve requested permission to send notifications in <code>didFinishLaunchingWithOptions</code>, you can register your categories in the same method.</p> <pre><code>let hiddenPreviewsPlaceholder = "%u new podcast episodes available" let summaryFormat = "%u more episodes of %@" let podcastCategory = UNNotificationCategory(identifier: "podcast", actions: [], intentIdentifiers: [], hiddenPreviewsBodyPlaceholder: hiddenPreviewsPlaceholder, categorySummaryFormat: summaryFormat, options: []) UNUserNotificationCenter.current().setNotificationCategories([podcastCategory]) </code></pre> <p>In the above code, I start by initiating two variables:</p> <ul> <li><code>hiddenPreviewsPlaceholder</code><br /> This placeholder is used in case the user has “Show Previews” off for your app; if we don’t have a placeholder there, your notification will show with only “Notification” also the text.</li> <li><code>summaryFormat</code><br /> This string is new for iOS 12 and coincides with the new feature called “Group Notifications” that will help the Notification Center look a lot cleaner. All notifications will show up in stacks which will be either representing all notifications from the app or specific groups that the developer has set for there app.</li> </ul> <p>The code below shows how we associate a notification with a group.</p> <pre><code>@objc func sendPodcastNotification(for podcastName: String) { let content = UNMutableNotificationContent() content.body = "Introducing Season 7" content.title = "New episode of (podcastName):" content.threadIdentifier = podcastName.lowercased() content.summaryArgument = podcastName content.categoryIdentifier = NotificationCategoryType.podcast.rawValue sendNotification(with: content) } </code></pre> <p>For now, I’ve hardcoded the text of the notification just for the example. The <code>threadIdentifier</code> is what creates the groups that we show as stacks in the Notification Center. In this example, I want the notifications grouped by podcast so each notification you get is separated by what podcast it’s associated with. The <code>summaryArgument</code> matches back to our <code>categorySummaryFormat</code> we set in the app delegate. In this case, we want the string for the format: <code>"%u more episodes of %@"</code> to be the podcast name. Lastly, we have to set the category identifier to ensure the notification has the template we set in the app delegate.</p> <pre><code>func sendNotification(for category: String, with content: UNNotificationContent) { let uuid = UUID().uuidString let trigger = UNTimeIntervalNotificationTrigger(timeInterval: 5, repeats: false) let request = UNNotificationRequest(identifier: uuid, content: content, trigger: trigger) UNUserNotificationCenter.current().add(request, withCompletionHandler: nil) } </code></pre> <p>The above method is how we request the notification to be sent to the device. The identifier for the request is just a random unique string; the content is passed in and we create the content in our <code>sendPodcastNotification</code> method, and lastly, the trigger is when you want the notification to send. If you want the notification to send immediately, you can set that parameter to nil.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a4289cd7-c8c7-4699-be0c-099dfe26963d/groupednotifications.png"><br /> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/caa0866c-c0d0-4d65-b121-ef64a001eb3f/app-ios-12-notifications-groupednotifications.png" alt="iPhone 8 Plus lock screen shown with a grouped notification stack from Notification Tester app."></a><figcaption> Grouped notifications for NotificationTester. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a4289cd7-c8c7-4699-be0c-099dfe26963d/groupednotifications.png">Large preview</a>)<br /> </figcaption></figure> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/081cfe45-005b-4c63-8a4d-fcae440b96ad/hiddenpreviewgroup.png"><br /> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9cc3d6eb-5da6-4067-b091-1071009a9670/app-ios-12-notifications-hiddenpreviewgroup.png" alt="iPhone 8 Plus lock screen shown with a grouped notification stack from Notification Tester app that has hidden content."></a><figcaption> Notification grouped with previews turned off. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/081cfe45-005b-4c63-8a4d-fcae440b96ad/hiddenpreviewgroup.png">Large preview</a>)<br /> </figcaption></figure> <p>Using the methods we’ve described above, here’s the result on the simulator. I have a button that has the <code>sendPodcastNotification</code> method as a target. I tapped the button three times to have the notifications sent to the device. In the first photo, I have “Show Previews” set to “Always” so I see the podcast and the name of the new episodes along with the summary that shows I have two more new episodes to check out. When “Show Previews” is set to “Never,” the result is the second image above. The user won’t see which podcast it is to respect the “No Preview” setting, but they can still see that I have three new episodes to check out.</p> <div></div> <h3>Notification Content Extension</h3> <p>Now that we understand how to set our notification categories and make the request for them to be sent, we can go over how to customize the look of the notification using the Notification Service and Notification Content extensions. The Notification Service extension allows you to edit the notification content and download any attachments in your notification like images, audio or video files. The Notification Content extension contains a view controller and storyboard that allows you to customize the look of your notification as well as handle any user interaction within the view controller or taps on notification actions.</p> <p>To add these extensions to your app go File ? New ? Target.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e944c138-1386-4050-99e1-e240d1e1cba9/template-new-target.png"><br /> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e944c138-1386-4050-99e1-e240d1e1cba9/template-new-target.png" alt="Xcode shown after selecting from menu to add a new target, Notification Content Extension is highlighted."></a><figcaption> Adding new target to app for the Notification Content Extension. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e944c138-1386-4050-99e1-e240d1e1cba9/template-new-target.png">Large preview</a>)<br /> </figcaption></figure> <p>You can only add them one at a time, so name your extension and repeat the process to add the other. If a pop-up appears asking you to activate your new scheme, click the “Activate” button to set it up for debugging.</p> <p>For the purpose of this tutorial, we will be focusing on the Notification Content Extension. For local notifications, we can include the attachments in the request, which we’ll go over later.</p> <p>First, go to the <em>Info.plist</em> file in the Notification Content Extension target.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d26c3dca-2733-4e91-941c-b6e4f1bff676/plistfile.png"><br /> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d26c3dca-2733-4e91-941c-b6e4f1bff676/plistfile.png" alt="Info.plist file for Notification Content Extension shown in Xcode."></a><figcaption> Info.plist for the Notification Content Extension. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d26c3dca-2733-4e91-941c-b6e4f1bff676/plistfile.png">Large preview</a>)<br /> </figcaption></figure> <p>The following attributes are required:</p> <ul> <li><code>UNNotificationExtensionCategory</code><br /> A string value equal to the notification category which we created and set in the app delegate. This will let the content extension know which notification you want to have custom UI for.</li> <li><code>UNNotificationExtensionInitialContentSizeRatio</code><br /> A number between 0 and 1 which determines the aspect ratio of your UI. The default value is 1 which will allow your interface to have its total height equal to its width.</li> </ul> <p>I’ve also set <code>UNNotificationExtensionDefaultContentHidden</code> to “YES” so that the default notification does not show when the content extension is running.</p> <p>You can use the storyboard to set up your view or create the UI programmatically in the view controller. For this example I’ve set up my storyboard with an image view which will show the podcast logo, two labels for the title and body of the notification content, and a “Like” button which will show a heart image.</p> <p>Now, in order to get the image showing for the podcast logo and the button, we need to go back to our notification request:</p> <pre><code>guard let pathUrlForPodcastImg = Bundle.main.url(forResource: "startup", withExtension: "jpg") else { return } let imgAttachment = try! UNNotificationAttachment(identifier: "image", url: pathUrlForPodcastImg, options: nil) guard let pathUrlForButtonNormal = Bundle.main.url(forResource: "heart-outline", withExtension: "png") else { return } let buttonNormalStateImgAtt = try! UNNotificationAttachment(identifier: "button-normal-image", url: pathUrlForButtonNormal, options: nil) guard let pathUrlForButtonHighlighted = Bundle.main.url(forResource: "heart-filled", withExtension: "png") else { return } let buttonHighlightStateImgAtt = try! UNNotificationAttachment(identifier: "button-highlight-image", url: pathUrlForButtonHighlighted, options: nil) content.attachments = [imgAttachment, buttonNormalStateImgAtt, buttonHighlightStateImgAtt] </code></pre> <p>I added a folder in my project that contains all the images we need for the notification so we can access them through the main bundle.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a0cdf5dd-3c0e-4ae1-a963-23d6da6ac464/files.png"><br /> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a0cdf5dd-3c0e-4ae1-a963-23d6da6ac464/files.png" alt="Project navigator shown in Xcode."></a><figcaption> Xcode project navigator. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a0cdf5dd-3c0e-4ae1-a963-23d6da6ac464/files.png">Large preview</a>)<br /> </figcaption></figure> <p>For each image, we get the file path and use that to create a <code>UNNotificationAttachment</code>. Added that to our notification content allows us to access the images in the Notification Content Extension in the <code>didReceive</code> method shown below.</p> <pre><code>func didReceive(_ notification: UNNotification) { self.newEpisodeLabel.text = notification.request.content.title self.episodeNameLabel.text = notification.request.content.body let imgAttachment = notification.request.content.attachments[0] let buttonNormalStateAtt = notification.request.content.attachments[1] let buttonHighlightStateAtt = notification.request.content.attachments[2] guard let imageData = NSData(contentsOf: imgAttachment.url), let buttonNormalStateImgData = NSData(contentsOf: buttonNormalStateAtt.url), let buttonHighlightStateImgData = NSData(contentsOf: buttonHighlightStateAtt.url) else { return } let image = UIImage(data: imageData as Data) let buttonNormalStateImg = UIImage(data: buttonNormalStateImgData as Data)?.withRenderingMode(.alwaysOriginal) let buttonHighlightStateImg = UIImage(data: buttonHighlightStateImgData as Data)?.withRenderingMode(.alwaysOriginal) imageView.image = image likeButton.setImage(buttonNormalStateImg, for: .normal) likeButton.setImage(buttonHighlightStateImg, for: .selected) } </code></pre> <p>Now we can use the file path URLs we set in the request to grab the data for the URL and turn them into images. Notice that I have two different images for the different button states which will allow us to update the UI for user interaction. When I run the app and send the request, here’s what the notification looks like:</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4bd578f0-2a67-4b47-96ce-d2091ce585dc/customizednotification.png"><br /> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/038aa952-9159-4d4f-af52-b007190a918f/app-ios-12-notifications-customizednotification.png" alt="iPhone 8 Plus shown with custom notification loaded after force touching the notification."></a><figcaption> Content extension loaded for NotificationTester app. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4bd578f0-2a67-4b47-96ce-d2091ce585dc/customizednotification.png">Large preview</a>)<br /> </figcaption></figure> <p>Everything I’ve mentioned so far in relation to the content extension isn’t new in iOS 12, so let’s dig into the two new features: <strong>User Interaction</strong> and <strong>Dynamic Actions</strong>. When the content extension was first added in iOS 10, there was no ability to capture user touch within a notification, but now we can register UIControl events and respond when the user interacts with a UI element.</p> <p>For this example, we want to show the user that the “Like” button has been selected or unselected. We already set the images for the <code>.normal</code> and <code>.selected</code> states, so now we just need to add a target for the UIButton so we can update the selected state.</p> <pre><code>override func viewDidLoad() { super.viewDidLoad() // Do any required interface initialization here. likeButton.addTarget(self, action: #selector(likeButtonTapped(sender:)), for: .touchUpInside) }</code></pre> <pre><code>@objc func likeButtonTapped(sender: UIButton) { likeButton.isSelected = !sender.isSelected }</code></pre> <p>Now with the above code we get the following behavior:</p> <figure><figcaption>Selecting like button within notification. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d0a37400-3087-4433-a835-f3fcc9457e15/userinteraction.gif">Large preview</a>)</figcaption></figure> <p>In the selector method <code>likeButtonTapped</code>, we could also add any logic for saving the liked state in User Defaults or the Keychain, so we have access to it in our main application.</p> <p>Notification actions have existed since iOS 10, but once you click on them, usually the user will be rerouted to the main application or the content extension is dismissed. Now in iOS 12, we can update the list of notification actions that are shown in response to which action the user selects.</p> <p>First, let’s go back to our app delegate where we create our notification categories so we can add some actions to our podcast category.</p> <pre><code>let playAction = UNNotificationAction(identifier: "play-action", title: "Play", options: []) let queueAction = UNNotificationAction(identifier: "queue-action", title: "Queue Next", options: []) let podcastCategory = UNNotificationCategory(identifier: "podcast", actions: [playAction, queueAction], intentIdentifiers: [], hiddenPreviewsBodyPlaceholder: hiddenPreviewsPlaceholder, categorySummaryFormat: summaryFormat, options: []) </code></pre> <p>Now when we run the app and send a notification, we see the following actions shown below:</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bf7a6884-20f0-4a22-b934-56bf2bb4d3cf/quickactions.png"><br /> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bf7a6884-20f0-4a22-b934-56bf2bb4d3cf/quickactions.png" alt="iPhone 8 Plus with custom notification loaded with an options to Play or Add to Queue."></a><figcaption> Notification quick actions. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bf7a6884-20f0-4a22-b934-56bf2bb4d3cf/quickactions.png">Large preview</a>)<br /> </figcaption></figure> <p>When the user selects “Play,” we want the action to be updated to “Pause.” If they select “Queue Next,” we want that action to be updated to “Remove from Queue.” We can do this in our <code>didReceive</code> method in the Notification Content Extension’s view controller.</p> <pre><code>func didReceive(_ response: UNNotificationResponse, completionHandler completion: (UNNotificationContentExtensionResponseOption) -> Void) { guard let currentActions = extensionContext?.notificationActions else { return } if response.actionIdentifier == "play-action" { let pauseAction = UNNotificationAction(identifier: "pause-action", title: "Pause", options: []) let otherAction = currentActions[1] let newActions = [pauseAction, otherAction] extensionContext?.notificationActions = newActions } else if response.actionIdentifier == "queue-action" { let removeAction = UNNotificationAction(identifier: "remove-action", title: "Remove from Queue", options: []) let otherAction = currentActions[0] let newActions = [otherAction, removeAction] extensionContext?.notificationActions = newActions } else if response.actionIdentifier == "pause-action" { let playAction = UNNotificationAction(identifier: "play-action", title: "Play", options: []) let otherAction = currentActions[1] let newActions = [playAction, otherAction] extensionContext?.notificationActions = newActions } else if response.actionIdentifier == "remove-action" { let queueAction = UNNotificationAction(identifier: "queue-action", title: "Queue Next", options: []) let otherAction = currentActions[0] let newActions = [otherAction, queueAction] extensionContext?.notificationActions = newActions } completion(.doNotDismiss) }</code></pre> <p>By resetting the <code>extensionContext?.notificationActions</code> list to contain the updated actions, it allows us to change the actions every time the user selects one. The behavior is shown in the gif below.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9e235af4-d403-4dbc-aefd-ad17da4558cc/dynamicactions.gif"><img decoding="async" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a84f5abd-1223-47fb-978e-80486331e21b/dynamicactions-800w.gif" width='“800"' height="800" alt="Gif of iPhone 8 Plus with custom notification loaded and the quick actions being changed from Play to Pause and Add to Queue to Remove from Queue."></a><figcaption>Dynamic notification quick actions. (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9e235af4-d403-4dbc-aefd-ad17da4558cc/dynamicactions.gif">Large preview</a>)</figcaption></figure> <h3>Summary</h3> <p>There’s a lot to do before iOS 12 launches to make sure your notifications are ready. The steps vary in complexity and you don’t have to implement them all. Make sure to first download XCode 10 beta so you can try out the features we’ve gone over. If you want to play around with the demo app I’ve referenced throughout the article, check it out on <a target="_blank" href="https://github.com/kmt901/Notifications-iOS12">Github</a>.</p> <h4>For Your Notification Permissions Request And Settings, You’ll Need To:</h4> <ul> <li>Determine whether or not you want to enable provisional authorization and add it to your authorization options.</li> <li>If you have already have a customized notification settings view in your app, add <code>providesAppNotificationSettings</code> to your authorization options as well as implement the call back in your app delegate or whichever class conforms to <code>UNUserNotificationCenterDelegate</code>.</li> </ul> <h4>For Notification Grouping:</h4> <ul> <li>Add a thread identifier to your remote and local notifications so your notifications are correctly grouped in the Notification Center.</li> <li>When registering your notification categories, add the category summary parameter if you want your grouped notification to be more descriptive than “more notifications.”</li> <li>If you want to customize the summary text even more, then add a summary identifier to match whichever formatting you added for the category summary.</li> </ul> <h4>For Customized Rich Notifications:</h4> <ul> <li>Add the Notification Content extension target to your app to create rich notifications.</li> <li>Design and implement the view controller to contain whichever elements you want in your notification.</li> <li>Consider which interactive elements would be useful to you, i.e. buttons, table view, switches, etc.</li> <li>Update the <code>didReceive</code> method in the view controller to respond to selected actions and update the list of actions if necessary.</li> </ul> <h3>Further Reading</h3> <ul> <li>“<a target="_blank" href="https://developer.apple.com/notifications/">Notifications</a>,” Apple’s list of various documentation regarding user notifications</li> <li>“<a target="_blank" href="https://developer.apple.com/videos/play/wwdc2018/710">What’s New in User Notifications</a>,” WWDC 2018 Apple</li> <li>“<a target="_blank" href="https://developer.apple.com/documentation/usernotificationsui/customizing_the_appearance_of_notifications">Customizing the Appearance of Notifications</a>,” Apple’s documentation on the Notification Content Extension</li> </ul> <div> <img decoding="async" src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial"><span>(ra, yk, il)</span> </div> </article> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div id="pagenavi"> <span class="newer"><a href="http://www.webmastersgallery.com/2018/09/page/10/" >Newer Entries</a></span> <span class="older"><a href="http://www.webmastersgallery.com/2018/09/page/12/" >Older Entries</a></span> <div class="fixed"></div> </div> </div> <!-- main END --> <!-- sidebar START --> <div id="sidebar"> <!-- sidebar north START --> <div id="northsidebar" class="sidebar"> <!-- feeds --> <div class="widget widget_feeds"> <div class="content"> <div id="subscribe"> <a rel="external nofollow" id="feedrss" title="Subscribe to this blog..." href="http://www.webmastersgallery.com/feed/"><abbr title="Really Simple Syndication">RSS</abbr></a> </div> <div class="fixed"></div> </div> </div> <!-- showcase --> <div id="text-389627311" class="widget widget_text"> <div class="textwidget"><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe for latest Updates</a></div> </div><div id="text-389629461" class="widget widget_text"> <div class="textwidget"><form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=webmastersgallery', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="webmastersgallery" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank" rel="noopener">FeedBurner</a></p></form></div> </div></div> <!-- sidebar north END --> <div id="centersidebar"> <!-- sidebar east START --> <div id="eastsidebar" class="sidebar"> <!-- categories --> <div class="widget widget_categories"> <h3>Categories</h3> <ul> <li class="cat-item cat-item-518"><a href="http://www.webmastersgallery.com/category/affiliate-programs/">Affiliate Programs</a> </li> <li class="cat-item cat-item-147"><a href="http://www.webmastersgallery.com/category/design/">Designing</a> </li> <li class="cat-item cat-item-519"><a href="http://www.webmastersgallery.com/category/domain-names/">Domain Names</a> </li> <li class="cat-item cat-item-37"><a href="http://www.webmastersgallery.com/category/e-commerce/">E-commerce</a> </li> <li class="cat-item cat-item-509"><a href="http://www.webmastersgallery.com/category/internet-directories/">Internet Directories</a> </li> <li class="cat-item cat-item-510"><a href="http://www.webmastersgallery.com/category/message-boards/">Message Boards</a> </li> <li class="cat-item cat-item-1"><a href="http://www.webmastersgallery.com/category/uncategorized/">Others</a> </li> <li class="cat-item cat-item-506"><a href="http://www.webmastersgallery.com/category/programming/">Programming</a> </li> <li class="cat-item cat-item-511"><a href="http://www.webmastersgallery.com/category/promotion-and-marketing/">Promotion and Marketing</a> </li> <li class="cat-item cat-item-534"><a href="http://www.webmastersgallery.com/category/scripts-and-programming/">Scripts and Programming</a> </li> <li class="cat-item cat-item-513"><a href="http://www.webmastersgallery.com/category/search-engines/">Search Engines</a> </li> <li class="cat-item cat-item-135"><a href="http://www.webmastersgallery.com/category/social-media/">Social Media</a> </li> <li class="cat-item cat-item-514"><a href="http://www.webmastersgallery.com/category/softwares/">Softwares</a> </li> <li class="cat-item cat-item-515"><a href="http://www.webmastersgallery.com/category/tips-and-tutorials/">Tips and Tutorials</a> </li> <li class="cat-item cat-item-338"><a href="http://www.webmastersgallery.com/category/web-hosting/">Web Hosting</a> </li> <li class="cat-item cat-item-516"><a href="http://www.webmastersgallery.com/category/webmaster-tools/">Webmaster Tools</a> </li> <li class="cat-item cat-item-501"><a href="http://www.webmastersgallery.com/category/webmaster-resources/">Webmasters Resources</a> </li> <li class="cat-item cat-item-3"><a href="http://www.webmastersgallery.com/category/web-design/">Website Design</a> </li> </ul> </div> </div> <!-- sidebar east END --> <!-- sidebar west START --> <div id="westsidebar" class="sidebar"> <!-- blogroll --> <div class="widget widget_links"> <h3>Blogroll</h3> <ul> <li><a href="http://wordpress.org/development/">Development Blog</a></li> <li><a href="http://codex.wordpress.org/">Documentation</a></li> <li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li> <li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li> <li><a href="http://wordpress.org/support/">Support Forum</a></li> <li><a href="http://wordpress.org/extend/themes/">Themes</a></li> <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li> </ul> </div> </div> <!-- sidebar west END --> <div class="fixed"></div> </div> <!-- sidebar south START --> <div id="southsidebar" class="sidebar"> <!-- archives --> <div class="widget"> <h3>Archives</h3> <ul> <li><a href='http://www.webmastersgallery.com/2024/11/'>November 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/10/'>October 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/09/'>September 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/08/'>August 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/07/'>July 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/06/'>June 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/05/'>May 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/04/'>April 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/03/'>March 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/02/'>February 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/01/'>January 2024</a></li> <li><a href='http://www.webmastersgallery.com/2023/12/'>December 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/11/'>November 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/10/'>October 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/09/'>September 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/08/'>August 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/07/'>July 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/06/'>June 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/05/'>May 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/04/'>April 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/03/'>March 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/02/'>February 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/01/'>January 2023</a></li> <li><a href='http://www.webmastersgallery.com/2022/12/'>December 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/11/'>November 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/10/'>October 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/09/'>September 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/08/'>August 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/07/'>July 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/06/'>June 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/05/'>May 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/04/'>April 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/03/'>March 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/02/'>February 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/01/'>January 2022</a></li> <li><a href='http://www.webmastersgallery.com/2021/12/'>December 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/11/'>November 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/10/'>October 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/09/'>September 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/08/'>August 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/07/'>July 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/06/'>June 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/05/'>May 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/04/'>April 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/03/'>March 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/02/'>February 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/01/'>January 2021</a></li> <li><a href='http://www.webmastersgallery.com/2020/12/'>December 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/11/'>November 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/10/'>October 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/09/'>September 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/08/'>August 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/07/'>July 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/06/'>June 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/05/'>May 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/04/'>April 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/03/'>March 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/02/'>February 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/01/'>January 2020</a></li> <li><a href='http://www.webmastersgallery.com/2019/12/'>December 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/11/'>November 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/10/'>October 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/09/'>September 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/08/'>August 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/07/'>July 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/06/'>June 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/05/'>May 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/04/'>April 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/03/'>March 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/02/'>February 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/01/'>January 2019</a></li> <li><a href='http://www.webmastersgallery.com/2018/12/'>December 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/11/'>November 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/10/'>October 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/09/' aria-current="page">September 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/08/'>August 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/07/'>July 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/04/'>April 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/01/'>January 2018</a></li> <li><a href='http://www.webmastersgallery.com/2017/12/'>December 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/11/'>November 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/09/'>September 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/08/'>August 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/07/'>July 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/06/'>June 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/05/'>May 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/04/'>April 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/03/'>March 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/02/'>February 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/01/'>January 2017</a></li> <li><a href='http://www.webmastersgallery.com/2016/12/'>December 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/11/'>November 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/10/'>October 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/09/'>September 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/08/'>August 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/07/'>July 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/06/'>June 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/05/'>May 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/04/'>April 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/03/'>March 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/02/'>February 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/01/'>January 2016</a></li> <li><a href='http://www.webmastersgallery.com/2015/12/'>December 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/11/'>November 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/10/'>October 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/09/'>September 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/08/'>August 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/07/'>July 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/06/'>June 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/05/'>May 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/04/'>April 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/03/'>March 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/02/'>February 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/01/'>January 2015</a></li> <li><a href='http://www.webmastersgallery.com/2014/12/'>December 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/11/'>November 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/10/'>October 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/09/'>September 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/08/'>August 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/07/'>July 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/06/'>June 2014</a></li> <li><a href='http://www.webmastersgallery.com/2013/07/'>July 2013</a></li> <li><a href='http://www.webmastersgallery.com/2013/01/'>January 2013</a></li> <li><a href='http://www.webmastersgallery.com/2012/12/'>December 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/08/'>August 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/07/'>July 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/06/'>June 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/05/'>May 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/04/'>April 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/01/'>January 2012</a></li> <li><a href='http://www.webmastersgallery.com/2011/11/'>November 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/06/'>June 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/03/'>March 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/02/'>February 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/01/'>January 2011</a></li> <li><a href='http://www.webmastersgallery.com/2010/12/'>December 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/11/'>November 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/09/'>September 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/07/'>July 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/06/'>June 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/05/'>May 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/02/'>February 2010</a></li> <li><a href='http://www.webmastersgallery.com/2009/12/'>December 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/08/'>August 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/07/'>July 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/06/'>June 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/05/'>May 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/04/'>April 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/03/'>March 2009</a></li> </ul> </div> <!-- meta --> <div class="widget"> <h3>Meta</h3> <ul> <li><a href="http://www.webmastersgallery.com/wp-login.php">Log in</a></li> </ul> </div> </div> <!-- sidebar south END --> </div> <!-- sidebar END --> <div class="fixed"></div> </div> <!-- content END --> <!-- footer START --> <div id="footer"> <a id="gotop" href="#" onclick="MGJS.goTop();return false;">Top</a> <a id="powered" href="http://wordpress.org/">WordPress</a> <div id="copyright"> Copyright © 2009-2024 Webmasters Gallery </div> <div id="themeinfo"> Theme by <a href="http://www.neoease.com/">NeoEase</a>. Valid <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS 3</a>. </div> </div> <!-- footer END --> </div> <!-- container END --> </div> <!-- wrap END --> </body> </html>