chrissyrholmes

[chrissyrholmes]

Tools and Guides for Web Design Accessibility

Fifteen years ago, web accessibility wasn’t a thought in many designers’ minds. Online standards did exist as far back as 1996. But they were followed much less often than they are now, leaving many struggling just to use the internet.

Over the past ten years, the web has made huge strides in making sites accessible. But it’s up to you, the designers and developers, to optimize your own websites. Not sure where to begin? These tools and guides for web accessibility will help you design a better web.

Introduction to Web Accessibility

What is web accessibility, why should you implement it, and – most importantly – how can you do so? This invaluable resource introduces you to the basics of accessibility and can help you get started in optimizing your site.

The A11Y Project

Accessibility isn’t an easy topic to broach. With dozens of standards and hours of reading material, some people just don’t bother. The Accessibility Project aims to make the topic much more approachable, with easy-to-read articles, bite-sized tips, and plenty of helpful guides.

Contrast

High contrast colors are very important for those with visual impairments. There are tools to check your site’s color contrast, but that disrupts your design flow. This macOS app scores colors instantly. No more guessing or spending minutes inputting hex codes.

Stark

What if there was a tool that let you design with accessibility in mind from the beginning? Stark is an Adobe XD and Sketch plugin that does just that. Check contrast, run colorblind simulations, and get quick color suggestions. Now you can create a site that’s beautiful and accessible even during the mockup phase.

tota11y

Tota11y is an extremely useful tool that activates from your browser bookmarks and notifies you of accessibility violations on a page. It’s open source and comes with many plugins that all detect a range of issues. Activate it on your site and see if you pass!

Accessible Color Matrix

Picking a palette? This tool shows you how your palette will work in action, and notes when it doesn’t meet the contrast requirements. Now no one will struggle to read text on your site.

WAVE Web Accessibility Tool

WAVE is a webpage checker that runs a page through a variety of standards, reporting back errors, alerts, and correctly implemented features in an interactive panel. While it’s no replacement for human testing, it can help set you on the right design path.

Web Accessibility Checker

This accessibility checker reports issues on a page in a simple list segmented by known, likely, and possible problems. This one also comes with extra features, like the ability to upload or paste an HTML file. You can also check against different standards!

HTML5 Accessibility

Wondering what accessibility features are supported by major browsers? This nifty resource details info about individual elements and how they test for support by browsers.

18F Accessibility Guide

This is a fantastic collection of resources, guides, and articles about web accessibility. If you need even more reading material, start here! It’s also a great source of testing tools for businesses.

AccessLint

GitHub user? This accessibility checker automatically detects and points out violations, simple as that. It also re-reviews code changes to let you know if you’ve really fixed the issue. For open source projects it’s totally free, but you’ll need a monthly subscription if you run a private project.

Lighthouse

Lighthouse is an advanced tool available right from Google Chrome’s developer tools. Along with performance issues it also checks for accessibility errors. You can run it from Chrome, the command line, or as a Node module.

Making the Web More Accessible

Nearly 1 in 5 people in the US have a disability. 3.2 million Americans are visually impaired, while 8.2 million have vision problems, and that number is only growing. You should do your best to follow accessibility standards, so that everyone can browse your site without having to contend with garbled screen reader output, difficulty reading, and headaches.

Something as simple as adding alt text to images and increasing contrast can make a huge difference to your disabled users, but there’s always more you can do. Don’t make accessibility an afterthought.

from Web Designing https://1stwebdesigner.com/tools-and-guides-for-web-design-accessibility/

[chrissyrholmes]

SVG Filter Resources and Demos

If you’ve used CSS, you might have worked with CSS filters before. Sadly, these are somewhat limited, so you’ll often need to break out Photoshop to get the effect you’re looking for. That’s where SVG filters come in!

SVG filters are simply effects that can be applied to images and even text, but you can do much more than is possible with CSS. Blurs, drop shadows, animations, and other effects that you can often only find in advanced graphics editing programs are all available to you.

Ready to learn? These resources, demos, and tutorials will teach you to use these super helpful filters.

SVG Filters 101

For those looking to learn SVG filters, this page is the best place to start. Codrops introduces you to SVG filters with its helpful online tutorial. It’s not a short read, but by the end, you should have a basic understanding of SVG filters and be ready to apply them on your own site!

The Art Of SVG Filters And Why It Is Awesome

This tutorial gets a bit more into the meat of things, showing you primarily how to style text with filters. There’s code for lighting effects, noise, strips, outlines, and all sorts of other neat effects. This normally takes a fair bit of skill with outside programs to get it right, but you can do it just with some lines of code.

Stranger Things Logo in SVG

Here’s a cool example of what you can pull off with these filters. This “Stranger Things” logo is rendered in nothing but SVG, complete with the spooky flicker effect and neon lighting.

Image Distortion Effects with SVG Filters

Looking for a cool image distortion effect? Three interesting hover effects are showcased here, along with a few tutorials so you can learn to create your own.

SVG Filters Playground

This is a tremendous resource for new programmers. Here’s a sandbox for you to test out and play with various SVG filters, applied to both images and text! And if you like the effect you made, you can even copy it and try it on your own site.

Using SVG to Create a Duotone Effect on Images

Duotone images are quite popular thanks to Spotify, but you don’t need to learn how to use gradient maps to create one. Just pop in this code and you can create your own gorgeous duotone images!

Gooey Text Background With SVG Filters

The “gooey” filter is used to create a blob-like object similar to a cell. You can also use it to make a rounded background for your text. And the best part is, it’s a dynamic filter that changes to fit the text size!

Ripple (SVG Filter + CSS)

Here’s a weird, colorful ripple effect made with a combination of SVG and CSS! It might make a great background or banner for part of a webpage. Here’s the magic: it’s just a bunch of straight, rotating lines with a displacement map filter.

Image Transitions Using SVG Filters

Sick of boring blurs and slides in image transitions? Here’s something more interesting: a dynamic dissolve transition effect that cycles between multiple images.

Motion Blur Effect Using SVG Filters

Another cool transition effect, this one is a slider that applies a motion blur and squishes the image as it transitions. No more simple sliders; make your site stand out with a pleasing animation.

Mastering SVG Filters

For web designers and developers, it’s important to always be learning new skills. SVG filters can save a lot of time that might have been spent in a graphics editing program. Instead, just pop in some code and you have a professional image filter effect – simple as that!

Now that you’re a master of SVG filters, it’s time to get out there and start designing a beautiful website.

from Web Designing https://1stwebdesigner.com/svg-filter-resources-and-demos/

[chrissyrholmes]

98% Off: Get the Project Management Certification Bundle for Only $49

They say great leaders are born, not made. While there is some truth to that, it isn’t always the case. An effective project manager is a good decision maker, has effective communication skills and strong leadership skills. All of these skills can be learned and harnessed over time. The Project Management Certification Bundle offers some […]

The post 98% Off: Get the Project Management Certification Bundle for Only $49 appeared first on designrfix.com.

from Web Designing https://designrfix.com/deals/98-off-get-the-project-management-certification-bundle-for-only-49

[chrissyrholmes]

Want to Take Your WP Site to the Next Level? Use These Top WordPress Plugins

Your business might be doing OK with a run-of-the-mill online presence. Although a flat conversion rate is nothing to brag about. Spice up the website by using a few special features (the salt, and pepper). You should expect an uptick in conversions.

Or, take advantage of what plugins offer.

They can do for websites what sour cream, cheese, and bacon bits can do for baked potatoes. Visitors come back for more, and they spread the word about your cool products or services.

Check out our selection of top WordPress plugins (condiments if you prefer) to see what they could do for you.

1. Logic Hop – Personalized Marketing for WordPress

You’ve probably spent a lot of time building your website. Tweaking content. Massaging your message. Working on ad variations. A/B testing and wondering what is going to click – Or, more importantly, get clicks… Sure, some things work, but only for a specific ad or certain social media posts.

What if your content and messaging could react to your ad variations? What if your content knew what social media post a user clicked on? What if your site could remember your visitors’ behaviors? With Logic Hop for WordPress, it can.

Welcome to the world of content personalization where Logic Hop makes it easy to personalize your site based on UTM codes, geolocation, on-site actions, and even data from Gravity Forms, HubSpot, Drip and ConvertKit.

Stop missing clicks, conversions, and sales. See for yourself with a 14-day free trial. Logic Hop’s premier customer support will help you get up and running quickly. What are you waiting for? Take your digital marketing to the next level.

2. LayerSlider

With the Layer Slider plugin, you get a multi-purpose animation platform on which you can create image galleries, mind-blowing slideshow effects, animated page blocks and, naturally, an excellent variety of sliders. Layer Slider is also a great tool for building landing pages, and even complete websites.

Layer Slider is mobile device friendly, easy to use, SEO friendly, and developer-friendly as well. Its cutting-edge technologies, drag and drop visual editor, and other smart features eliminate any need for coding.

This plugin’s many useful features include a built-in Photoshop-like image editor and an expanding selection of professionally-designed and handcrafted slider templates. These templates serve as excellent starting points for new projects and cover a wide range of topics from personal to corporate needs.

Layer Slider users have access to detailed documentation, lifetime updates, and a dedicated help team.

3. NextGEN Gallery & NextGEN Pro

NextGEN Gallery is the industry standard for WordPress plugins of its type. It makes it easy for beginners to put together a simple gallery, and it’s powerful enough to satisfy the demands of visual artists and imaging professionals. The NextGEN Gallery plugin is free to download.

A complete WordPress gallery management system is offered on the backend. It allows you to batch upload photos, edit thumbnails, rearrange and sort photos, create albums, and more. Front end features include two main gallery styles and two main album styles.

We suggest you try NextGEN gallery first to see what it can do for you, and check out the NextGEN Pro premium plugin while you are doing so.

NextGEN Pro offers a huge array of extensions that enable you to easily manage and display thousands of images in a variety of ways, sell prints and downloads, and collect payments via PayPal or Stripe.

4. wpDataTables

Creating informative charts and tables can be a real challenge when large amounts of complex data are involved. wpDataTables is an all-in-one solution for anyone having to work any amount of data from various sources, and create customizable, responsive, interactive, and editable charts and tables from that data.

wpDataTables accepts MySQL, MS SQL, and SQL database data. This plugin integrates easily with popular form builder plugins.

5. Amelia

Amelia can save small business huge amounts of time (and budget) by automating critical aspects of their appointment, booking, booking management, and online payment systems. User ratings after the 1st 6 months edged very close to 5 stars; a trend that hasn’t let up.

Amelia is extremely flexible in the way it helps businesses deal with changing or cancelling appointments and matching customers to employees. It’s a definite stress reliever for both managers and employees.

6. MapSVG

MapSVG was created 8 years ago as a tool to enable users to convert any SVG file into an interactive vector map. It has since expanded to where it is able to create all 3 types of interactive maps; vector, Google, and image.

Drawing tools have been added along with a database so users can place custom objects or markers on their map or in a directory that’s associated with the map.

7. WP Review Pro

If you’re considering building a review website or improving the one you already have, you’ll find the WP Review Pro plugin to be a handy tool to have in your arsenal. It’s perfect for reviewing anything from products or services to books and movies.

You can choose among stars, percentages, points, or circles, and WP Review Pro also enables you to create comparison tables for multiple products.

WP Review Pro is optimized for speed and it is WooCommerce compatible.

8. Rank Math SEO

Whether you’re a beginner at website optimization or an SEO veteran, the Rank Math WordPress plugin can take your search engine optimizing skills to a new height. Rank Math loads quickly and it’s delightfully easy to use.

It features a built-in Content Analysis tool to help you write SEO friendly content – and it’s free to download.

9. Blog2Social – Smart social media automation for WordPress

Blog2Social’s media post automation feature is a genuine time saver when you need to customize, manage, and post social media information to a network of social media sites. With Blog2Social, you can easily vary the format, content, and images of individual posts within the network to give every post a personal touch.

The Social Media Calendar allows you to schedule, color code, and track posts, and use drag and drop to rearrange a schedule – another extremely popular and useful feature.

10. Heroic Knowledge Base

When you reach a point where you’re fed up answering the same questions over and over again, it’s probably time to hand things over to Heroic Knowledge Base. Customers can receive quick answers to their queries 24/7, which makes them more likely to invest in a product or service they’ve shown an interest in.

A CTA isn’t terribly effective if a visitor is still looking for an answer to a question. Heroic Knowledge Base takes care of that.

Conclusion

These 10 varieties of cheese, sour cream, and bacon were designed to make customers happy. They will want to come back for more.

We suggest you check out several of these WordPress plugins in more detail, give them a try, and see the results.

Happy shopping!

from Web Designing https://1stwebdesigner.com/want-to-take-your-wp-site-to-the-next-level-use-these-top-wordpress-plugins/

[chrissyrholmes]

Inspiring One-Page Portfolio Websites

If you’re looking for a great way to show off your skills, have you considered a one-page portfolio? They’re concise and to the point, which is good for potential employers who may be short on time.

And in a smaller sandbox, you have more reign to creatively show off your design expertise. One-page portfolios tend to have some of the most interesting and well-made layouts in web design. With a single page, you can make your site less like a static webpage and more like an experience sure to thrill anyone who comes across it.

Looking to create your own one-page portfolio? Here’s a bit of inspiration from some of the best designers and developers online!

Owltastic

With a charming duotone palette and beautiful starry space theme, this is one fantastic example of a one-page site. There’s plenty of links to case studies, past projects, and the designer’s social media accounts. Frequent use of a call to action leading to the contact form means that clients won’t ever have to scroll far to send a message.

Gordils & Willis

This portfolio wastes no time at all in diving into the project showcase. As you scroll, you’ll get to see various pages, logos, and parts of the UI that were designed for each website or app. If you’ve seen enough, just use the menu to snap to the bottom, or click the hovering email button that’s always on the left.

BRNDMKRS

Big ideas need a big website, and this full width page features huge typography, large videos, and full screen images. There are even a few interactive elements, like a service checklist that lets you see an estimated cost for what you want.

Ollie

Bold and dark design are what this portfolio is all about. The black background makes the more colorful images pop, and the custom cursor is a nice touch. This one is a good example of an image-focused portfolio without too much text.

Aristide Benoist

Gigantic text is certainly one way to grab attention. Once you’re interested and start scrolling down, you’re immediately introduced to the developer and his work. Hover the image and you’ll get a taste of this dev’s experience in interactive design.

Portfolio of Oliver Gareis

Oliver Gareis’ portfolio opens with a brief about and awards section before getting right into the portfolio. Each project includes a brief description of what the designer was going for, showing off his expertise. There’s quite a bit of content, but you can use the sticky header to scroll right to the contact info at any time.

Kevin Dunbar

One of the best parts of this portfolio is the bright white design, accentuated by a single splash of color that strategically highlights certain areas. The red draws attention to banners, links, and contact info against the white and gray background. Meanwhile, the portfolio section uses animations to the same effect.

Unlikely

The moment you enter this site, you’re plunged into a page of striking animations that are impossible to ignore. Text flies dramatically to your cursor, loading screens shake, and project videos play in the background. Unlikely makes a bold statement from the very beginning.

Green Chameleon

On sites like this, it’s easy to forget you’re on a webpage. Animations play and hovering images ripple and distort as you scroll. It’s more like exploring an art gallery than visiting a website.

Amazing One-Page Designs

A one-page website is a bit like a business card. You need to explain who you are, what you do, and why an employer should choose you, all in a small amount of space.

It takes a lot of skill and design expertise to build something that gets the point across while leaving room for inspiring design, but these people pulled it off perfectly. Now it’s your turn to create your own inspiring one-page portfolio.

from Web Designing https://1stwebdesigner.com/inspiring-one-page-portfolio-websites/

[chrissyrholmes]

Represent Your Business with a Free .design Domain Today

The right domain name is a vital part of your overall branding strategy. It should be both easy to remember and reflect what you do. Yet, for years designers have settled for domain extensions that really don’t fit in. While .com, .net or .biz work well enough, do they really provide users with context?

Thankfully, we no longer have to settle. Now that .design domains have arrived, they offer a unique way to promote your business. They look great on all of your branding materials, such as business cards, resumes and even as your custom email address.

And, best of all, you can register your own .design domain for free! If you already have a website – not to worry. You can simply connect your new .design domain to your existing site. Or, use the available site builder to start from scratch.

Why .design Stands Out

Having your own .design domain name presents quite an amazing opportunity. After all, it’s rare that an industry has such an easily identifiable domain extension.

Not only that, but there are several other reasons to go with .design, such as:

Great Names Still Available Because .design is fairly new, there are still plenty of outstanding names available to register. However, that won’t always be the case – so consider getting yours as soon as possible.

Unique Branding Opportunities A great rule of thumb is that, the shorter your domain, the easier it is to remember. And since .design is so industry-specific, it allows for some clever name shortening.

For example, janedoedesign.com can become janedoe.design. Not only is this shorter in length, it also makes for more memorable branding.

Perfect for Redirecting Even if you don’t use your .design domain for your main website address, it can still be a valuable resource for redirecting elsewhere.

If, for instance, you have a profile at a design community such as Behance or Dribbble, you can point your .design domain directly to your portfolio page. This makes sharing your profile with others super simple.

Get Your FREE .design Domain

We have teamed up with Porkbun to offer all 1stWebDesigner visitors a FREE .design domain name. The first year is free, and yearly renewals will be just $35 instead of the $70 offered at some registrars.

You also get:

Free Email Hosting You can add an email address (or multiple!) that matches your domain name. For example, anne@goldsmith.design or info@goldsmith.design, or any other name you want.

SSL Security An SSL certificate will encrypt your visitors’ sensitive data, and also display your site with “HTTPS” in your address bar, which will let visitors know that you’ve made their security your top priority. You’ll also avoid the “NOT SECURE” label from Google.

Free WHOIS Privacy Your contact information will be private, and protected forever. Other registrars charge you for this. PorkBun won’t.

Free Website Builder If you want to build your .design website with no code, you can build it for free using their site builder, powered by Weebly. And with this option you don’t have to pay for website hosting.

Free Domain Connection Whether you built your website (or plan to build it) with other services like WIX, SquareSpace, or Weebly, you can easily connect your .design domain to your website platform. Your website content will stay exactly the same, but you’ll have a modern .design domain name for your website to show off!

Here’s your chance to get a free website domain name that reflects what you do and helps you showcase your work.

To claim your free domain:

Click to claim & search for your domain name

Click the pink + icon on the desired domain

Click the checkout button & complete the checkout process.

YES! I WANT MY FREE .DESIGN DOMAIN NAME!

This offer does not apply to premium names.

from Web Designing https://1stwebdesigner.com/represent-your-business-with-a-free-design-domain-today/

[chrissyrholmes]

How to Use the Datalist Element for Guided Input

The datalist element pairs with one or more input fields to provide an auto-suggest list of values the user can select rather than type. Learn how to use the datalist for better mobile first UX. https://love2dev.com/img/datalist-hero-817x1646.jpg from https://love2dev.com/blog/datalist

from The PWA Source - Blog http://love2dev.weebly.com/blog/how-to-use-the-datalist-element-for-guided-input

[chrissyrholmes]

Free Illustration Sources for Your Design Projects

For web and graphic designers, purchasing illustrations for a project can be expensive. That extra unique touch of custom artwork is often worth the price, but what if it’s not in your budget or vision?

Whether you just need placeholder illustrations, or aren’t planning on purchasing expensive commissions at all, you don’t have to settle for clip art. There are plenty of beautiful, free illustrations out there, fully available for use in any project. We’ve compiled a few sources here. Icons, art, and vectors; anything you need, you’ll find it.

Absurd Design

Looking for illustrations that are weird, imperfect, and human? Absurd Design has beautiful artwork that looks like it comes from a surrealist painting. For free, you get eleven black and white designs in PNG format. They’re free for use in personal and commercial projects. You can also pay a monthly fee to get colored versions, SVG vectors, and even more great artwork.

unDraw

If you need some stylish vector illustrations with a strong focus on people and technology, unDraw has hundreds of images that are just your taste. Tech-focused websites or graphics will find plenty of material here, but there’s a little something for everyone.

And the neatest feature: use the drop-down color picker at the top of the screen to customize the main colors to match your brand!

DrawKit

These beautiful modern icons would look great in any project. There are dozens of illustrations covering a variety of topics, each in black and white or color. It’s easy to edit them in any vector editor, and they’re available for any type of project. You can also purchase a pack of 5 premium illustrations, or a kit of 100+ components to mix and match into your own unique image.

365cons

365 cute, minimalist icons, available for use via the MIT license. Each icon comes in SVG and PNG form, so you can use them anywhere. And each icon related to the artist’s life that day in some way, so you’ll find all sorts of stuff!

Streamline Illustrations

How does 50 colorful, cartoony icons available for commercial use sound? People, objects, and technology are all represented here. Each icon comes with color, duotone, and line art versions – and in six different file formats! If you like those, you can also purchase premium packs or the whole set.

You can also install 240 totally free LGBT vectors on top of this, so that makes nearly 300 free icons from this site!

Ouch

16 different art styles covering hundreds of illustrations sorted by subject – and all you need to do is link back. These icons were made for the non-illustrating designers out there looking to class up those empty webpages.

Purchasing a subscription gets you access to vector files, and you won’t need to link back.

Bottts

Sketch App users, try this awesome free library. Mix and match cartoon robot parts to create your own bot, with head and body pieces available. Color however you want, and use as icons, in graphics, or whatever project you want – even if it’s commercial. No two bots look the same.

Beautiful, Free Artwork

A good set of illustrations can really make a design stand out, be it a website or a graphic piece. While it’s best to hire an artist if you want a totally unique design, using free illustrations can still give you the look you’re going for without costing a ton of money. Which of these resources do you plan on using in your next project?

from Web Designing https://1stwebdesigner.com/free-illustration-sources-for-your-design-projects/

[chrissyrholmes]

Insights from Recent Web Developer Surveys

Surveys offer a wealth of extremely valuable information. For the web developing world, this can have huge implications. Have you ever wondered where the people in your field are working, what tools they’re using, and how long they’ve been in the business? What’s your competition and where should you be devoting your time?

Thanks to numerous web developer surveys, all of these questions can be answered. Let’s see what insight can be gleaned from these thousands of responses.

The State of Javascript

JavaScript has a huge range of libraries, and it can get overwhelming. Over 20k JS developers helped shine some light on the situation.

If you’re searching for a small, but potentially profitable niche to break into, Reason, ClojureScript, and Elm look like the best candidates for JavaScript flavors. Vue is also a steadily growing front-end framework worth looking at. There’s much more data for back-end frameworks, data layers, testing frameworks and more.

The State of CSS

This survey hasn’t yet been released, but with 10k respondents, it’s sure to be enlightening. Keep an eye out or enter your email so you can know where this constantly-evolving language is going.

Stack Overflow Developer Survey

Stack Overflow is a gigantic hub of developer knowledge, so it’s the best place to run a long survey.

Almost 60% of developers are back-end, and near 50% full stack. 20% work in mobile, which explains the steadily growing market. Python has surpassed C# in popularity, so if you’re thinking of trying it, get on the bandwagon now.

Engineering managers, DevOps specialists, and data scientists/analysts have the highest salaries among developers – mobile and game devs the lowest.

Front-End Tooling Survey

5k front-end developers answered this toolkit survey, which was compared to one done in 2016.

A decent portion of CSS developers prefer using no pre-processor or framework at all, but popular tools include Sass, Bootstrap and Autoprefixer. Overall, CSS users seem to be moving towards cleaner code with usage and knowledge of methodologies, linting, and naming schemes increasing.

CSS and JavaScript experience often go together, especially with jQuery and React. If you’re a beginner, plan to learn both.

2019 Developer Skills Report

This 71k respondent survey is all about skills, and it’s really interesting. JavaScript surpassed Java with 73% knowing JS. React is growing fast, and by 2020 it might just dominate Angular. More employers want React too, so now’s the time to learn.

Internet of Things and Deep Learning are considered realistic technologies to pursue. And beginners, note that nearly 10% of developers have wiped a database or shut down a production server, so take this as a warning to double-check your code.

The State of Developer Ecosystem

Where’s the developer ecosystem going? The data says everyone wants to learn Go, Python, and Kotlin, while JavaScript, Java, and HTML/CSS are already well-known.

In the absence of local or private database hosting, Amazon Web Services is the most popular candidate. And open source devs remain a minority, though it’s steadily gaining traction.

Node.js User Survey

Node.js is very popular, and this user survey garnered nearly 2k responses. Back-end and full stack developers are the ones who use it, and they use it frequently in over half of development. These projects tend to be web apps.

A vast majority of Node developers also use databases, front-end libraries, and Node frameworks, with Express being the most popular. Over half use load balancing and containers.

One more interesting fact: Node users tend to know over three languages. Python is by far the top contender.

Ionic Framework Developer Survey

Ionic Framework’s huge community shared its insights in this 10k survey. Angular is the most popular framework among Ionic users, but React and Vue compatibility is in the works.

Consumer-focused apps made up the majority of projects, and 32% of Ionic devs work on a startup team. Nearly 30% are self-employed with the other big chunk working in a small company of 1-10.

Progressive Web Apps were the favored project, with 61% saying they had built one or plan to this year. They’re easy to manage, efficiently cross-platform, and get more user engagement.

Powerful Information

It’s a good idea to follow the changing online world, and what your fellow developers are up to. Knowing what the popular frameworks and libraries are can get you an edge on the competition. We hope this collection of surveys offered some insight into the modern development trends, and maybe gave you some direction towards what to pursue next!

from Web Designing https://1stwebdesigner.com/insights-from-recent-web-developer-surveys/

[chrissyrholmes]

90% Off: Get Lifetime License for Next Flipbook Maker Pro for Only $29

Today, PDF is one of the most versatile document formats. Often, it is the format of choice for brochures, college papers, resumes, and more. If you’re using this format, you know what a bore they can be sometimes. With the right software, you can turn these boring PDFs into a digital flipbook with compelling images, […]

The post 90% Off: Get Lifetime License for Next Flipbook Maker Pro for Only $29 appeared first on designrfix.com.

from Web Designing https://designrfix.com/deals/90-off-get-lifetime-license-for-next-flipbook-maker-pro-for-only-29

[chrissyrholmes]

What Do Potential Clients Want to See in Your Portfolio?

A design portfolio can be a tricky thing. On one hand, it’s very much a necessity for showing the world the great work you’re doing. At the same time, not everyone is going to pour over every bit of your work with a microscope. In fact, this isn’t a one-size-fits-all proposition.

So, what impact should this have on how you build out your portfolio? It can actually depend a good bit on the types of projects you’re looking for.

With that in mind, let’s take a look at some considerations for targeting your portfolio towards the intended audience.

Detailed or Not?

If you check out the portfolios of other designers around the web, you’ll find a wide variety of styles and levels of detail. Some offer in-depth case studies of the process of taking a website from concept to finished product. Others are sparse and let the work speak for itself.

Is one approach better than the other? Again, this is where your intended audience comes into play.

If you’re looking to book large, high-paying projects where you want to demonstrate the full spectrum of what you offer, a more detailed portfolio may make the most sense. This could be especially important if you do a lot of custom development. Potential clients will be looking to see how you get things done and will want to have a more complete picture of what’s involved.

This is also a scenario where case studies or project profiles can be a big help. If you go this route, try to write them all in a similar format and point out any specific challenges you helped solve. This offers some solid proof that you’re an expert in your field.

Alternatively, many feel that a simple listing (text or gallery-style) of projects is enough. If your goal is to show off your great design skills, a strong visual may be all you need to get people’s attention.

Projects to Include (and Leave Out)

Whatever approach you’ve chosen, all portfolios require a selection of projects. That’s right – a selection. We often think that, just because we’ve completed a project, it belongs in our portfolio. But this may not be the most effective way to go about it.

For instance, if you’ve been in the web design business for a number of years, you will probably have some projects that haven’t been touched in just as long. You need to ask yourself: Is this really relevant to what I’m doing now?

Not only will some of these older projects utilize outdated technologies, they will also send the wrong idea regarding what you do. If you’ve moved on from static HTML to working with a CMS such as WordPress, then it’s probably not worth posting sites built via other means.

Keep in mind that portfolios are not just about the past. Prospective clients view them to get a sense of what you can do for them in the future, as well. Knowing this, it’s worthwhile to consider which of your projects will help you with regards to gaining new clients down the road.

This doesn’t mean that all projects that reach a certain age are irrelevant. If you’ve done work for a major brand or did something that you consider groundbreaking, it’s okay to leave it in. The idea is to weed out anything that doesn’t fit with the narrative you’re trying to establish.

Other Essentials

We’ve established that the projects we list should be relevant to where we’re at in terms of our business. But it’s also important to think about other items that are of interest to potential clients:

Industries You Service

Many times, people will want to see that you’ve worked on projects that are in their industry. If your business tends to work with a variety of different types of businesses, you’ll want to reflect this in your portfolio. For those who have a large project list, the ability to filter by category is also a nice touch.

Likewise, you may specialize in a niche that only covers a specific industry or two. Again, showcase your best examples here and leave out anything that doesn’t apply.

Mobile Friendliness

Responsive design is pretty much the default these days. But it’s still important to emphasize that you’re skilled in this area. How you do so is really a personal preference.

Some designers will provide the obligatory mobile device mockup, which is great for demonstrating how a site would look for mobile users. Another approach (and perhaps even more important) is to ensure that your portfolio itself looks great on mobile devices.

As we know, there’s no guarantee that visitors will view our work for the first time from large desktop screens. In that case, it’s good to put your best foot forward – regardless of screen size.

Showcasing the Best of What You Do

Above all, your portfolio should be used as an up-to-the-minute reflection of who you are and what you do. That means keeping it both current and relevant to your business. It’s something that should change with you over time.

While style is important, content is an even greater consideration. Whether you currently have a portfolio or not, take some time to consider what will paint you in the best possible light and help you get the types of projects you’re after.

from Web Designing https://1stwebdesigner.com/what-do-potential-clients-want-to-see-in-your-portfolio/

[chrissyrholmes]

Microsoft Edge Chromium Review and Feature Support

Microsoft Edge now uses the Chromium rendering engine. What features does it support? What separates Edge from Chrome and other browsers and should you use Edge? https://love2dev.com/img/projectanaheim-858x887.jpg from https://love2dev.com/blog/microsoft-edge

from The PWA Source - Blog http://love2dev.weebly.com/blog/microsoft-edge-chromium-review-and-feature-support

[chrissyrholmes]

10 Free Tools and Apps for Optimizing Images

In our never-ending quest to create websites that are as lightweight as possible, image optimization plays an important role.

Poorly optimized images not only increase load time, they also take up precious bandwidth from both users and networks alike. Larger websites with copious amounts of images and traffic can be especially impacted.

TinyPNG

TinyPNG is a web-based image optimizer that will shrink the size of your PNG and JPG images with minimal loss in quality. The service is especially adept at significantly lowering the size of complex transparent PNG files.

ImageOptim

ImageOptim is a free, open source app for OS X that will optimize images while also deleting unnecessary meta info. Removing meta also has the side benefit of protecting your privacy. There’s also a lossy minification mode that will aggressively shrink PNG, GIF, JPG and SVG images – including animated PNGs and GIFs.

gulp-image

If you use the Gulp task-runner, gulp-image will automatically optimize GIF, JPEG, PNG and SVG images through a script. It’s a great option for those who have lots of images to process. Prefer to use Grunt? Then grunt-image has you covered.

Pngcrush

Pngcrush is a command-line script that can run on both MSDOS and Linux. The utility will scan your PNG files and try various compression levels and filter methods to reduce file size.

APNG Assembler

Use APNG Assembler to create highly-optimized animated PNG files. This standalone app includes versions for Windows, OS X and Linux.

Compressor.io

Compressor.io is a free online service that will optimize GIF, JPG, PNG and SVG files. You can choose from either lossless or lossy compression types.

Simple Image Optimizer

With Simple Image Optimizer, you’ll be able to both optimize and resize your images through a basic web interface. There are also separate options to simply resize or convert images.

Smush Image Compression and Optimization (WordPress)

Smush is a WordPress plugin that can automatically optimize and even resize your site’s images as you upload them. You can also bulk-optimize up to 50 images at once. It’s a very handy solution for ensuring images are optimized without having to lift a finger.

Image Optimize (Drupal)

Image Optimize is a module for Drupal websites that will utilize image optimization scripts already on your web server, such as OptiPNG or jpeglib. The module will also integrate with some 3rd party optimization services as well.

Apptrian Image Optimizer (Magento)

Apptrian Image Optimizer is an extension for Magento that uses lossless compression to optimize GIF, PNG and JPG files. Images can be batch processed and a cron task can be set up to periodically scan for and optimize new uploads.

Saving Time and Space

One of the great aspects of the free image optimization tools we looked at is the sheer variety of options available. There are solutions for advanced users who want to exercise a finer grain of control, while some of the more basic options require almost no user input at all. And with bulk image management, you’ll be able to quickly and easily optimize your entire image library.

Every bit of optimization counts. Taking a little time to bring your image sizes under control truly can make a difference. Your site’s users (and their data plans) will be glad you made the effort.

from Web Designing https://1stwebdesigner.com/free-tools-apps-optimizing-images/

[chrissyrholmes]

7 WordPress Alternatives for Web Designers

There’s a lot to love about content management systems, or CMS. Maybe it’s the streamlined web design process: The website builders, themes, and no coding knowledge needed for any of it. Maybe it’s all those nifty plugins that can pull off technical features you’d have no idea where to begin with. But if WordPress just isn’t cutting it, what can you do?

Luckily, there are dozens of quality CMS and website builders out there that can potentially take WordPress’ place, depending on you and your clients’ needs. We’ve collected a few of them below.

Craft CMS

Craft’s single best feature is that it’s intuitive – both for you and your clients. WordPress can be difficult to get the hang of and even harder to customize due to its API. But Craft starts with nothing and allows you to add pieces as you need them. Third-party themes and plugins are there too!

The only trouble is the price tag. This is not something you want if you’re working with small projects. But give the free version a spin on your own time and see if it’s something you’d enjoy working with.

Perch

Need all the benefits of a CMS without having to deal with one during the design process? Create your website first and foremost, then add Perch to it later. Your clients get the simple interface and you get to design the site yourself.

Webflow

Webflow was built as a comprehensive tool for freelance web designers. Design a site without ever touching code, build it with a CMS, and deploy to your clients with hosting available right from Webflow. It works great for small design teams, too!

Bolt

Bolt CMS is defined by its simplicity. The code is simple and not bogged down with features you don’t need – but they’re easily added if you want them. This CMS use Twig to craft templates, so you can code them yourself from scratch. And editing the sites you create is super easy. No more frustrated clients! Plus, the platform is free and open source.

Kirby

If your biggest woe with WordPress is the difficult installation process, Kirby might be what you’re looking for. It’s lightweight and super easy to set up on a server. No more 5000-step installation guides. There are no databases to contend with and the admin panel is reasonably client-friendly too. Kirby, however, is best for designers who can do some coding in PHP.

Drupal

Drupal is not easy to learn as a web designer, especially if you’re used to WordPress. However, when you need a CMS that is capable of running websites that WordPress can’t, Drupal is the go-to option. It has a large following, a ton of modules, and way more advanced functionality. If you’re building simple, static websites, another CMS may be the best choice. But if you found WordPress not powerful enough, try Drupal.

Squarespace

While Squarespace offers drastically less flexibility compared to WordPress, it is considerably more client-friendly, as well as less prone to bugs and incompatibilities. The hosted service is not particularly expensive, either. Once you’ve created three websites for clients, Squarespace Circle becomes open to you. The circle can be a great opportunity to get your name out there and collaborate with other designers.

WordPress isn’t the only CMS!

For web designers, there’s always another option. Many feel they can’t pass up WordPress with all its popularity, but these platforms are a great alternative. There’s something for all the theme developers and web designers out there who definitely need a CMS, but no longer want to use WordPress. This list is just the tip of the iceberg!

from Web Designing https://1stwebdesigner.com/7-wordpress-alternatives-for-web-designers/

[chrissyrholmes]

Best Practices for Managing Multiple WordPress Sites

Both WordPress and its ecosystem of themes and plugins are seemingly always in a state of change. While WordPress core updates are usually limited to a few times a year (save for a quick bug fix/security release), plugins in particular are constantly being tweaked.

Regardless of what’s being updated, there is always the possibility of something breaking. Plugins may not have kept up with core updates and end up hindering the functionality of a site (or worse).

With that in mind, let’s explore some best practices for juggling multiple WordPress websites.

1. Keep Backups

Whether you manage one WordPress site or 100, make sure to use backups. There are tons of free plugins that can back up the site’s database and/or file system.

Depending on how often the site’s content changes, you’ll want to run backups accordingly. If something goes wrong due to an update or security issue, you’ll be glad that you have a stable copy of your sites backed up.

2. Craft a Plan

Ideally, you’d use an all-in-one dashboard that allows you to update multiple sites from a single screen. The ubiquitous Jetpack plugin includes this feature, as do third-party services like ManageWP. These solutions are great because you have everything you need, all in one place. This will save you a lot of time having to manually login to each site individually.

Short of using a unified dashboard, you’ll want to come up with a schedule for keeping your sites updated. Whether you want to update everything at once or do a few sites per day, it’s important to ensure that you have everything regularly updated (at least once every two weeks, if not more often).

3. Do Your Homework

While it’s tough to keep up with what’s running on every site you manage, it pays to look at a plugin’s changelog before hitting that update button. This is especially true if you’re working on a site using WooCommerce or another mission-critical plugin.

Unless there’s a vital security fix that absolutely needs installed right away, it may also be a good idea to give new releases a few days to see if any further bugs are discovered. Checking support forums first can save you a huge headache.

Also consider using a staging environment. Having a place to safely test updates beforehand is always recommended for eCommerce sites and those that get a lot of traffic. Some web hosts offer staging as part of their packages. Otherwise, you can also set up a local staging environment on your own machine.

4. Use Reputable Themes and Plugins

Just because a theme or plugin is readily available for free doesn’t mean it is any good.

For every site in your care, only use themes and plugins that are highly rated by users and receive regular updates. While a plugin that was last updated two years ago may in fact be fine, think about whether or not any future updates will come should something break.

It’s no fun having to cut functionality out of a live site because of an abandoned plugin.

5. Be Proactive

Managing multiple websites is a big responsibility – one that requires constant attention. Getting lazy (or too aggressive) at the wrong time can lead to serious problems.

That’s why it pays to stay proactive. Read up on WordPress related news and see what new releases hold in store. Make sure that you have an idea of what changes you may need to make to accommodate cutting-edge features.

Consistency is the Key

Let’s face it: No matter how much you plan, something will break sooner or later. But if you maintain a consistent approach to managing your WordPress websites, you’ll give yourself a better chance of avoiding problems.

And, when something does crop up, you will be better prepared to deal with it.

Successfully keeping multiple sites running along in a healthy manner takes some commitment. Still, it’s an achievable goal if you take the right steps.

from Web Designing https://1stwebdesigner.com/managing-multiple-wordpress-sites/

[chrissyrholmes]

How to Use the WebShare API to Trigger the Native Share Dialog

The Webshare API brings native sharing to social networks, SMS, email and other targets to the web. Now you can invoke the native share dialog from a web page. https://love2dev.com/img/webshare-api-hero-1920x1321.jpg from https://love2dev.com/blog/webshare-api

from The PWA Source - Blog http://love2dev.weebly.com/blog/how-to-use-the-webshare-api-to-trigger-the-native-share-dialog

[chrissyrholmes]

90% Off: Get the Essential Digital Photography Master Class Bundle for Only $19

The use of digital cameras have become more and more common since the 1990s. Even smartphone cameras take decent quality photos. As such, it is easier now more than ever to get started with photography. If you want to take better photos, then the Essential Digital Photography Master Class Bundle can be of great hep […]

The post 90% Off: Get the Essential Digital Photography Master Class Bundle for Only $19 appeared first on designrfix.com.

from Web Designing https://designrfix.com/deals/90-off-get-the-essential-digital-photography-master-class-bundle-for-only-19