Forget the Apple iPhone 12, everyone's talking about the iPhone 13

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/08juDo1rnz4/iphone-13-rumours

While the iPhone 12 is still yet to be released, some seem to have forgotten about it already as new leaks today speculate what the iPhone 13 could look like. It might be over a year away from release, but the iPhone 13 is set to feature one camera to rule them all. By which, we mean four. 

According to a regular Apple-leaker by the name of, er, Fudge, the iPhone 13 could contain the first four-camera setup in an iPhone. It could also feature a LiDAR scanner (currently only found in the 2020 iPad Pro), making it a portable AR powerhouse – great for choosing your next sofa.

The iPhone has been a permanent fixture in our round up of the best camera phones, with the 12 looking likely to bump the 11 off the top spot any time now. But if these iPhone 13 camera leaks are anything to go by, its younger sibling won'tlast long in poll position. 

Browse iPhones at Apple.com

But, as we mentioned already, the iPhone 12 isn't even out yet, so let's step back for a second. The iPhone 12 rumours suggest significantly improved cameras over the current iPhone 11, including enhanced autofocus and zoom. It will, however, allegedly contain a mere three cameras. Not only could the iPhone 13 contain a feature a whole extra lens, but two of its cameras could rock massive 64MB sensors. Fudge also shared a rough layout for the device:

While it'll come as no surprise to anybody that the iPhone 13 will feature a better camera than the iPhone 12, it could open up huge possibilities for creatives and photographers on the move. With its countless photo editing apps, the iPhone is already a superb device for photographers, but could the iPhone 13 become the first to rival your DSLR? Time will tell, but our best camera guide is safe from smartphones for now.

Fudge reminds us that, as with all leaks, these should be taken with a huge pinch of salt. But with the rate that smartphone photography has advanced over the last few years, it's easy to get carried away by what the next few years could bring. 

While this is all very exciting, the iPhone 11 Pro's camera is still seriously impressive. If you want the best iPhone camera available right now, check out the best deals below.

Keep reading:

Your Fujifilm camera is now an ultra-HD webcam for video callsYou can now get retro iPhone app icons – and you'll want them all right nowYou won't believe what Apple's next MacBook might look like

How To Create Better Angular Templates With Pug

Original Source: https://www.smashingmagazine.com/2020/05/angular-templates-pug/

How To Create Better Angular Templates With Pug

How To Create Better Angular Templates With Pug

Zara Cooper

2020-05-28T11:00:00+00:00
2020-05-28T17:08:35+00:00

As a developer, I appreciate how Angular apps are structured and the many options the Angular CLI makes available to configure them. Components provide an amazing means to structure views, facilitate code reusability, interpolation, data binding, and other business logic for views.

Angular CLI supports multiple built-in CSS preprocessor options for component styling like Sass/SCSS, LESS, and Stylus. However, when it comes to templates, only two options are available: HTML and SVG. This is in spite of many more efficient options such as Pug, Slim, HAML among others being in existence.

In this article, I’ll cover how you — as an Angular developer — can use Pug to write better templates more efficiently. You’ll learn how to install Pug in your Angular apps and transition existing apps that use HTML to use Pug.

Managing Image Breakpoints

A built-in Angular feature called BreakPoint Observer gives us a powerful interface for dealing with responsive images. Read more about a service that allows us to serve, transform and manage images in the cloud. Learn more →

Pug (formerly known as Jade) is a template engine. This means it’s a tool that generates documents from templates that integrate some specified data. In this case, Pug is used to write templates that are compiled into functions that take in data and render HTML documents.

In addition to providing a more streamlined way to write templates, it offers a number of valuable features that go beyond just template writing like mixins that facilitate code reusability, enable embedding of JavaScript code, provide iterators, conditionals, and so on.

Although HTML is universally used by many and works adequately in templates, it is not DRY and can get pretty difficult to read, write, and maintain especially with larger component templates. That’s where Pug comes in. With Pug, your templates become simpler to write and read and you can extend the functionality of your template as an added bonus. In the rest of this article, I’ll walk you through how to use Pug in your Angular component templates.

Why You Should Use Pug

HTML is fundamentally repetitive. For most elements you have to have an opening and closing tag which is not DRY. Not only do you have to write more with HTML, but you also have to read more. With Pug, there are no opening and closing angle brackets and no closing tags. You are therefore writing and reading a lot less code.

For example, here’s an HTML table:

<table>
<thead>
<tr>
<th>Country</th>
<th>Capital</th>
<th>Population</th>
<th>Currency</th>
</tr>
</thead>
<tbody>
<tr>
<td>Canada</td>
<td>Ottawa</td>
<td>37.59 million</td>
<td>Canadian Dollar</td>
</tr>
<tr>
<td>South Africa</td>
<td>Cape Town, Pretoria, Bloemfontein</td>
<td>57.78 million</td>
<td>South African Rand</td>
</tr>
<tr>
<td>United Kingdom</td>
<td>London</td>
<td>66.65 million</td>
<td>Pound Sterling</td>
</tr>
</tbody>
</table>

This is how that same table looks like in Pug:

table
thead
tr
th Country
th Capital(s)
th Population
th Currency
tbody
tr
td Canada
td Ottawa
td 37.59 million
td Canadian Dollar
tr
td South Africa
td Cape Town, Pretoria, Bloemfontein
td 57.78 million
td South African Rand
tr
td United Kingdom
td London
td 66.65 million
td Pound Sterling

Comparing the two versions of the table, Pug looks a lot cleaner than HTML and has better code readability. Although negligible in this small example, you write seven fewer lines in the Pug table than in the HTML table. As you create more templates over time for a project, you end up cumulatively writing less code with Pug.

Beyond the functionality provided by the Angular template language, Pug extends what you can achieve in your templates. With features (such as mixins, text and attribute interpolation, conditionals, iterators, and so on), you can use Pug to solve problems more simply in contrast to writing whole separate components or import dependencies and set up directives to fulfill a requirement.

Some Features Of Pug

Pug offers a wide range of features but what features you can use depends on how you integrate Pug into your project. Here are a few features you might find useful.

Adding external Pug files to a template using include.

Let’s say, for example, that you’d like to have a more succinct template but do not feel the need to create additional components. You can take out sections from a template and put them in partial templates then include them back into the original template.

For example, in this home page component, the ‘About’ and ‘Services’ section are in external files and are included in the home page component.

//- home.component.pug
h1 Leone and Sons
h2 Photography Studio

include partials/about.partial.pug
include partials/services.partial.pug

//- about.partial.pug
h2 About our business
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

//- services.partial.pug
h2 Services we offer
P Our services include:
ul
li Headshots
li Corporate Event Photography

HTML render of included partial templates example

HTML render of included partial templates example (Large preview)

Reusing code blocks using mixins.

For example, let’s say you wanted to reuse a code block to create some buttons. You’d reuse that block of code using a mixin.

mixin menu-button(text, action)
button.btn.btn-sm.m-1(‘(click)’=action)&attributes(attributes)= text

+menu-button(‘Save’, ‘saveItem()’)(class=”btn-outline-success”)
+menu-button(‘Update’, ‘updateItem()’)(class=”btn-outline-primary”)
+menu-button(‘Delete’, ‘deleteItem()’)(class=”btn-outline-danger”)

HTML render of menu buttons mixin example

HTML render of menu buttons mixin example (Large preview)

Conditionals make it easy to display code blocks and comments based on whether a condition is met or not.

– var day = (new Date()).getDay()

if day == 0
p We’re closed on Sundays
else if day == 6
p We’re open from 9AM to 1PM
else
p We’re open from 9AM to 5PM

HTML render of conditionals example

HTML render of conditionals example (Large preview)

Iterators such as each and while provide iteration functionality.

ul
each item in [‘Eggs’, ‘Milk’, ‘Cheese’]
li= item

ul
while n < 5
li= n++ + ' bottles of milk on the wall'

HTML renders of iterators example

(Large preview)

HTML renders of iterators example

HTML renders of iterators example (Large preview)

Inline JavaScript can be written in Pug templates as demonstrated in the examples above.
Interpolation is possible and extends to tags and attributes.

– var name = ‘Charles’
p Hi! I’m #{name}.

p I’m a #[strong web developer].

a(href=’https://about.me/${name}’) Get to Know Me

HTML render of interpolation example

HTML render of interpolation example (Large preview)

Filters enable the use of other languages in Pug templates.

For example, you can use Markdown in your Pug templates after installing a JSTransformer Markdown module.

:markdown-it
# Charles the Web Developer
![Image of Charles](https://charles.com/profile.png)

## About
Charles has been a web developer for 20 years at **Charles and Co Consulting.**

HTML render of filter example

HTML render of filter example (Large preview)

These are just a few features offered by Pug. You can find a more expansive list of features in Pug’s documentation.

How To Use Pug In An Angular App

For both new and pre-existing apps using Angular CLI 6 and above, you will need to install ng-cli-pug-loader. It’s an Angular CLI loader for Pug templates.

For New Components And Projects

Install ng-cli-pug-loader.

ng add ng-cli-pug-loader

Generate your component according to your preferences.

For example, let’s say we’re generating a home page component:

ng g c home –style css -m app

Change the HTML file extension, .html to a Pug extension, .pug. Since the initial generated file contains HTML, you may choose to delete its contents and start anew with Pug instead. However, HTML can still function in Pug templates so you can leave it as is.
Change the extension of the template to .pug in the component decorator.

@Component({
selector: ‘app-component’,
templateUrl: ‘./home.component.pug’,
styles: [‘./home.component.css’]
})

For Existing Components And Projects

Install ng-cli-pug-loader.

ng add ng-cli-pug-loader

Install the html2pug CLI tool. This tool will help you convert your HTML templates to Pug.

npm install -g html2pug

To convert a HTML file to Pug, run:

html2pug -f -c [Pug file path]

Since we’re working with HTML templates and not complete HTML files, we need to pass the -f to indicate to html2pug that it should not wrap the templates it generates in html and body tags. The -c flag lets html2pug know that attributes of elements should be separated with commas during conversion. I will cover why this is important below.
Change the extension of the template to .pug in the component decorator as described in the For New Components and Projects section.
Run the server to check that there are no problems with how the Pug template is rendered.

If there are problems, use the HTML template as a reference to figure out what could have caused the problem. This could sometimes be an indenting issue or an unquoted attribute, although rare. Once you are satisfied with how the Pug template is rendered, delete the HTML file.

Things To Consider When Migrating From HTML To Pug Templates

You won’t be able to use inline Pug templates with ng-cli-pug-loader. This only renders Pug files and does not render inline templates defined in component decorators. So all existing templates need to be external files. If you have any inline HTML templates, create external HTML files for them and convert them to Pug using html2pug.

Once converted, you may need to fix templates that use binding and attribute directives. ng-cli-pug-loader requires that bound attribute names in Angular be enclosed in single or double quotes or separated by commas. The easiest way to go about this would be to use the -c flag with html2pug. However, this only fixes the issues with elements that have multiple attributes. For elements with single attributes just use quotes.

A lot of the setup described here can be automated using a task runner or a script or a custom Angular schematic for large scale conversions if you choose to create one. If you have a few templates and would like to do an incremental conversion, it would be better to just convert one file at a time.

Angular Template Language Syntax In Pug Templates

For the most part, Angular template language syntax remains unchanged in a Pug template, however, when it comes to binding and some directives (as described above), you need to use quotes and commas since (), [], and [()] interfere with the compilation of Pug templates. Here are a few examples:

//- [src], an attribute binding and [style.border], a style binding are separated using a comma. Use this approach when you have multiple attributes for the element, where one or more is using binding.
img([src]=’itemImageUrl’, [style.border]=’imageBorder’)

//- (click), an event binding needs to be enclosed in either single or double quotes. Use this approach for elements with just one attribute.
button(‘(click)’=’onSave($event)’) Save

Attribute directives like ngClass, ngStyle, and ngModel must be put in quotes. Structural directives like *ngIf, *ngFor, *ngSwitchCase, and *ngSwitchDefault also need to be put in quotes or used with commas. Template reference variables ( e.g. #var ) do not interfere with Pug template compilation and hence do not need quotes or commas. Template expressions surrounded in {{ }} remain unaffected.

Drawbacks And Trade-offs Of Using Pug In Angular Templates

Even though Pug is convenient and improves workflows, there are some drawbacks to using it and some trade-offs that need to be considered when using ng-cli-pug-loader.

Files cannot be included in templates using include unless they end in .partial.pug or .include.pug or are called mixins.pug. In addition to this, template inheritance does not work with ng-cli-pug-loader and as a result, using blocks, prepending, and appending Pug code is not possible despite this being a useful Pug feature.

Pug files have to be created manually as Angular CLI only generates components with HTML templates. You will need to delete the generated HTML file and create a Pug file or just change the HTML file extension, then change the templateUrl in the component decorator. Although this can be automated using a script, a schematic, or a Task Runner, you have to implement the solution.

In larger pre-existing Angular projects, switching from HTML templates to Pug ones involves a lot of work and complexity in some cases. Making the switch will lead to a lot of breaking code that needs to be fixed file by file or automatically using a custom tool. Bindings and some Angular directives in elements need to be quoted or separated with commas.

Developers unfamiliar with Pug have to learn the syntax first before incorporating it into a project. Pug is not just HTML without angle brackets and closing tags and involves a learning curve.

When writing Pug and using its features in Angular templates ng-cli-pug-loader does not give Pug templates access to the component’s properties. As a result, these properties cannot be used as variables, in conditionals, in iterators, and in inline code. Angular directives and template expressions also do not have access to Pug variables. For example, with Pug variables:

//- app.component.pug
– var shoppingList = [‘Eggs’, ‘Milk’, ‘Flour’]

//- will work
ul
each item in shoppingList
li= item

//- will not work because shoppingList is a Pug variable
ul
li(*ngFor=”let item of shoppingList”) {{item}}

Here’s an example with a property of a component:

//- src/app/app.component.ts
export class AppComponent{
shoppingList = [‘Eggs’, ‘Milk’, ‘Flour’];
}

//- app.component.pug

//- will not work because shoppingList is a component property and not a Pug variable
ul
each item in shoppingList
li= item

//- will work because shoppingList is a property of the component
ul
li(*ngFor=”let item of shoppingList”) {{item}}

Lastly, index.html cannot be a Pug template. ng-cli-pug-loader does not support this.

Conclusion

Pug can be an amazing resource to use in Angular apps but it does require some investment to learn and integrate into a new or pre-existing project. If you’re up for the challenge, you can take a look at Pug’s documentation to learn more about its syntax and add it to your projects. Although ng-cli-pug-loader is a great tool, it can be lacking in some areas. To tailor how Pug will work in your project consider creating an Angular schematic that will meet your project’s requirements.

Smashing Editorial
(ra, yk, il)

Overhang.js – A jQuery Plugin for Dropdown Notification Messages

Original Source: https://www.hongkiat.com/blog/overhang-js/

How annoying are the default JS alert boxes? They feel like a relic from a primitive bygone era of web development. Nowadays, we can make unobtrusive notification messages that share the same…

Visit hongkiat.com for full content.

An Infinitely Scrollable Vertical Menu

Original Source: http://feedproxy.google.com/~r/tympanus/~3/TwP5evi-5Ng/

Note: from now on I’m planning to release simple “components” and explain their basic working principle in tiny articles. In this first one I’m going to look at the infinite looping scroll illusion.

A while back a came across a really nice menu on Madeleine Dalla’s incredible website that was infinitely scrollable. I wondered how that was achieved and after searching for existing solutions, I found this great demo by Vincent Orback on Codepen. It shows how to pull off that effect with sections on a page. I wanted to use his script to make it work for a menu.

The principle of how this works is not too complicated: there’s a bunch of menu items that we need to clone in order to make sure that we have enough items to create a scroll illusion. The illusion works like this: once we scroll and reach the cloned items, we reset the scroll position to 0. So, as soon as the same (visual) point is reached, we jump back to the beginning.

How many clones do we need? We need as many clones as items fit into the visible area. As an example, if 8 items fit into the height of the viewport, than we need to create 8 clones.

The amount of menu items is important when considering how much space they’ll take up on the screen (or scroll area). If your items don’t fill the screen fully, the illusion will break. So you need to make sure to have enough and to set a reasonable font size for the items to occupy enough space.

We let the menu be scrollable but we hide the scrollbar. The menu is covering the whole viewport and this is the element we scroll.

Tip: if you want to visualize the illusion, just make sure that the scrollbar is not hidden. You’ll see it jumping back to the top, once the “cloned” zone is reached. Just delete:

::-webkit-scrollbar {
display: none;
}

… and the line scrollbar-width: none; for Firefox.

Note that I use a fallback for mobile where I simply want to show the complete menu.

Hope you find this little component useful!

An Infinitely Scrollable Vertical Menu was written by Mary Lou and published on Codrops.

7 Reasons to Use Illustrations on Your Website (And Examples of How to Do It)

Original Source: http://feedproxy.google.com/~r/tympanus/~3/sweN9hGioJw/

When building a new website, one of the very first decisions you’ll need to make is: 

What kind of visual style do you want to use? 

Does the practical and realistic nature of photographs fit well with your brand? Or does it make more sense to turn to a more abstract and creative approach and use illustrations instead? 

If you decide that you want to take the illustrative approach, keep in mind that it comes in many different forms. As a result, a very different style and story can be depicted from illustrated website to illustrated website. 

This is something we’ve accounted for when creating our pre-built sites for BeTheme. We wanted to reflect a wide array of illustration styles so our customers not only get to see how diverse this visual style is, but also have a robust source of inspiration for their own designs. 

We’re not alone. There are many great websites out there that creatively use illustrations. And, today, we’re going to take a look at a number of them as we explore the seven reasons why you may want to use illustrations to style a website:

1. When a photograph can’t fully capture a complicated subject

If you’ve ever tried to find a photo for a brand and struggled to pick out something that accurately reflected who they were or what they did, it’s probably because the subject was too difficult to capture. 

That can mean any number of things. 

It could mean that the subject itself is too difficult to photograph. Copywriters are a good example of this. While they could get someone to photograph them while typing away on their computer, there’s nothing very exciting about that. A photograph would simply capture the mundane task of writing, which is what the client would be trying to avoid. 

If you take a look at the BeCopywriter 2 pre-built site, you’ll see that an illustrative style is a much better way to approach this: 

The design is striking. The words are powerful. And the illustrative touches add a unique touch to the overall look. 

There are other kinds of websites that would be better off with illustrations if their subjects are too complicated to capture. Take, for instance, a recycling services company like WeRecycle: 

While it’s possible to pick out images or take real-life photos of recycling, that doesn’t fully capture what this company does. Rather than focus on individual scraps of trash, illustrations enable companies like these to give website visitors the full scope of what they do. 

It’s a much more powerful image, to say the least. 

2. When a brand has a unique look that requires a unique approach

Every brand has its own style and personality. Without a unique edge, it would be hard for consumers to differentiate between similar solutions. 

That said, some companies have styles that are way out there, which means that some of the traditional rules of web design can get thrown out the window. 

One way we see this happening is when photographs and illustrations blend. This allows a brand with a surreal, edgy, imaginative, or whimsical look to leverage the traditional elements of design while shaking things up. 

For example, this is how the BeFoodTruck pre-built site handles it: 

The illustrations are a unique choice for a business in the food industry, which would instantly make this site a standout. That said, without real photos of food, it would be difficult to convince customers to dine in or out. 

That’s why the balance between the two styles works so well. 

Handwrytten is a website that uses a similar balance between real photos and eye-catching illustrations:

In this case, the illustrations are animated, which gives the homepage yet another unique twist. This concept alone is already quite innovative and now they have a site to match it.

3. When a company wants to stand out from photo-strewn sites

When it comes to certain industries, the expectation is that their websites will have a similar look to them. 

Take the travel and hospitality industries, for instance. Because they’re in the business of selling in-person experiences — or telling stories about them — you’d figure that photos are the only option for those websites. 

But if your website is trying to compete amongst an endless supply of lookalike companies, using illustrations may be the thing that sets them apart. 

Case in point, BeJourney 2: 

Although the site isn’t complete devoid of photos, the majority of it is designed with illustrations or illustrative touches. 

Bateau Mon Paris is a boat rental company in France that takes a similar approach: 

You can see the peekaboo photo poking out there, but, for the most part, this website’s main visual style is illustration. 

4. When a new company wants to leverage the style of a brand that consumers already trust

You see this quite often when brand new companies enter high-risk spaces. They design their branding and website to be reminiscent of a well-established company that customers already trust. 

That way, there’s an unconscious association in prospects’ minds between the two companies and it eases the concerns and doubts that often arise when working with a new company.

One such company’s website that became the standard for other software companies entering the space is Stripe: 

Stripe’s illustrative style (as well as its choice to use gradients) has been copied for years. And it’s been a good look to emulate. 

Our BePay 2 site takes the trust-building elements that we see in Stripe and puts a unique spin on them:

The site is designed using illustrations, including the mobile application images. The color blue is also prevalent, which is a color that’s symbolic of stability and trust. 

5. When a creator has an interesting story and work to share

Although you’ll find some design agencies and web developers who use photos of themselves and their teams on their websites, many times creative types use illustrations instead. 

One reason why they go this route is because it’s another way to flex their creative muscles and to show prospective clients what they can do. 

Another reason takes us back to point #1 in this post. Unless they have a large team and an interesting-looking studio they work from, photos aren’t going to be the most exciting way to capture what it is they do.  

The BeBand 5 pre-built site, for example, uses illustrations and animations to give its site an 80s-style look. 

Unless band members are in the habit of dressing up like rockers from the 80s, photos wouldn’t accurately capture the style of music the band plays. But this unique illustrative style certainly does and also proves useful in drawing attention over to their music. 

 Artist Polly Kole has taken a unique approach to building an illustrative website:

In addition to the dramatic and intriguing look of the site, it’s interactive too. It’s almost as though the site emulates the experience of going to look at art (maybe not the interacting part, but being able to walk around it).

6. When a company is selling a smart app or resource

Companies that sell “smart” tools to users commonly design their websites with illustrations instead of photographs. And it makes a lot of sense. 

For one, these companies aren’t really selling the product itself. While the experience inside an app or using a device matters, what they’re selling on a website is a solution to the users’ problems which often involves managing a lot of data. That’s not an easy thing to depict with photos. 

Another reason they use illustrations — or, more specifically, vector graphics — is because geometric styling is a good way to give a website a stable and logical feel. 

BeApp 6 uses data visualizations to really hammer home the strengths of the app: 

While designers could use screenshots from within their apps to do something similar, this approach enables them to highlight important elements within the product in an attractive way.

Swiggy Labs builds products that solve big problems for consumers: 

While the designer of the site could’ve chosen to display the actual products they’ve built, this is a much more interesting approach. When you drag the “Swiggy It” toggle to the right, the hero image comes to life with animations and messages that allude to what the company does.

7. When a brand’s target audience is children (or their parents)

This is another no-brainer use case for illustrations on the web. Considering how comfortable children are with cartoons, games, and apps, an illustrative style is much more relatable when trying to reach this audience — or even their parents. 

You might also argue that illustrations are presented in a manner that’s easier for kids to understand because of how much better illustrations are able to simplify a complex subject.

BeLanguage 3 is an interesting case because it’s a language learning website:

You might argue that illustrations are a universal language. You don’t need to understand English or Japanese or Italian in order to understand what is going on with a website or the company it represents when illustrations tell the story. 

Other kinds of organizations that serve children or their families can use illustrations to simplify language and strengthen their sales pitch as See Make Play does: 

The illustrations on this site give it a fun and youthful quality. In this particular part of the homepage, the illustrations are static images. However, elsewhere on the page, parents and their kids will encounter animated graphics that bring a lighthearted touch to this site. 

Will you use illustrations to style your website?

If you’re finding it difficult to use photography to tell your brand’s visual story or are thinking about pursuing something a little less conventional, illustration might be the solution. 

As you can see in the websites from BeTheme and others around the web, illustrated websites are in no short supply. And, yet, whenever you encounter one, they tend to have a unique look you can’t help but look away from. 

If you want to make your website really stand out, an illustrated website would be a fantastic style to experiment with.

7 Reasons to Use Illustrations on Your Website (And Examples of How to Do It) was written by Bogdan Sandu and published on Codrops.

A Short Guide to Help You Conduct User Research

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/Pza2zUhoc8E/a-short-guide-to-help-you-conduct-user-research

User research has become a significant part of every designing process. It was long overlooked by many UX designers and their clients in the past, but many professionals have recently become aware of the benefits user research can give to their products. If you have just looked at why it is necessary, then it about […]

The post A Short Guide to Help You Conduct User Research appeared first on designrfix.com.

This Week In Web Design – May 22, 2020

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/AFPZq4Fpag4/

Another Friday, another edition of “This Week In Web Design”,  our weekly roundup of all of the web design news, blog posts, and tutorials published in the past seven days. This week’s list includes tools, WordPress tips and tricks, UX discussions, JavaScript, CSS, and much more. So pull up a chair and dive into this week’s web design news!

Your Web Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Starting at only $16.50/month!


DOWNLOAD NOW

 

Design Handoff Tools

A list of the best design handoff tools to aid in the design handoff process.

Responsive Design Checklist: Your 7-Item List for Responsive Design

Your extensive responsive design checklist to ensure that you provide the best possible website experience to all users — no matter what device they use.

5 UX Tips To Design an Excellent Mobile Checkout Process

The essential principles of a great mobile checkout process to help you multiply sales and reduce abandons.

How to Check if Post has Taxonomy Term In WordPress

To check if a Custom Post Type belongs to a specific term in a Custom Taxonomy, use has_term() instead.

5 Reasons to Avoid the Desktop Hamburger Menu Icon

Why would you do it? Other than to maintain or establish a certain aesthetic, it’s hard to find an answer that makes any sense.

A Website Proposal Template That Will Impress Your Clients

Everything you need to know about website proposal templates — what they are, why you should use them, and how to build one that will have people paying attention.

Tackling Authentication With Vue Using RESTful APIs

Vue can’t actually do authentication all by itself, so we’ll be using another service (Firebase) for that, but then integrating the whole experience in Vue.

Error Handling in JavaScript

An easy introduction to error handling in JavaScript.

Simple Strategies for Winning the Positions Other Developers Want

How do they do it?

12 Ways to Increase Your Website Conversions using Design Principles

12 tips that can help boost your site’s conversion without sacrificing good web design.

A “new direction” in the struggle against rightward scrolling

Some interesting thoughts on various solutions.

How to Build a Grayscale to Color Effect on Scroll (CSS & JavaScript)

Start with some grayscale images and learn how to smoothly reveal their colored variants on scroll.

Solving the “right” problem

There are a few simple specific tactics we can use to ensure that our products are designed for solving the right problem for its users.

WordPress Block Transforms

This has been the year of Gutenberg for the CSS-Tricks website.

How to Create a Custom Bootstrap Template from Scratch

How you can create a Bootstrap template from scratch in minutes.

Building Trust with Transparency

Web designers need to be ready to help clients communicate that transparency through their websites.

Radio Buttons Are Like Selects; Checkboxes Are Like Multiple Selects
Understanding Machines: An Open Standard For JavaScript Functions

Become familiar with what machines are and how to implement them.

Handy Tips on Productivity in Terms of Remote Work

A bunch of tips on how to increase productivity and stay focused on the conditions of remote work.

18+ Amazing Pure CSS Animated Buttons

Latest Collection of free Amazing Pure CSS Animated Buttons Code Examples.

16 Pitch Deck Templates You Need to See

We’ve done the hard part for you and sourced 16 pitch deck templates that offer real functionality and look great doing it.

10 Tips to Create the Best Website Style Guide

A website style guide is an important aspect when it comes to bringing coordination and collaboration amongst the team.

Beautiful Examples of Login Forms for Websites and Apps

The basics of login forms, consider good UX tips, get clues from beautiful login form examples to find out how to create a pleasurable experience, and eliminate user obstacles.

How Uber uses psychology to perfect their customer experience

Uber tackles their biggest pain points with science.

Figure It Out

Color is, without a doubt, the visual element most often misunderstood and misused.

How to Make Taxonomy Pages With Gatsby and Sanity.io

How to make taxonomy pages with Gatsby with structured content from Sanity.io.

How to Hack, Redesign, & Customize the Django Admin with Bootstrap

The Django administration site is great — fully-featured, easy to use, secure by design, rock solid … and somewhat ugly.

Flexbox-like “just put elements in a row” with CSS grid

It’s worth noting though that grid can do the same thing in its own special way.

How to Redirect With PHP

How to redirect to another page with PHP.

43 Habits of Successful Web Designers

If you not only want to create a business that you love but also be able to enjoy your life at the same time, start incorporating these strategies.

19 JS Libraries/Plugins for Typography

As with almost every part of web design, there are several tools available to help make you more effective. Typography is no different.


How to Use Envato Elements to Create Online

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/acHBHWd6l9Y/

When presented with the task of creating things for the Internet, knowing where to start can be half the battle. If you lack design skills or if you’re pressed for time, using some premade resources can be extremely helpful. The first order of business is locating a resource that has what you need. The second? Searching within this resource for templates, tools, and items that can aid you in making content.

Thankfully, we can handle the first part easily. Envato Elements is truly a one-stop resource for so many templates, themes, graphics, illustrations, photos, and more that you can use immediately in your work. Once you sign up, you gain access to thousands of items.

But if you’re not convinced, let’s talk about some of the ways you can use Envato Elements to make stellar online content starting immediately.

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets


DOWNLOAD NOW

Build a Website Using a Template

If you’re creating online, you need a website. And Envato Elements makes it super easy to do this. It features a wide array of templates that make it easy to build and launch a site quickly. There’s no shortage of options as well, so you can choose anything from an HTML template to a full CMS template. Here’s the full breakdown of the types of templates offered here:

HTML
WordPress
Drupal
Joomla
Magento
Muse
OpenCart
PrestaShop
Shopify
Unbounce
Ghost
Tumblr

And within these options you can narrow your search by features (responsiveness, eCommerce, PSD files included) by focus (admin, landing page, or site) and topic (beauty, corporate, fitness, etc).

WordPress Themes at Envato Elements.

Create Presentations to Accompany Online Courses

If you want to offer or sell online courses, you may wish to create and share this content via presentations. This means you’ll need some solid templates on hand if you want to make a real impact. Lucky for you, Envato Elements offers these as well. You can select from templates for Keynote, PowerPoint, and Google Slides, all of which are super professional-looking and easy to use. Just download the template, add your custom content, and export it. That’s all there is to it.

The crux of the situation here is that you shouldn’t have to labor over these elements of your work if you don’t have to.

Presentations at Envato Elements.

Create Graphics for Social Media

If you run a business online, you should have a social media presence. But yet again, that’s another thing you have to create consistent content for. If coming up with an endless supply of compelling graphics doesn’t sound fun to you, Envato Elements can help. Its graphic templates section is loaded with a wide variety of options including templates for infographics and logos.

They also have scene generators or mockups, which make it easy to display your product or app on a background that’s been carefully (and stylishly) presented.

You can pair these templates with some other resources as well like the selection of graphics available. You can select from graphics that encompass the following categories:

Backgrounds
Textures
Patterns
Icons
Objects
Illustrations

They also have a dedicated Social category that you can browse for social media platform specific templates.

As if all of that weren’t enough, there’s also a Photo category that includes thousands of photographs you can use for anything under the sun.

A Social Media Resource from Envato Elements.

Make Explainer and Promotional Videos

The last thing we’ll discuss here today is how you can make videos using resources on Envato Elements. If you haven’t already dipped your toes into the video-making market, now’s the time. Video is extremely popular and it’s been proven to increase visitor engagement. Because of this, many opted to create promotional videos or explainer videos that describe something practical. And while you may need to film some footage yourself, having stock footage on hand is beneficial. Wouldn’t you know it that Elements has this as well?

Hundreds of thousands of stock videos and motion graphics are available to choose from to add to your creations.

Or, if you need a templated solution, there are thousands of video templates to pick from as well. They cover categories like:

Logo stings
Openers
Product promos
Titles
Video Displays
And more

And you can find specific options for the likes of After Effects, Premiere Pro, Apple Motion, and Final Cut Pro.

When you’re in edit mode, you can add in sound effects or music as well. The sky’s the limit here.

Video Intro Template from Envato Elements

Don’t Wait to Start Creating

So you see, you really have no excuses not to start creating unique content for your online presence, whatever that may look like for you. From websites to videos, Envato Elements has you covered from top to bottom.

What will you create next?


5 Tips for Streamlining Your Freelance Workflow

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/vehtfIEDMxM/

When you work as a freelancer, it’s essential to save time in your workflow wherever you can. After all, it’s likely that you’re required to wear many hats every single day. From marketing to finances, freelancers are in charge of steering their own ships – and that means being well-rounded business managers. And that’s on top of the actual workload you have. You know, the tasks that actually earn you an income?

Again, that’s why streamlining operations as much as possible is so important. You should be spending most of your work time completing assignments that make money. So, the more you can limit the time you need to spend on day-to-day operations the better. What follows are five tips and suggestions for streamlining your freelance workflow starting immediately.

The Freelance Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
All starting at only $16.50 per month


DOWNLOAD NOW

1. Use a Project Management Tool

If you do nothing else on this list, setting up a project management tool alone will save you a ton of time. Why? Because these tools already eliminate the need for so many other apps and software.

For instance, some tools allow you to add projects, create milestones or tasks for each project, and assign tasks to other people. These tools are also helpful for organizing assignments, creating priorities, and tracking progress. The “at-a-glance” ability project management tools make it easy to see where you’re at on your projects, keep tabs on how projects are progressing, and manage all related files and communication.

The latter point is the most time-saving, in my opinion, because you’ll no longer have to hunt through emails to find that PDF a client sent over as a reference or the login information to someone’s WordPress site. It’ll all be stored safely in one spot for quick-access and reference at any time.

A few popular choices for project management tools include Trello, Asana, and Basecamp. Personally, I use Trello to keep track of my assignments, due dates, article specifications, and client information.

A sign that reads "PROJECTS".

2. Streamline Communication

This ties into number one on our list but it warrants its own section. One of the things that can take up most of your time as a freelancer is correspondence. Responding to messages is time-consuming enough, but add in the actual wrangling of messages and you’ve got a huge time suck on your hands.

Many project management tools include chat or commenting features. However, if you need a live chat option, Slack is always a good choice. This app allows you to create channels for talking with clients and colleagues. With paid plans, you should be able to create dedicated channels for each of your clients. This makes it super easy to stay in touch and to ask questions (or answer them) quickly. It has an accompanying desktop and mobile app as well, so communicating is easy and intuitive.

Basically, if you want to free up some time, ditch emails for good.

A chat application on a smartphone.

3. Create a Project Scope Document for Each Project

Scope creep is a real problem for freelancers. And it happens all too often. You start out on a project with an idea of what it will entail. Cut to a few weeks later and you’re five rounds of edits in with no end in sight. When the scope of a project continually expands, you lose time and money.

To prevent this issue, take the extra time at the beginning of your projects to write up a quick project scope document. After having initial talks with your client, write out what you both agreed the project would involve. Send it to the client for review. Detail the number of revisions you’ll cover before additional fees are required.  After you both agree upon the document’s contents, you can begin working in confidence.

People viewing documents.

4. Automate Invoicing and Finances

Dealing with the financial part of your freelance business can be super time-consuming. But it doesn’t have to be if you use the right tools. First of all, don’t spend hours manually creating invoices each month to send out to your clients. Use templates, for starters. Or better yet, use an invoicing service like FreshBooks, Harvest, or Invoicely to create, manage, and send invoices. In fact, you can configure these services to automatically send your invoices on a given date each month to save you even more time.

All of this financial info is compiled in a straightforward way as well, so it can be exported into your financial tracking software or linked directly to it so the data is updated in real-time without you having to lift a finger.

Dollar signs.

5. Eliminate Guesswork in Creating Media

A major part of doing work online is creating media. Now, certainly those in the graphic design field will need to create a lot more media and images than those who aren’t. But the need for media and graphics applies across the board. From writers to videographers, the need for stock images and graphical elements remain.

To save time, you can use a reliable source of images for everything. A one-stop shop, if you will. For that, I like to use Envato Elements, which streamlines how I find templates and graphics to accompany articles. With it, I source hundreds of photos, graphics, and media templates, which is a huge time saver for everything from marketing to actual client work.

Once you get your resource materials, you can customize as you see fit. Many use something like Photoshop for this work, but something simpler like Canva is highly effective, too.

A woman using a computer.

Make Your Freelance Workflow Easier

Hopefully you’ve found these five tips useful. With them, you can shave time off your freelance workflow and find ways to simplify how you do business. And at the very least, you’ll be more organized overall.

Best of luck to you!


How To Feel More Energized Even When You’re Stuck At A Desk All Day

Original Source: https://www.smashingmagazine.com/2020/05/more-energized-stuck-at-desk-all-day/

How To Feel More Energized Even When You’re Stuck At A Desk All Day

How To Feel More Energized Even When You’re Stuck At A Desk All Day

Suzanne Scacca

2020-05-26T12:00:00+00:00
2020-05-26T16:46:45+00:00

Let me tell you a little story.

I used to work for a translation agency. It was my job to copy-and-paste translations from one document into another and then to review the writing for errors. I worked between 10 and 12 hours every day, usually taking lunch at my desk (if I remembered to do so) and physically repeated the same thing over and over: mousing back and forth between my two giant computer screens and staring at too-small type.

Two years later, I found myself in physical therapy because I’d worn away the tissue beneath my right shoulder cap and had developed tennis elbow. Despite the months of therapy to repair my arm, I primarily use my left arm to work today. And although it feels a heck of a lot better than trying to power through the pain that happens when working with my right…

It makes me much slower than I used to be…

Which can lead to longer hours in front of the computer…

And I experience higher levels of stress, frustration and fatigue as a result.

I feel like if you’ve had a desk job for long enough, you have a similar story to tell. Maybe yours isn’t due to bad posture or technique. Maybe it has to do with the fact that you forget to eat lunch most days and don’t remember what it’s like to be outside when the sun is at its brightest. Or you move from your desk to the couch to the bed and back again, never giving your body or mind the physical activity it needs to stay energized.

Rather than let this be our collective fate because of the nature of our work, let’s try and change the narrative. Today, we’re going to look at some things you can do to feel more alert and energized even if you’re stuck at your desk for most of the day.

Fix Your Desk Setup and Alignment

Even if it feels more comfortable to work from your couch or bed or to slouch down in your work chair, the long-term benefits of not sitting properly will haunt you. Trust me.

I don’t know how old most of you are, but you may or may not have had to go through typing classes in school as I did. We didn’t just learn to type in them. We learned the right posture for sitting before a computer. This graphic from wikiHow sums it up:

wikiHow graphic - right and wrong postures working at desk

An illustration that depicts the right and wrong posture when sitting at a desk. (Image source: wikiHow) (Large preview)

Basically, you want to aim for the following:

Body folded at 90-degree angles,
Back straight against the chair,
Feet flat on the floor,
Arms bent at the elbows,
Fingers hover above the keyboard or mouse without bending or resting the wrists,
Eyes level with the computer screen.

This is a good place to start, regardless if you sit in a chair, on a stool or a stability ball. That said, it’s not the only thing you can do to fix your body at your workstation.

Another thing to think about is using a standing desk.

According to Dr. Edward R. Laskowski and the Mayo Clinic, sitting can be really bad for your health. People who sit for long periods of time are more prone to increased blood pressure, high cholesterol, diabetes, obesity, and cancer.

Even if you switch to a standing desk for just a few hours a day, you can increase the number of calories burned and stave off some of those health issues. In a study conducted back in 2011, researchers found additional health benefits when using a standing desk:

“The Take-a-Stand Project reduced time spent sitting by 224% (66 minutes per day), reduced upper back and neck pain by 54% and improved mood states.”

You don’t need to go investing in a standing desk to make this change. They can be expensive, especially when you already have a setup you’re comfortable with. However, what you can do is invest in a riser.

Desk modified to be standing

A modified desk turns into a standing desk with an adjustable riser. (Image source: Suzanne Scacca) (Large preview)

Not only can I adjust the height of the riser, but I can tilt it, too. This is useful not just for turning my desk into a standing desk setup, but I can take this with me when I work in hotels to make sure I’m always maintaining proper alignment.

Use Time-Blocking To Schedule Your Day

Usually when people recommend the Pomodoro Technique — developed by Francesco Cirillo — they’re going to tell you to break your day into 25-minute intervals. That’s not really what the goal of this time management method is though.

The reason you break your workday into blocks is because it’s easier to focus when you have a clear and reasonable end-time in sight. It’s also useful for structuring your day.

For someone like a salesperson who has to get on call after call with leads or to sit in an endless string of meetings, half-hour blocks make a whole lot of sense. That’s naturally how their day breaks apart. Web designers would benefit from much longer blocks. Here’s why:

A study from the University of California and Humboldt University looked at what happens after work is disrupted. These were their findings and interpretations:

“When people are constantly interrupted, they develop a model of working faster (and writing less) to compensate for the time they know they will lose by being interrupted. Yet working faster with interruptions has its cost: people in the interrupted conditions experienced a higher workload, more stress, higher frustration, more time pressure and effort. So interrupted work may be done faster, but at a price.”

You have to be careful about managing the “cost” of taking a break. 25-minute blocks are just too costly for a web designer. I’d recommend looking at how your tasks naturally break apart.

Would prototyping a landing page take an hour or two? How about research and planning? Take a close look at the tasks you commonly perform and how long they take, on average, to complete.

I’d also look at where you naturally start to “fail” and lose focus. It’s the same thing that happens in workouts — when you reach your breaking point, your body just gives up. Unfortunately, some people try to push through it when it’s the brain screaming, “Stop!”

Another thing to look at is where your peak energy hours are. We all have them. For me, it’s between 2 PM and 5 PM every day. I always schedule my hardest projects then.

Use those as benchmarks for your blocks. On top of creating blocks and breaks throughout the workday, also be sure to set dedicated hours and limits for yourself. It’s a lot harder to get fatigued if you know you only have to put in a specific number of hours of work that day.

As for building this out, use a tool that makes it easy to set recurring breaks and stick to the same schedule every day. It could be as simple as using your Google Calendar:

Google Calendar time-blocking example

An example of how a web designer might schedule their work and breaks in blocks. (Image source: Google Calendar) (Large preview)

Whatever you choose, make sure you can slot in each task by time and color-code tasks based on things like client, priority, type, design stage, etc.

Get Outside During The Workday

Okay, so let’s talk about what you should be doing with your scheduled breaks.

Unless there’s a dangerous storm outside, you should make an effort to get outside at least once a day. There are a ton of health benefits associated with sunlight, including an increase in vitamin D and serotonin.

Vitamin D is useful as it helps increase our immune systems and fight off disease. If you’ve ever tried to work while battling a cold or the flu, you know how difficult that can be — especially when your bed is just a matter of steps away.

Serotonin is also useful for work. Serotonin is what gives us the energy and good mood to power through longer days. Melatonin, on the other hand, is what puts us soundly to sleep at night. If we don’t get the right balance of it — which can happen if you’re stuck inside with artificial lighting all day — you could end up with sleepless nights and exhausting days.

Walking around India Point Park in Providence, Rhode Island

Despite the extra coverings, I was enjoying the boost of sunshine on my lunch break as I walked around the Providence waterfront. (Image source: Suzanne Scacca) (Large preview)

According to Russel J. Reiter, a melatonin researcher:

“The light we get from being outside on a summer day can be a thousand times brighter than we’re ever likely to experience indoors. For this reason, it’s important that people who work indoors get outside periodically and moreover that we all try to sleep in total darkness. This can have a major impact on melatonin rhythms and can result in improvements in mood, energy and sleep quality.”

But it’s not just sunlight and fresh air that help with energy and productivity. Exercise is important, too. And what better way to fit in fitness than when you’re already outside and on a break from work?

For some people, taking a long walk is their preferred mode of outdoor exercise. It’s also a great option if you’re a dog owner and want to give them a big dose of exercise at the same time.

Ann Green, a fitness studio owner, yoga teacher and heptathlon world athlete, explains the benefits of walking:

“There are many reasons to walk for exercise. Walking improves fitness, cardiac health, alleviates depression and fatigue, improves mood, creates less stress on joints and reduces pain, can prevent weight gain, reduce the risk for cancer and chronic disease, improve endurance, circulation and posture and the list goes on.”

If you want something a little more exhilarating without breaking a major sweat in the middle of the workday, why not take an electric bike out?

There are many great things about this option. For starters, because e-bikes (like the ones you get from Rad Power Bikes) take some of the work out of pedaling for you, you can ride for a lot longer and go further.

Researchers at the University of Colorado conducted a study with 20 volunteers to see what would happen when they traded their car for an e-bike when commuting to work. Their objective was to ride for at least 40 minutes, three times a week, for a full month.

They found that electric bikes had improved their:

Cardiovascular health,
Aerobic capacity,
Blood sugar control.

Rad Power Bikes - grocery run GIFRad Power Bikes e-bikes aren’t just healthier for you, they’re healthier for the environment. (Image source: Rad Power Bikes)

Another reason an e-bike is an attractive option is because you can use it for a variety of purposes.

You can use it for commuting, if you have an office you work out of. You can use it for general exercise whenever you feel like it. You can also use it to get more done during your breaks. If you ever feel stressed out about when you’re going to have time to pick up groceries, for instance, an e-bike would be a great way to knock out your exercise and chores all at once.

Bottom line:

You’re carving time out of your workday to get away from your computer and give your brain and body a rest so it can recharge. Don’t waste it by putting yourself in front of another screen. If you can get outside, not only will you improve your overall health, but you’ll give yourself an instant boost of energy and mood, too.

Wrapping Up

Just because working indoors, at a desk, in front of a computer screen has been known to cause issues, that doesn’t mean you can’t take steps to lessen or remove those negative side effects from your workday.

Focus and energy are both very important in your line of work. By making just a few small adjustments, you can ensure that both remain high while you’re desk-side.

Smashing Editorial
(ra, il)