Articles

Popular Design News of the Week: August 24, 2020 – August 30, 2020

, ,

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

How to Make Halftone Gradient in Photoshop

 

Drawing Simple Line Patterns Using HTML5 Canvas

 

10 Online Design Tools You Never Knew You Needed

 

4 Best Content Management Systems (CMS) for Marketing

 

9 Mistakes Designers Still Make

 

6 Visual Design Principles that UX Designers Should Be Aware of

 

Best Way to Lazy Load Images for Maximum Performance

 

17 Stunning Examples of Sites with Horizontal Scrolling

 

Less is a Bore. Why Tech is Finally Embracing Maximalism

 

What Does it Mean to Have a High-Quality Website in 2020?

 

8 Project Management Tips for your Next Web Development Project

 

MergeURL – Shorten Urls for Free Without User Registration

 

13 Design Challenges to Improve and Showcase your Skills

 

How to Find Web Design Clients

 

Waitlist API – Quick and Easy Waitlist with Built in Referral

 

What is the Small Web?

 

24 Beautifully Designed Pricing Page Examples

 

7 Practical Tips for Better Microcopy

 

15 Awesome Developer Home Workstations

 

Pentagram Designs “edgier” Visual Identity for Rolls-Royce

 

Gorgeous Gradients: A Curated Collection of Dreamy Color Transitions

 

Experts Weigh in on the Biden-Harris Logo

 

50+ Modern Fonts to Use on your WordPress Website in 2020

 

15 Florist Websites that will Inspire Every Flower Lover

 

Create your First React Native Android App

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source


Source de l’article sur Webdesignerdepot

/par

12 Best Google Design & Development Tools

,

Google resembles an iceberg: there’s the part above the water we can see and use everyday; there’s also the part beneath the water, that we don’t see and know little about.

While many of us are concerned about the aspects of Google we don’t see — the parts that threaten our privacy, or monopolize the web — there’s no denying that Google offers some amazing products and tools, many of them free, all from the convenience of a single login.

Today we’re going to take a look at 12 tools from Google that really do bring something positive to the table.

1. Polymer

Polymer is an open-source JavaScript library from Google for building web applications using Web Components. The platform comes with a ton of libraries and tools to help designers and developers unlock the web’s potential by taking advantage of features like HTTP/2, Web Components, and Service Workers. 

The main feature of Polymer is Web Components. With Web Components, you can share custom elements to any site, work seamlessly with any browser’s built-in elements, and effectively use frameworks of all kinds. Products like LitElement (a simple base class for creating fast, lightweight web components) and PWA Starter Kit make Polymer easy to use. If you like, you can build your app entirely out of Web Components.

2. Lighthouse

Google Lighthouse is an open-source, automated tool for improving the quality of web pages. The software allows you to audit web pages for performance, SEO, accessibility, and more. You can run Lighthouse using ChromeDevTools, directly from the command line, or as a Node module. 

To use Lighthouse in Google Chrome, just go to the URL you want to audit (you can audit any URL on the web), open ChromeDevTools, and click the Audits tab. After you have run the audit, Lighthouse will give you an in-depth report on the web page. 

With these reports, you will see which parts of your web page you need to optimize. Each report has a reference doc that explains why that audit is important and also shows you the steps you can take to fix it. 

You can also use Lighthouse CL to prevent regression on your sites. Using Lighthouse Viewer, you can view and share reports online. You can also share reports as JSON or GitHub Gists. 

Lighthouse also comes with a feature called Stack Packs that allows Lighthouse to detect what platform a site is built on. It also displays specific stack-based recommendations.

3. Google Analytics

Google Analytics is the gold standard of analytics services. Google analytics can be installed on your site for free with a small amount of JavaScript and allows you to see all kinds of details about your site visitors, like what browser they’re using, and where they’re from.

By using Google Analytics you can make decisions about your site based on science, and therefore be somewhat confident that the decisions you make will result in the outcome you are expecting.

4. Flutter

Flutter is Google’s UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase. The toolkit is open source and free to use. The best part of Flutter is that it works with existing code. 

The toolkit has a layered architecture that allows for full customization, which results in fast rendering and flexible designs. It also comes with fully-customizable widgets that allow you to build native interfaces in minutes. With these widgets, you will be able to add platform features such as scrolling, navigation, icons, and fonts to provide a full native performance on both iOS and Android.

Flutter also has a feature called hot reload that allows you to easily build UIs, add new features, and fix bugs faster. You can also compile Flutter code to native ARM machine code using Dart native compilers. 

5. Google API Explorer

Google has a huge library of APIs that are available to developers but finding these APIs can be difficult. Google API Explorer makes it easy for developers to locate any API. On the Google API Explorer web page, you will see a complete list of the entire API library. You can easily scroll through the list or use the search box to filter through the API list. 

The best part of Google API Explorer is that each link to a reference page comes with more details on how to use the API. API Explorer is an excellent way to try out methods in the Monitoring API without having to write any code.

6. Puppeteer

Puppeteer is a project from the Google Chrome team. The platform enables web developers to control a Chrome (or any other Chrome DevTools Protocol based browser) and execute common actions, much like in a real browser. Puppeteer is also a Node library and it provides a high-level API for working with headless Chrome. It is also a useful tool for scraping, testing, and automating web pages. 

Here are some things you can do with Puppeteer: generate screenshots and PDFs of pages, UI testing, test Chrome Extensions, automate form submission, generate pre-rendered content, and crawl Single-Page Applications. 

7. Codelabs

Google Developer Codelabs is a handy tool for beginner developers and even advanced developers who want to improve their knowledge. Codelabs provide a guided, tutorial, hands-on coding experience. Codelabs’ site is broken down into several tutorial sessions on different topics. 

With the tutorials on Codelabs, you can learn how to build applications from scratch. Some of the tutorial categories include Augmented reality, TensorFlow, Analytics, Virtual Analytics, G Suite, Search, Google Compute Engine, and Google APIs on iOS. 

8. Color Tool

Color Tool makes it easy for web designers to create, share, and apply colors to their UI. It also measures the accessibility level for any color combination before exporting to the palette. The tool comes with 6 user interfaces and offers over 250 colors to choose from. 

The tool is also very easy to use. All you need to do is pick a color and apply it to the primary color scheme; switch to the secondary color scheme, and pick another color. You can also switch to Custom to pick your own colors. After you have selected all your colors, use the Accessibility feature to check if all is good before exporting it to your palette. 

9. Workbox

Workbox is a set of JavaScript libraries and Node modules. The JavaScript libraries make it easy to add offline support to web apps. The Node modules make it easy to cache assets and offer other features to help users build Progressive Web Apps. Some of these features include pre-caching, runtime caching, request routing, background sync, debugging, and greater flexibility than sw-precache and sw-toolbox. 

With Workbox, you can add a quick rule that enables you to cache Google fonts, images, JavaScript, and CSS files. Caching these files will make your web page to run faster and also consume less storage. You can also pre-cache your files in your web app using their CLI, Node module, or webpack plugin. 

10. PageSpeed Insights

PageSpeed Insights is a handy tool from Google Developers that analyzes the content of a web page, then generates suggestions on how to make the page faster. It gives reports on the performance of a web page on both desktop and mobile devices. At the top of the report, PageSpeed Insights provides a score that summarizes the page’s performance. 

11. AMP on Google

AMP pages load faster and also look better than standard HTML pages on mobile devices. AMP on Google allows you to enhance your AMP pages across Google. It is a web component framework that allows you to create user-first websites, ads, emails, and stories. One benefit of AMP is that it allows your web pages to load almost instantly across all devices and platforms hence improving the user’s experience. 

12. Window Resizer

When creating websites, it is important that developers test them for responsive design – this is where Window Resizer comes in. Window Resizer is a Chrome extension that resizes the browser window so that you can test your responsive design on different screen resolutions. The common screen sizes offered are desktop, laptop, and mobile, but you can also add custom screen sizes. 

 

Featured image via Unsplash.

Source


Source de l’article sur Webdesignerdepot

/par

Exciting New Tools for Designers, August 2020

,

The common theme in this month’s collection of new tools and resources is “things that help you show off your work.” Many of these tools are made to help you better web products or apps or showcase designs with others.

Here’s what new for designers this month.

Naturaltts

Naturaltts is an online text to speech converter, that allows you to download an mp3 recording. The tool has more than 60 voices to choose from in six languages. There’s a free plan for personal use (based on characters converted) and affordable paid plans for higher volumes and commercial users. One application of this tool is voiceover for videos or tutorials.

Handz

Handz is a library of hands with different gestures in three-dimensional shapes. The collection includes 12 gestures with nine skin colors, and three different sleeve types. Put all that together and you have 320 potential combinations that you can use for projects. The library is completely free and works in a variety of formats with different tools.

Isoflow

Isoflow allows you to create isometric diagrams for presentations and illustrations with ease. You can edit and then export diagrams for print or website use, thanks to vector rendering.

Device Shots

Device Shots is a small web app that helps you generate a high-resolution device mockup using a screenshot of your website or mobile application. It supports almost every device type you can think of and resizes for social media platforms.

Barchartrace

Barchartrace is a simple MIT open source bar chart generator. Use it to create some of the animated charts you see on social media. Just insert your information (upload via CSV file), choose animation settings, and go.

Zettlr Markdown Editor

Zettlr is a free and open source markdown editor for Mac OS. Zettlr supports simple notations, references, includes a dark mode, and tagging. It’s made for note takers who need a tool to amp up their projects, and is used primarily in higher education.

CSS Leaning Card Effect

The CSS Leaning Card Effect replicates the bookshelf feel you get when rectangles lean with a shadow against planes. Lynn Fisher does it in the pen with code that you can see and work on with your own images.

Lemon.io

Lemon.io is a tool that matches you with freelance developers to get projects moving more quickly. You are guaranteed a match in 24 hours and there is no risk if the match doesn’t work out. Just tell Lemon.io what you need and the algorithm will match you with a dev from the database. Prices for development through the platform start at $35 per hour.

Papercups

Papercups is a customer messaging tool that lets you chat in real-time. The customizable widget works with your favorite tools, such as Slack and Gmail, and is free to use. Chat apps are one of the most in-demand website features right now.

CSS Click to Animate Gif

Christian Heilmann has created a great guide/experiment in pure CSS that adds a play button on top of animated GIFs so that users can control the motion. He developed the concept because GIFs can get overwhelming and annoying. Learn how he did it and see it in action.

3D Book Image Generator

Here’s another little bit of CSS magic with a 3D Book Image Generator. Just input your image and set some specifications and get a 3D book cover image that you can use in projects. (There’s also an accompanying tutorial if you want to learn how to generate the CSS on your own.)

Luckysheet

Luckysheet is an online spreadsheet – it’s a lot like Microsoft Excel – with powerful data functions and tools. It’s user-friendly and open source. It even has quite a few built-in mathematical formulas and supports various table types.

RevKit

RevKit is a design system UI kit that works with Sketch, Figma, and Adobe XD. It includes plenty of organized components that you can pop right into designs to help get them started faster. It also includes a style guide, elements, and form controls. The download is free.

Card

Card allows you to store social media profiles, websites, and files in a customized profile. Share it in one click. Replace awkward contact exchange and multiple usernames with a simple QR code or link.

Scale Nucleus

Scale Nucleus helps visualize data, curate interesting slices within your dataset, review and manage annotations, and measure and debug model performance. This tool claims to be “the right way” to develop ML models.

Previewed

Previewed is a mockup generator to create beautiful promotional graphics for your app. Browse a variety of templates, pick one, customize, and download your design to show off.

NSFW Filter

NSFW Filter is a browser extension that blocks images that aren’t safe for work. The best part is that it runs locally in-browser and doesn’t access any of your data. Plus, it saves you from on-the-job embarrassment.

ColorFlick for Dribbble

ColorFlick for Dribbble is another browser extension that makes it easy to copy hex codes from the tool to your clipboard with ease. You can also create palettes you can share from your favorite shots using Coolors.

Tabler Icons

Tabler Icons is a collection of more than 550 SVG icons that you can customize. Change the color, size, or stroke width with on-screen controls and then click to copy the icons you want to use. It’s that simple!

Teenyicons

Teenyicons might be some of the cutest icons out there. This collection includes minimal 1px icons in outline or solid fills. And there are plenty of icons to choose from. Adjust the size and grab the ones that you need for projects.

Basicons

Basicons is a set of simple icons for product design and development. Plus, they are updated weekly.

Chozy Mermaid

Chozy Mermaid is a super funky novelty typeface to close out summer. The characters feature beach themes within slab characters. It might be hard to find an application for this one, but it is too fun not to share.

Dotuku

Dotuku is a dingbats font with a back to school theme. The limited character set features filled and outline styles that are perfect for classrooms.

Margin

Margin is a fun retro style typeface with a 1970s vibe. It’s a “chubby serif” with 60 characters and 58 glyphs.

Rollanda

Rollanda is a signature-style script with a thicker weight and rough stroke. The character set is pretty robust.

Source


Source de l’article sur Webdesignerdepot

/par

Web Design for Seniors: UX From a Mature Perspective

,

It’s no secret that the senior population is growing. By 2030, people over the age of 65 are predicted to make up 20.6% of the population of the US. 

Around the world, people are living longer and remaining more active in the later years of their lives. What’s more, despite what you might have heard in the past, seniors aren’t as wary of the internet as they used to be. In 2019, the Pew Research institute revealed that 73% of people over the age of 65 were connected to the web. 

So, what does that mean for web designers?

your main focus needs to be on ability…people age differently

Well, first of all, it’s time for all of us to start thinking about user experience from different perspectives. We need to stop expecting our audiences to be made up entirely of iPhone-using millennials and start thinking about the needs of seniors too. After all, designing websites for seniors opens you up to a wide selection of potential visitors in the future.

What’s more, according to the US Census Bureau, people over the age of 65 generally have the highest household wealth figures of any age group. That’s a big deal. 

So, how do you adapt UX for seniors?

Creating Senior-Friendly Web Designs

When it comes to designing websites and applications for seniors, your main focus needs to be on ability. Age is just a number, and people age differently. 

That means that one person in their 70s might have no problem browsing through Netflix to watch the latest shows, while someone else wouldn’t be able to tell you what ‘streaming’ means. 

Rather than worrying specifically about age, think about how different people in older age groups might have different requirements when it comes to things like movement control, hearing, vision, and even device bias. 

Get the Visual Elements Right

Vision loss is by far the most common disability reported by elderly individuals in the US. Around one in six people over the age of 70 have some manner of visual impairment. That’s why UI designers need to think carefully about visual accessibility when creating the right websites. 

For instance, text and button sizes should always be kept large. Anything that needs to be read or clicked needs to be scaled up, to ensure that everyone can see the information clearly. For instance, on the Sandinmysuitcase.com website, you’ll find clear typography, combined with big buttons that tell you to “Start Here” so you know exactly what to do next.

Remember to stick to icons that are clearly labelled wherever possible. Stay away from anything that your customers might not understand. “Start Here” is easier to read and understand than “Submit”. 

It’s also worth sticking to the color and contrast guidelines laid out by basic UX design when you’re creating something for optimal visibility.  Colors that are too close together might create a nice pastel or gradient effect on a website – but they’ll also make things difficult to read. 

Concentrate on Usability

Over the age of 55, motor skills and coordination can begin to decline for some people. These changes make it harder for people to interact with complex UIs. The mouse on a computer can be a particular problem for people with diminishing motor skills – as can the touchscreen of a tablet or smartphone. 

When you’re working on the perfect UX, think about how you can make things as easy to click as possible for people who have a hard time hitting their targets. For instance, in this website for people traveling over the age of 50, you’ll see not only fantastic large font choices but big buttons that are descriptive and easy to understand too: “Click here to start planning your trip”:

The scrollbar can also be a bit of a problem for people with impaired motor skills. Because of this, it’s best to keep your focus on designing above the fold. Make sure that users don’t need to scroll far to find the information that they need and keep scrollbars simple in terms of their look and feel.

While you’re working on usability, remember that it will be important to keep interactions to a minimum wherever possible. Where you can engage younger audiences with double-taps, swiping and scrolling, it’s much easier to connect with seniors through simple one-tap interactions. The less actions your user needs to take to reach their goals, the better. 

Deliver Smooth Navigation 

Navigating from point A to B on your website needs to be as simple as seamless as possible. Remember, crowded pages on your websites and apps are often overwhelming – even for younger browsers. Seniors are generally just searching for “must know” information, so they don’t want anything to get in their way as they navigate through their website. 

As you work on your site or app design, ask yourself if every element on the page absolutely has to be there. If it doesn’t deliver value, then get rid of it. 

Additionally, remember that seniors don’t always have the best memories and concentration levels. That means that they need your navigation experience to be as simple as possible. Basic horizontal menu bars that show everything at once are often a good idea – even if they’re not very exciting.

Look at this helpful navigation experience from RetireMove.com, for instance. Everything you need is located at the top of the page, and you can even just enter your postcode to get started:

Cognitive decline happens regularly with age. Although not all older adults will have issues with their memory and concentration, it’s important to be prepared for an audience that might process information a little more slowly. It’s worth double-checking that your viewer’s attention isn’t being diverted to multiple parts of the page at once.

Get to the Point Quickly

While younger generations have quickly implemented technology into every aspect of their lives, older consumers use tech a little differently. These people don’t want to spend forever fiddling around with different parts of your website. They want to get the answers to their questions as quickly and easily as possible. 

Applications that are complicated or difficult to access are usually instantly rejected by seniors. Even if you’ve offered everything that we’ve covered above, from seamless navigation to minimalist design, you still won’t get the interactions you’re looking for if older adults don’t consider your design to be useful. 

Because of this, you need to highlight the point of a website or application to your seniors as quickly as possible. Avoid worrying about things like gifs, animations and gamification. Instead, focus on making sure that your designs are useful and simple. 

For instance, from the moment your senior user arrives on a web page, they should have instant access to clear instructions on how to use the application or service, and what they need to do next. Keep in mind that this is particularly important when you’re creating mobile apps, as apps are still a relatively new concept to older generations. 

On the “When They Get Older” website, you can instantly find the information you need in a well-organized navigation bar that’s labelled clearly:

A clear interface like this, combined with simple, step-by-step guidance that shows elderly individuals how to get the information that they want is the key to keeping these users coming back for more. 

Bringing a Mature Perspective to Web Design

These days, most designers focus heavily on younger audiences when creating websites and apps. After all, it’s these users that allow us to experiment more with the latest tools and concepts, like augmented reality, artificial intelligence, and robust animations. 

However, there’s still a market out there for the seniors of the world that want more opportunities to get online. This audience often goes ignored and under-served. However, as the value of older consumers grows, and their ability to interact online increases, you’ll find that more businesses begin to search for web designers who can provide immersive experiences for a more mature audience. 

The steps above will give you an excellent insight into how you can start designing for a different kind of customer base. However, remember that the best way to make sure that you’re delivering the right solution for any customer, is to test. User testing will provide you with the exclusive insights that you need to determine whether your senior UX is really working, or whether you’re still struggling to get into the shoes of an older user. 

 

Featured image via Unsplash.

Source


Source de l’article sur Webdesignerdepot

/par

17 Tools I Can’t Design Without

,

I think of a creative practice as a combination of an approach (a design philosophy) and a series of techniques (craft skills); a good tool facilitates a technique, which in turn supports an approach.

It wasn’t until I sat down to write a list of tools I can’t design without, that I realized just how many tools I rely on as an integral part of my creative process. The danger of tools is that they promote certain techniques, and that bias can alter your approach.

First and foremost a good tool does no harm, it does not dictate, or obstruct your approach. Secondly, a good tool offers flexibility in the techniques you choose. Thirdly a good tool is invisible, it leaves no marks on the end product.

If I’d written this post a year ago the list would have been different, and I hope that in a year it will be different again. These are the tools that I currently find enabling, that have contributed to my craft, and supported my approach.

Affinity Designer

I’ve always used Adobe products. Photoshop and Illustrator were the de facto graphic tools for half my life. I’ve never had an issue with the subscription licensing of Creative Cloud, which I think is proportionate for a professional set of tools. Then, around 18 months ago I got very frustrated with how sluggish Illustrator had become.

I’d written an early review of Affinity Designer, I’d been impressed at the time, so I decided to give it another try expecting the sojourn to last an hour or two before I gravitated back to Illustrator. Running the latest version of Affinity Designer was a revelation, I’ve simply never wanted to switch back.

Why not Sketch? Well, I do occasionally jump into Sketch, especially for pure vector wireframing. I was an early adopter of Sketch, but the reliability issues (long since resolved) poisoned my relationship with it. Why not Figma? Well, Figma’s real strength is in collaboration, something that I get with Sketch, and personally I find some of Figma’s features unintuitive.

Affinity Designer isn‘t perfect. I dislike the color tools, especially the gradient tool, which I find clunky. But it’s the first design app I’ve used in years that syncs closely with my creative process.

Affinity Photo

I don’t do a lot of photo manipulation, so when I switched away from Creative Cloud for design work, I was relaxed about switching from Photoshop to Affinity Photo.

In my experience, Affinity Photo is stronger than Photoshop in some areas, and weaker in others. Affinity Photo’s bitmap scaling is much better than Photoshop’s, largely due to Lanczos 3 sampling.

Affinity Photo also solves a lot of little irritations that Adobe has chosen not to address for legacy or philosophical reasons, such as the toggleable ratio setting when resizing the canvas — I’ve lost track of the hours I’ve spent in Photoshop manually calculating vertical whitespace so that it’s proportionate to the horizontal.

TinyPng

Both Affinity Photo and Photoshop are poor at web format optimizations. Photoshop perhaps has the edge, but its output certainly isn’t acceptable for production.

I run bitmaps through TinyPng, which on average halves the size of the file without any appreciable loss of quality. (It stripped 66% off the images for this post.)

Fontstand

When I started to drift away from Creative Cloud, the one service that delayed me was Adobe Fonts (née Typekit). Not so much for the webfonts — which are faster and more reliable self-hosted — but for the ability to sync desktop fonts into my design apps.

I tried Fontstand when it was first released, and I loved the concept, but was worried about the small library. When I took a second look and discovered the library is now substantial for both workhorses and experimental typefaces, it was an easy decision to switch.

Fontstand is a desktop font rental service. Once you’ve found a typeface you’re interested in, you can activate an hour-long trial, then choose to rent the font for a small fee. You can auto-renew the rental if you need to, and if you rent the font for 12 months it’s yours forever.

If there’s one tool on this list I genuinely could not design without it’s this one. Fontstand makes working with fonts from independent foundries affordable for freelancers, and it’s enriched the typographic palette available to me.

Khroma

Every designer has strengths and weaknesses. Since day one of art school, my weakness has been color. It just doesn’t come naturally to me, and I have to work quite hard at it.

An incredibly helpful tool that I’ve been using for a few months is Khroma. It helps my eyes warm up before approaching color, and helps me find a starting point that I can then refine. Comparing my design work before, and after Khroma, the latter color choices are cleaner, more vibrant, and more interesting.

Atom

A good code editor is essential, and I’ve never found one that I’m completely happy with. For years I’ve flitted back and forth between Brackets, Sublime Text, and BBEdit. I think that probably reflects the changes in the type of coding I’m doing.

For now, I’ve settled on Atom. It’s fast, reliable, and it’s not biased to front or back-end code.

CodeKit

I held out on compilers longer than I should have, using apps like Minify to minify CSS and JavaScript, and the command line to process Sass (see below). Then I found CodeKit and it’s been essential to my workflow ever since.

What I like best about CodeKit is that it’s a GUI. Which means I can change settings while coding, like toggling off the JavaScript linting, without switching mental gears into another language.

MAMP

MAMP is a tool that allows you to run a local server environment, meaning I can run PHP and MySQL without the tedious process of FTPing to a server to test a change. Mac comes with Apache, so this isn’t strictly necessary, but it’s simple to use and works well with both CodeKit and Craft (see below).

There’s a pro version of MAMP, which allows you to switch seamlessly between projects, but it’s heavily geared towards WordPress. I’m still trying to find the time to evaluate Laravel Valet.

Dash

When you first start coding you try and memorize the entire language. It’s very possible to become fluent in the core of a language, but there are always nuances, defaults, and gotchas that you miss. As you grow more experienced, you realize that all professional coders Google the answer at least once per day.

When I got tired of Googling I started using Dash which is a superb app that combines the docs of numerous different languages into a searchable window. I use it daily for everything from SVG to Twig.

LambdaTest

It doesn’t really matter what you’re building, even the indy-web needs to be tested. Ideally you’ll test on real devices, but if you can’t afford a device library — and who but the largest agencies can — you need a live testing solution.

There are a few upstarts, but your choice is basically between BrowserStack and LambdaTest. I went for LambdaTest because I prefer the style of the UI, but that’s entirely subjective. If you’re not sure, toss a coin, you’ll get the same results with both.

Sass

I can’t write CSS without Sass — and I mean that literally. If I try and write vanilla CSS I guarantee I’ll nest something with @at-root and it will throw an error.

Craft CMS

Stating any preference for a CMS online that is not WordPress inevitably invites impassioned protests from developers whose career is built on the WordPress platform. So let me say preface this by saying: if WordPress works for you, and more importantly for your clients, then more power to you; I think it’s a dog.

Shopping around for a CMS is challenging, and I’ve gone through the process several times. A good CMS needs to be in sync with your mindset, and it needs to be appropriate for your clients — all of them, because unless you’re in a large agency with multiple coders, you need to commit to a single solution in order to master it.

I have looked and looked, and finally settled on Craft CMS. Craft makes it easy to build and maintain complex, high-performance sites. It has a shallow learning curve that grows exponentially steeper, making it easy to get started with plenty of room to grow.

Vue.js

Way back when Flash went kaput I switched to jQuery, and that was a really easy route into JavaScript — ignore the people who tell you to master the core language first, do whatever it takes to start using a language, that’s how you learn. But jQuery is heavy, and I found I needed it less and less.

These days 90% of the JavaScript I write is progressive enhancements in vanilla JavaScript to keep the dependencies low. Occasionally I encounter a job that requires complex state management, and then I fall back on Vue.js. JavaScript developers are as partisan as CMS aficionados, so let’s just say I favor Vue.js because it’s not controlled by a mega-corp and leave it at that.

Ulysses

As editor at WDD, I cannot emphasize enough that the right way to write copy for the web is markdown.

Markdown is faster to write so you don’t lose the thread of your thought process, and it doesn’t impose formatting so you can easily migrate to a CMS. If you’ve ever spent 20 minutes stripping the class, id, and style tags out of a file created in Word, Pages, or (by far the worst offender) Google Docs, then you don’t need to be sold on this point.

There are a few markdown-based writing apps available, I tested half a dozen, and the one I settled on was Ulysses. I like its distraction-free mode, I love its clean exports. Everything I write, I write in Ulysses.

Screenshot Plus

Much like markdown editors, there’s no shortage of screenshot apps. My current favorite is Screenshot Plus.

Screenshot Plus has one feature that makes it standout for me, and that is its Workflows. It sounds like a small problem, but when you’re taking screenshots of a dozen sites, the extra clicks to save, switch to your editor, and open the file are laborious. I have several workflows setup in Screenshot Plus that allow me to take a screenshot, save it to a specified folder on my local machine, and then open it in Affinity Photo, all with a single click.

Spark

I get a lot of email, a lot. At one point the influx was so bad I was using multiple email apps to segment it. Yes, I use Slack daily, but it doesn’t eliminate the need for email.

I‘ve been using Spark for around six months and it’s radically sped up my workflow. I’m a big fan of the smart inbox that allows me to compartmentalize email like newsletters, and email that warrants a reply. I like that I can switch to a chronological list if I’m looking for something specific. I love the ability to pin, or snooze messages, which helps me triage my inbox.

Todoist

I’m one of those people who can’t make it through the day without being organized. I need lists and sublists, and I need something native that opens automatically when I boot my Mac, and something that sits on the home screen of my Android.

There are as many to-do apps as there are things to do. When I’m working in a team I’ll use whichever task-tracking system it prefers. But by choice I always use Todoist thanks to its balance of simplicity and power. At this point it’s something of a meta-tool, and the app I open first every morning.

Source


Source de l’article sur Webdesignerdepot

/par