The breakpoints we tested in 2021, and the ones to test in 2022

Which screen sizes to design, build and test on is a perennial topic in web development. While well-built responsive websites will work at any size, during development it’s easier to use a small number of sizes to check with (even in Polypane!)

But what sizes to use? There’s a number of different approaches we’ll go over in this article, all updated to be relevant in 2022.

  1. Base it off device groups: mobile, tablet, laptop and desktop.
  2. Use the breakpoints from popular CSS frameworks.
  3. Using the dimensions your visitors use.
  4. Using the most used breakpoints of 2021.



Based on device sizes

There’s mobile phones, tablets, laptops and desktops, so if you use size for each of that category, you cover them:

Name Width
Mobile 375px
Tablet 768px
Laptop 1280px
Desktop 1920px

This gives a good overview, but you run the risk of missing the in-between sizes, smaller than 375px and between 900 and 1000px wide.

Both of those are often forgotten, but still see quite a bit of real-life usage. The first one in older mobile phones, and the second one on tablets, laptops and desktops in unmaximized browser windows.



Based on popular CSS frameworks

We’ve written about the breakpoints that popular CSS frameworks use before. These are excellent when you’re also using the rest of the framework, or as a starting-off point. For example, here’s the breakpoints in Tailwind CSS 3.0:

Name Width
sm 640px
md 768px
lg 1024px
xl 1280px
2xl 1536px

This gives a nice spread, though with a relatively high starting point you run the risk of having to do extra work after implementing the design to make sure everything fit on mobile devices.



Based on your visitor data

If you use Google Analytics, your visitors browser dimensions are stored as well. This means you can retrieve them from the Google Analytics dashboard and use those to test on.

For example, here’s the 5 most used dimension on this site:

Name Width Height
4.55% 1900px 940px
2.13% 1900px 970px
2.02% 1520px 750px
1.99% 1350px 660px
1.95% 1350px 630px

While you can use the above it’s important to realize that our audience probably isn’t your audience. Polypane is a tool for web developers, so the vast majority of our visitors are viewing our site on a desktop device, and fairly large ones at that.

Notice too that none of the most popular sizes here map to the traditional device widths mentioned above. Every audience is different, and it’s best to cater to yours.



Create a Polypane workspace based on Google Analytics

You can also use our GA workspace creator to automate the process, select how many panes you want and how to sort them, and then opening them in Polypane with a single click.



The breakpoints we tested in 2021

That leaves us with the last method: using the breakpoints that have been used the most in 2021. For that we can use two sources: the Web Almanac and Polypane.



From the Web Almanac

The Web Almanac analysed 8.2 million websites, old and new, to make an overview of the most used web features, including breakpoints. That also includes all the sites in the web almanacs testing data that existed (well) before this year.

It has a chapter on CSS that includes a list of common breakpoints. It’s worth reading the analysis: they make a split between min-width and max-width media queries because you can see a clear difference in sizes used (min-width is more often used for 767px while max-width for 768px, for example). We’re splitting those out in the overview below as well, as they give a nice contrast.



Min-width

Name Width
57% 768px
44% 1200px
40% 992px
31% 600px
25% 782px
24% 480px
16% 1024px
9% 767px
8% 800px
3% 991px



Max-width

Name Width
52% 767px
38% 600px
38% 768px
36% 480px
30% 991px
27% 1024px
26% 800px
18% 1200px
13% 992px
10% 782px

When it comes to the difference between min-width and max-width, apart from the 1px differences here and there, is
that the spread for max-width is much more diverse. For min-width, the top 10 goes from 57% usage to 3%, while max-width starts lower, at 52%, and ends higher, at 10%.

Min-widths means you’re adding styling as you get wider, while max-widths usually disable styling as they get smaller. Because of this, you frequently need less min-widths, and your styling works for a longer time before you need a new breakpoint.



The most-used breakpoints in Polypane in 2021

We can also look at the most used pane sizes in Polypane in 2021. The sizes that real developers have used the most in the past year to develop websites with.

This gives the most accurate look at what sizes modern sites are optimized for. Here is the top 10 for 2021:

Name Width
5.48% 320px
4.49% 1280px
3.41% 768px
2.41% 1920px
2.19% 500px
1.89% 568px
1.86% 800px
1.81% 375px
1.69% 1024px
1.25% 1440px

If we look at these sizes we see a nice spread between device sizes, breakpoints from CSS Frameworks and the many presets that Polypane ships with.



The breakpoints to develop on in 2022

As you can see from the relatively low percentages, there are thousands of other sizes being used in Polypane. There is no single right set of dimensions.

So the best answer? Pick a set you like and adapt it. Any of the ones on this page are a good choice.

If you notice you often make errors at a size you’re not currently developing for, make sure to add it. And if you find yourself fixing the same issue at multiple sizes, maybe you can hide one of them during development.

Regardless of which default sizes you choose to develop on, it’s best to see all of them in one overview. That’s what Polypane lets you do. All the other parts of your browser are synced as well: your interactions happen in all panes, our elements panel lets you edit and inspect elements in all
panes at the same time, and our console intelligently combines messages from each pane.

Polypane has a free 14 trial available. Check it out!


Source link

Web3: the unique technology and challenges behind the hype

If you follow tech news, you’ve probably seen crypto evangelists say that Web3 will change the world. But what is Web3?

Web3 describes applications that can interact directly with the blockchain as its database. At the time of writing, most apps, (also called ‘dapps,’ for ‘decentralized apps’) are built on the Ethereum blockchain. The reason a user would want to store their transactions on a public blockchain rather than a private, company-managed database is that it enables ownership and portability of their data and assets. The reason a developer would build an app on the blockchain is to tap into an advanced, transparent ecosystem with decentralized control.

I write from the perspective of both a Web3 developer and a crypto user to highlight key technologies and remaining user experience challenges.



The Stack of a Web3 app



The Smart Contract

The database of a Web3 app is a blockchain like Ethereum. While an app could be written to simply send Ethereum from one account to another, most apps require a more complex API. The APIs for complex interaction with the blockchain come from smart contracts. A smart contract is code that is stored and runs on the blockchain. It contains functions that allow a user to update the state of accounts on the blockchain. Examples of common functions include minting a non-fungible token (NFT), adding liquidity to a decentralized finance (defi) protocol, and voting in a decentralized autonomous organization (DAO).

One advantage of smart contracts is that all code is transparent and available on a blockchain explorer like Etherscan. This allows a user to audit contract code, the contract owner, and all transactions in a convenient web UI. However, not all users are technical or patient enough to be able to perform this type of due diligence, and scams and hacks are rampant in the community.

Another key advantage is that anyone can build another a front end app or even another smart contract that interacts with the smart contract. In this way, a decentralized ecosystem of builders can thrive, and users can have more choice. An example of this is NFTs, which are stored on the blockchain and accessible from any NFT client. At the time of writing, OpenSea is the largest NFT marketplace, but a user who buys an NFT on OpenSea is not locked into their app. Their transaction is stored on the blockchain, so they can access and sell the NFT from any other Web3 NFT app.

But how does a Web3 frontend access the blockchain data and use a smart contract’s API?



The Wallet

The crypto wallet is another key technology that makes Web3 unique. Every Web3 app must connect to a crypto wallet to allow the frontend to interact with the blockchain. Some of the most popular wallets include MetaMask and Coinbase Wallet, which a user can install as a browser extension and as a mobile app.

A wallet allows users to create and manage accounts while isolating private keys from the Web3 app. The wallet exposes an API to interact with the blockchain and a user interface for confirming transactions. This allows a user to safely connect their account to a Web3 app and gives them control so that the Web3 app cannot write to the blockchain without the user’s explicit permission.

Relying on a third party wallet has the advantage of allowing the user to have consistent, controlled interaction across all Web3 apps, from allowing the app to read the user’s public account details to confirming transactions before they’re sent. From the developer perspective, this allows us to focus on building what’s unique about our Web3 app, and not rebuild accounts and authentication every time. However, it does require some user setup the first time they want to interact with a Web3 app, as they have to install a wallet, set up an account, and add funds.



The Client

The client is the frontend app that a user interacts with in the web browser. You can build a Web3 app with any frontend framework, or even vanilla JS and HTML, but you will need an Ethereum Javascript library to interact with smart contracts.

The two most commonly used libraries at the time of writing are web3.js and ethers.js. Both of these libraries provide utilities for interacting with the Ethereum blockchain, including accounts, contracts, and transactions.

While the crypto wallet, such as MetaMask, provides an API to read and update the state of the Ethereum network, the JS library can find and abstract the smart contract so that its functions can be called asynchronously by the Web3 app.

Other than that, the usual frontend libraries are often used to build more complex apps, with React as the most popular choice. There are even some libraries that combine React with Web3 functionality, such as web3-react.



Key UX Challenges of Web3 apps

Some of the challenges I have mentioned above include requiring the user to install a wallet and fund an account before being able to interact with a Web3 app. Here are some other major user-facing challenges, that if not addressed in the ecosystem, could make Web3 unappealing to many users.



Gas

“Gas” refers to the transaction fee users pay miners with every transaction to keep the Ethereum blockchain running. It’s a key part of the ecosystem, to incentivize miners to run nodes and to incentivize users not to overuse computing power. The amount the user pays is a function of the complexity of the transaction and the current demand. However, with the increased popularity of Ethereum, gas fees can rocket up to $200+ for some smart contract transactions at peak usage. What are the current solutions for high gas fees?

As a user, you can check gas fees with apps like ETH Gas.watch before you make a transaction, or sign up to be notified when gas prices drop. In general, gas prices tend to drop during U.S. sleeping hours (see Gas Price by Time of Day) so users could wait until low traffic times to make non-urgent transactions. But this is not an ideal solution for most users, and it disqualifies the use case of using it for everyday transactions such as buying a cup of coffee.

As a developer, there are some ways to optimize your smart contract code to avoid exorbitant gas fees for your users. These strategies range from storing variables as preferred data types to using third party libraries. Since this is a complex topic on its own, I won’t dive into it here, but will instead refer interested readers to this article on cutting gas costs for minting NFTs. However, this optimization is still not enough for many prospective users. Going from a gas fee of $200 to a gas fee of $30 is a huge achievement, but $30 is still a big enough deterrent for new users trying to make their first transaction. Because it’s not just the gas fees, but other uncertainty and complexity that could make a user even more risk adverse.



Complexity

Current blockchain transactions are still very complex for users, requiring multiple steps and new concepts. This causes a lot of uncertainty, and the user may often wonder: “am I doing this right?”

I covered some of the complexity of the crypto wallet and account setup above, but we must remember a new crypto user will have to create and fund a crypto wallet. This step alone could take days, depending on how fast their fiat can be converted to crypto and transferred to their wallet. When this is complete, they can interact with Web3 apps. However, the Web3 apps themselves are often just as complex. Decentralized apps involve new concepts, including over-collateralized lending and minting non-fungible tokens. They also often involve multiple steps, and rely on a user to already know what they are doing.

There are many elements of a Web3 app that can make a user feel uncertainty. From the 42-character hexadecimal Ethereum address (“am I sending this to the right place?”) to the transactions themselves (“why is gas so expensive?” “how do I know if it worked or not?”) the user can be intimidated and fear losing their money from a small mistake.



Successes, errors, and loading states

More transparency around what different transaction outcomes look like, and more UI to fill in the gaps, would be helpful to guide a user through complex Web3 flows. For example, if all goes well, how do you know if your transaction is successful?

A successful transaction is defined by being added to the blockchain, but it can take up to a few minutes for the app to be confident the transaction has been included in a block. So the developer must decide how to communicate the difference between ‘your transaction was successfully sent to the pool of pending transactions,’ and ‘your transaction was successfully added to the blockchain.’

There are a few different tools to track the outcome of your transaction. One is on Etherscan: as a developer, you can have the “successfully initiated transaction” state provide a link to the transaction on Etherscan, so the user can check the status of their transaction there. You can also use client code to check whether a transaction has been mined, and indicate true “success” after 5 confirmations, or blocks created after the transaction. The latter may be a better user experience, since the user won’t have to navigate away or reload the page. If the user expects their wallet balance to change as a result, or an NFT to arrive, that could be another signal of success, but on many platforms this requires waiting and refreshing.

If a transaction fails, the user will often lose some of their gas fee, and maybe their confidence in Web3. To avoid this, we need proactive measures to make sure their transactions don’t error. We can achieve this by making smart contract state more transparent to the client, and by validating requirements on the client before allowing transactions to be initiated. Web3 developers should also focus on clearly communicating any errors to the user. All of these strategies will lead to more user confidence in Web3 technology.



Conclusion

Web3 hype is grounded in revolutionary technologies that have a thriving ecosystem of builders, and users of all levels of expertise. These technologies: the blockchain, smart contracts, and crypto wallets are key tools for building the Web3 ecosystem. Web3 already provides users and developers more freedom and transparency, but there are still some major drawbacks that could prevent mainstream adoption if unaddressed.


Source link

Steps to Improve the UX of Your iOS Application to Increase Traffic

What would you use to measure the success of your mobile app? Clearly, each app developer works hard to create and launch an app that achieves the same level of success as WhatsApp, Amazon, and many more. One aspect of the picture is selecting the suitable platform and packing it with the best features. Another crucial feature of the coin is the User Experience (UX), which will influence whether it stays on the user’s phone screen for a long time or churn out. Once the user interface is upgraded to a more appealing design, an iPhone application will strike more ease of use.

In order to match the accuracy, speed, and better user interface design and iPhone app development, your business’s Smartphone app need routine information. According to statistics, more than 60% of the users have a favorable opinion of organizations that provide an excellent mobile experience. On the contrary, 52 percent of users are less likely to engage with a brand that provides a poor mobile experience.

The User Experience is one of the most vital design tools since it makes app navigation easy and user-friendly. With a unique UI, you can easily promote your brand among people. So, here we will discuss the tips with which one can improve the user interface design of the iPhone application.



Tips to enhance the UI design of your iPhone application for development

There are many possible ways to increase sales on your mobile application. The premium rationale is to have an adequate design and robust functionality, which further matches the interface of the app. we have mentioned below a few tips through which you can improvise the User interface.

dev1



1. Maintain a beneficial content-to-user interface ratio

Mobile app designs that are visually appealing will not be enough to connect users. There are other factors to consider to balance the appearance and content of the entire application. The consumer will be forced to avoid using the mobile app due to its indiscipline design. With the precise alignment of each screen and the customization of background color and typography, it helps to draw users’ attention to the mobile app.



2. Add Excellent features to the design

Users’ general meddling causes some things to be changed that are not accepted. Something in the iPhone app that isn’t appealing draws them away to look at another app with similar functionality. If your app hasn’t satisfied users, it seems distrustful.

A user interface design must adore the graphics of an application that has previously condensed the undesirable error that has occurred in the past. So, you have only one option available, hire iPhone app developer who has wider experience in developing a mobile application. Therefore, during the development of an iPhone app, the developer will use a reference strategy for iOS programming.

Alt Text



3. Login access has been refused

The user will feel more at ease going through the whole app visit if the login process is simple and easy. Online shopping apps have undergone significant improvements. For example, a user can now add products to their cart without logging in to the app.

When you visit the mobile application to explore the appearance of the eCommerce store, you will notice that the UI design will display more skills. The most important component is to allow the consumer to look at each product and add it to their cart. Finally, you may request registration in order to continue purchasing things.



4. Select the Correct Colors

Understanding the color technique of your mobile app design is essential since it is the basis and most paramount facet of a well-designed app. Choose colors for your iPhone app that reflect your brand. Each hue has a different meaning and evokes distinct emotions. Moreover, if you have a hue that is similar to your company’s present color, it would be a plus point to develop your mobile application to showcase it as your extension of the website. Also, make sure you select the color contrast that is engaging and enables a better reading experience for the users. Further, it should create a quality and interactive user experience. Let’s take the help of the iPhone app development company that can help you in getting a unique iPhone mobile app for your business.

dev2



5. Think twice about having an ‘Exit’ option in your iPhone app

An experienced and skilled iPhone developer should know that iOS apps do not have a page that quits when the user switches to another application. It should be crystal clear during the iPhone app development.

When a user switches to another app, the app’s performance may suffer. If a wallet app, such as Paytm, or a banking app, requires personal information from users, it should be avoided. In fact, before the application quits automatically, a fixed second of the session is adequate.



6. Keep your eye on the goal

For every entrepreneur, it is a delightful moment when the users are satisfied with the superior user interface design developed by the iPhone specialists for their app. Moreover, the UI keeps them on hold till the goal is achieved.

So, when the iOS developer has created an iPhone application, they should focus on specific regions. Moreover, they should know that the mobile application is going to be used by thousands of people. Therefore, an app’s interface should capture the attention of users according to their preferences.



To Encapsulate

We hope this article has helped you in gathering all the information required to enhance the user interface for the development of the iPhone app. However, there are several more tips to keep in mind during the development of a precise User Interface for your iPhone mobile application. Apple has several iOS development guidelines which every iPhone app developer has to follow to drive the code for the iOS mobile application.


Source link

8 Reasons Why a Good Web Design is Important for Your Business



Introduction

In the current era, the importance of web design is pertinent to most businesses as well as individuals. So, by now, most businesses know that having a good website design (UI+UX) is important. For small businesses or startups, investing in a well-designed, professional website may seem daunting. However, studies point to the fact that good web design is important. Moreover, your business’s website design impacts your customer experience, lead generation, and ultimately your bottom line.

You may be wondering, why? So, let’s answer that why now;)



1. An Impactful First Impression

The time in which it takes a visitor to assess aesthetics and make a conclusion about any site is extremely fast – maybe microseconds. When a user opens a website, a good design can make them feel good. If the website looks in fashion, has bright and beautiful colors, and is well organized, it looks welcoming to visitors and encourages them to stay. But if the website is dark along with outdated graphics and extremely confusing navigation, I myself would never open it ever again so why should I expect anyone to be inclined to continue on through the site?

First impressions are extremely important! Potential customers are visiting your website, wanting to get to know your business. But if you get off to a bad start due to an unprofessional-looking page with zero design consideration, trying to convince users to stay on the page to learn about what you can offer them is gonna be difficult if not impossible. You put so much money in long-term SEO campaigns just to get visitors to your page. Don’t waste your money or even time by bringing visitors to your website only to have them leave later on. According to stats presented by Adobe, “38% of people will stop engaging with a website if the content/layout is unattractive”. For once, just think about how many potential customers and money you could be losing due to poor visuals.



2. Usability

The website design has a huge impact on how easy it is for visitors to find what they’re looking for. Research shows that “86% of your website visitors want to see product or service information, 65% look for contact information, and 52% seek an About page for your business”.

Therefore your website design should make these things as easy to find as possible. Otherwise, you’ll frustrate your users or even potential users and may drive them away. Consider using standard conventions e.g put your primary services in your main navigation, feature your phone number in the upper-right-hand corner of your site, etc. It doesn’t matter even if your website functions perfectly as a bad website design may make users feel that it’s harder to use or find what they need.



3. Promotes Trust in Your Brand

Let’s admit it, website design determines how most people judge the integrity of your business. I mean, we all do it, don’t we? Beautiful yet professional website designs promote trust. Out of fashion and unprofessional web designs make users doubt your credibility. Consistency in the brand is another way that a decent web design encourages trust. Customers recognize prominent and successful brands by just looking at things like their colors, logos, or styles, etc.

Therefore, it is very important to ensure things that your customers identify your business with are clearly reflected in your website design. Make sure that the outline, styles, and fonts are the same throughout every page on your site. If every single page had a completely different design with no consistency, your site will appear unattractive and unprofessional.



4. Your competitors are already utilizing it

The most crucial reason why web design is important is that your competitors are already utilizing a good web design. If you want to retain your competitive relationship with them, you must use a good web design for your site. Everybody wants their website to stand out from the competition. If you have an old fashioned low-quality website, your competitors are gonna outrank you. Their well-designed fashionable website will ultimately perform better than yours. This means that you’ll lose to your competitors. They’ll attract more and more customers to their website because their website is visually more appealing.

Actually, your website’s design is a golden opportunity for you to set your business apart from the competition. When competing with other businesses, you and your competitors generally have the same services and similar pricing. But you need one thing that will make your business stand out from them. A well-designed fashionable website is an opportunity for your business to showcase its unique features. You can visually show your audience why they should choose your business over others.



5. Ease in Navigation

A good design makes your website easy to navigate. Most professional designers apply Hick’s Law while designing websites. This law states that the duration a person takes to make a decision is proportional to the number of choices available. If there are many choices, it’s gonna take you much longer to make a decision, and vice versa.

When professional designers build website navigation while having this Hick’s Law in mind, they want to simplify and reduce the number of options. They do this so that visitors can easily decide what action to take or where to go. This makes your site easy to navigate so an optimum number of options should be five or less. Analyze your product menu and if you find similar options, merge them into one. In this way, visitors or potential customers will find your website easy to navigate and easy to use.



6. SEO

Various components and techniques related to web design have a huge impact on your site’s content publishing capability. This ultimately influences how top search engines crawl and rank your page. Also, some web design components can hurt your SEO strategy. According to some studies, more than 60% of users have mobiles as their primary devices so having a fast, responsive website is imperative to SEO.

In order to enhance the visibility of your page, you should make use of SEO-friendly web-design elements and techniques. If you think that this is not part of your expertise, hire a competent SEO company that will optimize your website for search engines and drive organic traffic to your site as this will end up enhancing your online presence.



7. Improvement in Website Loading Speed

A well-designed site loads quickly on all types of devices. A page loads in seconds because of high-quality responsive visual media. Any visitor is more likely to stay way longer on websites that load faster than on ones that take ages to load. One study found that 53% of mobile users will leave a website if pages are unresponsive or even take a significant amount of time to load. Think about it, what do you do when a website takes long to load? You leave right? That’s the same for other visitors too!



8. Reduces Bounce Rates

Bounce rate is the percentage of users who visit a website but abandon it after checking out just one page. As we have already discussed it, a well-designed website with a fast loading speed means that users will interact with your website longer. This will in turn lower your bounce rate. If users spend more time on your site, they will be more likely to open other pages on your website. They will also learn more about you and your business while also checking out your products. Perhaps they would make a purchase too 😉



Conclusion

Website design is not a simple matter and should never be taken lightly. After all, it has the potential to make or break your online business! A well-designed website can help you gain many benefits. It can also help you nurture your leads and get more conversions. Moreover, it provides a good user experience, helping visitors to access and navigate your website with ease. Make sure that your website is designed user-friendly. Even if you already have a website, conduct site audits and optimize it to provide better accessibility and user experience.

Let’s connect!

Twitter

Github




Source link

Designing as a crafty dev

If you’ve been here before, you know I’m a frontend developer! If not, welcome to my blog! Like any dev, it’s hard to resist that well-known itch to re-do my personal website. So here we are. I’ve given my website a facelift for two reasons:

  1. I want to support more blog post topics than just tech.
  2. I want to use Next.js because that’s what I’ve been using at work.

I’ve always been a crafty person with an eye for design. I designed all previous iterations of this website! But I’m by no means a graphic/web/frontend designer, so it is super easy to get overwhelmed when planning out a new design.

Why is it so hard to get started? Well, frontend design is honestly blank canvas/page syndrome to the max. When painting, you at least have a limited color palette; or when decorating a room, you have a budget.

When designing a website, it is easy to be overwhelmed because you have virtually every color and font and every way of configuring that content that you can imagine.



Get some inspo

Taking inspiration from how I approach planning a room, my first step was creating a Pinterest board and pinning anything I liked. Fonts, layouts, colors, etc. This helped me see everything I was drawn to all in one space, identifying the patterns that emerged.

Looking in my closet and around my apartment, I obviously love greens and creams together. So obvious, in fact, that one day in a 1-1, I realized I was on a dark teal couch with a dark green sweatshirt with my pale complexion holding a mug with a dark teal/green dipped bottom and creamy top. When you start paying attention, you’ll see patterns pop out.

Mood board resources:



Narrow it down

We’ve gone from staring at a blank screen to staring at pictures and colors and fonts that we like. So let’s key into our patterns!



Colors

We just made mood boards with colors, so start with the color combos that pop out to you there, whether you saved actual color palettes or just images. We’re going to aim for 5 starter colors:

  • Background color (Usually white or off white)
  • Text color (Usually black or off black)
  • Main color (Pick your favorite color!)
  • 2 Accent colors (You can choose more if you want, but 2 is very doable. These should make your main color look its best!)

And then, let me introduce you to your new best friend: Coolors.co!



Coolors.co

First, go to coolors.co/generate. If you have any colors for which you know the exact hex, go ahead and input those and lock them in. Then have at it with the space bar to auto-generate color palettes! It looks like coolors does a good job of giving you a mix of complementary, contrasting, and triadic color schemes. If you’re not set on the exact hex code, play around with the colors you started with. You never know what you’ll find!

When playing around with the hues and tones, I suggest using HSL. This is a color code based on Hue, Saturation, and Luminance. HSL is much closer to how we think of color mixing, thanks to elementary school, than something like RGB.



Quick accessibility note

Now that you’ve found some colors you like, let’s refine them while thinking about accessibility. Here are your steps

  1. Go to https://webaim.org/resources/contrastchecker/
  2. Test 1: your text color on your background color, make either darker or lighter as needed
  3. Test 2: your main color on your background color, again adjusting & checking test 1 if you change your background color
  4. Test 3: either your dark-ish or black-ish color on your main color as a background, think CTA buttons needing text



Fonts

First, look at your mood board and notice what fonts you saved have in common. Are they serifed (have feet)? Are the sans-serif (no feet!)? Are they more blocky? Handwritten? We’re going to choose 3 fonts here:

  • Logo font
  • Header font
  • Base (paragraph) font

I didn’t use the same font in my logo as I did in my header because I read a blog post saying that you need to keep your logo distinct. But that’s up to you!

In a book, paragraph fonts are usually serifed. The feet of the serif drag your eyes across. They provide movement. Sans-serif fonts tend to be a little crisper on a screen because a consistent stroke is easier to render than a tapering edge. Do you want people to stop and take notice? Or sit and read?

You can find fonts anywhere, but I’d recommend skimming through Google Fonts. Their fonts are free and open source and are super easy to include in your website. They are also pretty widely available in other systems, like Figma! If you want help narrowing down options, Typewolf has a great guide on Google Fonts.



Logo

My “brand name” lends itself easily to an emoji. I actually had the emoji in mind when brainstorming a consistent handle across platforms. So I’ve always used ✨ as part of my branding.

I used Canva’s logo templates to play around easily and see what I liked. I keyed in on a design, but with Canva, you don’t own your logo. So I keyed into the design I liked the most and used it as inspiration in Figma.

In Figma, I developed a logo icon and a logo with my name in it. The icon lends itself to favicon use, and the full logo lends itself to the header. I then made heavy use of Figma allowing you to right-click and copy as SVG to save my designs!



Swatch it all together

Using Figma still, I put my logo icon, my full logo, and a swatch of my colors and fonts together. I want to pause here and say I never really used Figma before this project, so I don’t know all of the ins and outs, just kind of futzed with it until I had something that looked reasonable.

unorganized screenshot of my logos & font/color swatch



Layout

Alright! We have colors! Fonts! A LOGO! We’re ready to go now, right? I really want to plead with you, developer, that you should spend the time actually laying out your pages in Figma or on a sheet of paper or whatever. Creating a layout isn’t as easy as it seems when you have no plan. Again, we’re dealing with the ultimate blank canvas syndrome.

Did you save any layouts on your mood board? If you didn’t, surf around the ‘net now and find similar websites to yours. Go on some website template services and see how they layout content. Don’t copy directly but take inspiration.



Real content

You know how when you were a kid, and you drew a speech balloon and tried to fit text inside of it only to find out you didn’t leave enough room? That’s going to be you now if you don’t take the time to think through your real copy.

Real talk? Step all the way away from your design editor. Just do this in a document using bullet points to represent different sections, side-by-side sections, or links to other pages.



All together now

Once we have realistic content and have decided on colors, fonts, and logos, it’s time to put this puzzle together! Make a layout for every page you intend on having, no matter how simple that page will be. I promise taking the time to do all of this planning will lead to a better thought-out website, and it will make your coding process more straightforward.

screenshot of all of my layouts planned in figma



You got this

This whole thing takes time. But once you have a solid design plan, it will be worth executing it and making it live. For me, it took around 25 days to go from nothing to deploying on glitteringkatie.com.

When I decided to redesign, I was ready to immediately get coding. But I made myself take the time to really think through my design. Honestly, once I had a design, I didn’t even want to code at that point. Ultimately the motivating factor for me wasn’t, “Wow, I’ll have an even nicer tech blog!” Instead, it was, “Wow, when I’m done, I’ll have better functionality to support posts about furniture flipping and random crafts!” If you’re putting in this hard work, know why you are doing all of this work!

I hope something in this blog post helped you! And stay tuned for some non-tech content in the future!


Source link

UI UX Trends 2021: Top 10 Trends Your Users Will Love

This article will examine what we think will be the UI UX Trends 2021. The year 2020 was extremely unstable year as the plague of covid was taking over the world and virtually all industries were affected some way.

UX refers to “user experience” and UI refers “user interface”. Both are interconnected and can’t be used in conjunction without the other. Review design and interface design are both closely connected. These are usually hired in conjunction and often used together.



Why Follow UI UX Trends?

Like every perspective, UX/UI also changes. Much like the rest of the world that changes, it’s not common to observe emerging trends all every day.

Designers must stay current with the trends at every opportunity they are able to. It’s no longer possible to ignore these trends and make outdated websites. Additionally, it’s not as effective to stay up-to-date with new trends in advance of your competitors.
It’s not important to focus on the patterns and trends in 2020 or 2019. The most crucial thing is to keep track of the patterns that are most likely to be advanced in 2021. It is essential to be prepared to invest your money in these trends.

With that said below are the most popular trends expected to take over 2021.



1. Illustration and animation that is unique

Digitally drawn or hand-drawn 3D custom illustrations, you can name them. The non-aligned shapes, the free element components, and the massive asymmetry don’t just make them stand out from their designs from others, yet also make for a warm and relaxing environment that provides an enhanced experience for the users. To make pages look attractive, the images are usually enhanced with intricate motion design.



2. Glassmorphism

Did you be aware of the latest trends in glassmorphism? (that’s right, neuomorphism’s not as trendy anymore). This is the most recent style within UI and is based around an effect that is known as blurring of the background which creates a “through the glass” look and feel of elements.



3. Login Without Passwords

Forgetting passwords is among the most grave mistakes that a majority of users make while using websites. This is the reason why the password reset feature allows users to sign into new accounts. Most passwords are made up of letters, numbers (both lowercase and capital letters) as well as special characters. This makes them difficult for users to remember. To fix this problem new UI styles have been used to provide a range of alternative ways for users to sign in to their account.
Some alternatives that could substitute password-free logins include the use of fingerprints or face recognition or even an PIN code!



4. Artificial Intelligence

AI is currently employed in virtually every item. It’s unlikely that AI can update designers but. Instead, it can be helpful and make our job easier. AI’s capacity to gather information (of massive amounts of data.) we’ll see more products that are customized specifically tailored to the needs of each client.



5. Augmented reality

In 2021, the emergence of new web design trends will require you to think beyond the conventional instead of staying within the grid. Do not be dependent on web interfaces that only cater to screens. It’s better to focus on the actions that appear to be happening in the real world.



6. Data Visualization

Data visualization lets users comprehend the information displayed on the internet platform in a short time. The most significant benefit is that everyone can comprehend the company’s operations and follow your company’s requirements. This can help turn potential leads to customers. This UI UX trend is expected to become a major trend in the coming years.



7. Dark Mode

The possibility of making use of the “Dark Mode” is growing with the emergence of the latest UI UX Trends. The mode is typically activated when daylight ends and darkness comes on. It’s been found that exposure to light is not very beneficial for the eyes. This is one of the factors that led UI UX designers to turn their focus to using dark mode.



8. Rise of the Video

Videos are a different UI UX style trend set to become popular in 2021. Videos assist users in comprehending the message they want to convey to users. They can also help to make the experience more enjoyable and enjoyable.



9. Blurred and Colorful Backdrop

Graphics with gradients were very popular in recent years and, even today, this trend continues to be popular. The growth of gradients has resulted in them becoming less complex in their design.

At first, designers employed only two and 3 shades to create linear gradients. The current UX/UI design utilizes more than 10 different colors to produce gradients.
Web sites are increasingly having vibrant backgrounds, with gradients that are more than three shades. In order to keep the main content on top, the images are made using blurred backgrounds.

The background is appealing but also subtle, which means the main message will not be in a position to escape the attention of the viewers.



10. Custom Navigation

The usage of custom navigations is expected to influence UI UX Trends 2021. If you utilize it properly it will be able to improve the navigation and the visuals are able to attract attention to the user and keep them interested. There are various types of navigational elements, along with obvious factors of navigation as well as invisible factors to navigate. The navigation menu should be designed to ensure that it flows seamlessly. runs effortlessly.



Final Thoughts

The 2021 trends in design will be focused on minimalism, simple UX design as well as interactivity UI design. The article offers a list of UI and UX design trends expected to continue at least to 2021. Similar patterns could be applied to web design trends.


Source link

The 3 Short Frontend tips for December



Help users with vision disabilities find a search

Usually we know how to place a search for users without vision disabilities. But how should we do that for users with disabilities?

There is a special search role in the WAI-ARIA standard that we should add for the form element. In this case screen readers will start to display search in the “Regions list” mode that is used by users for navigation.

Pay attention, if we don’t do that search will not be displayed in this mode. So it will hamper users start interaction with search. They will have to find a search using common keys. It’s much longer than if they use the “Regions list” mode.

A search is created using the form element with the search role is good solution



Thinking about a main and additional goal when we work with focus

Did you think sometimes about how better to move focus when users open elements such as modals or dialogs?

I think there is a main and additional goal when we work with focus. The main goal is what users want to do after moving focus for reaching their goals using a minimal number of actions. An additional is what they can do something else.

Let’s consider what I mean using the case of selecting a language on Booking. If we push the button of selecting a language we’ll see modal with languages.

Focus will move on the close button. Nice what we can close modal by pushing the enter key. But is that why we open the modal? No, we wanted to select a language. That’s the main goal. And closing a modal is an additional goal.

Now let’s look at what Booking suggests for selecting a language. If we use only a keyboard we have to use the tab, ↑ or ↓ keys to start moving between languages.

Then we push the same keys again until we find the necessary option. If we push the enter key we’ll select a language. Well, that’s a nice solution but I want to suggest another.

We have already identified that users open the modal because they want to select a language. It’s the main goal. So we should give that to them. I think we can do that if we move focus on the current language.

Then we should make the possibility of moving between languages using tab, ↑, →, ↓ or ← keys immediately. The selection of a language we’ll make using the enter key. Also, we’ll save the possibility of closing the modal using the Esc key like Booking made.

I hope I was able to pass on the importance of defining a main and additional goal when you work with focus. Please, think about it and your interfaces will be user-friendly.




A high-contrast background color is a simple way for improving content accessibility

In modern web design, we often meet with media content. Yes, that’s a great way to draw users’ attention. But we can make the mistake that will affect content accessibility.

Loading of media content takes some time. At this moment, elements might be mixed with the page background color. As a result, users can’t interact with them. They will be confused.

For fixing this problem, we should add a high-contrast background color using the background-color property to the element with media content. Thus users will see all content and can interact with it.

P.S.
❤ Thank you so much, my sponsors: Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten, Spiridon Konofaos

💪 Get more free tips directly to your inbox

👀 Also I tell stories from my career on Substack. Join my free newsletter, if you’re interested in my background


Source link

The Future of Coding is 'No Code'

What’s in your mind when you think about building some sort of Startup or App. Probably, your answer will be is to create a plan, deal with UX/UI and then start coding the software itself. So, the part of coding is one of the most difficult parts for many folks and there’s a solution! Called No-Code tools.



What is No-Code Revolution?

In the past, No-Code tools were used by developers to prototype their ideas and get a MVP (Minimum Viable Product) out quicker. But now these tools are more user-friendly and you don’t need to be a developer to use them! So, if you have an idea for website or app, don’t worry about coding and just go for it with No Code tools!

There are many No Code tools on the market but we’re going to focus on several of them. All of these platforms enable users without any coding experience to build a professional-grade web or mobile app. And even better? They’re all free to use!



No Coding = More Time for Creativity!

In this article, we’ve mentioned several No-Code tools which you can use to create a website or an app by yourself without having any coding skills. These apps are perfect not only for beginners but also for experienced non-software developers who want to be more productive in their workflow by creating something new faster than ever before. All these No-Code tools have been designed around user experience so that anyone could build a product even if they don’t know HTML/CSS or Javascript language at all – just imagine that!

So, don’t waste your time and start using No Code tools today to turn your idea into a reality without any headaches. And remember, the future of coding is No-Code so it’s time to jump in!



Webflow

Well, when we already discussed the Code Revolution and why you should pay attention to it, now it’s time for the services themselves. And the first one is Webflow that is a great builder for your website. It’s not something like Wix or builders like this, it’s like a Figma, however, with a logic implemented with design. It’s even better than WordPress

Also, Webflow has courses about Web-Design, Creating Portfolio, and UX/UI. So even if you won’t use it as a No Code tool you can use it as a free platform with courses.

And as I said, you don’t need to build 100% of your website by using this tool, you can make the main part and then replace or add something by using your custom code.

There’s another platform called Bubble.io, however, personally, I think that Webflow is better because it gives your more customization for your design, rather than Bubble.io which is more directed on the business sphere where the most important thing is a piece of information that you provides on your website



Bravo

The one killer feature that Bravo has is the implementation with Figma. You can make a design of your app in Figma and then just past a link and it will understand which element is going to do and that’s all, you have a fully working Mobile App.

And it’s free, you don’t need to pay anything. I honestly think that this one is a great No-Coding app because it helps people to think more about the creativity and the idea of the project, so there will be more folks that will want to create on their own

No coding is a great thing, but No-Coding + Figma = Awesome!



Airtable

This is an app that will help you and your co-workers do your work better by creating custom interfaces that give each and every teammate the relevant information they need, and a simple way to take action.

Airtable is a great No-Coding tool that will save you time and provide you with the freedom to work on what’s important. It has pre-built templates for project management, sales pipeline reporting, research library management – so basically everything! And again it’s free if your team isn’t huge (up to 32 people). You can check how many users are currently using Airtable.



Stackla & Storedot

We’ve talked a lot about No Codings but now it’s time to talk about Stackla and Storedot. These No Code tools are used for creating a digital asset, mostly for social media.

Stackla is an AI-driven content marketing platform that enables brands to discover and curate user-generated content from around the Web and social media, then publish it across all channels in real-time. It also has a great feature – you can use your own custom code if you want something special

Storedot is a No Code tool that helps you collect, manage and share your favorite web articles, videos, tweets or any other type of online content with anyone in just a few clicks. You don’t need an account, just enter the URL into the box on their website and it will download it in a format that you can easily send in an email or print out, for example. No Coding skills required 😉



Conclusion

So far we’ve seen how No-Code tools can help us build amazing things without having to learn complex coding languages. These tools are perfect for beginners and experienced developers alike, and they’re free to use! If you have an idea for a website or app, go ahead and try out one of these platforms – you won’t regret it!


Source link

How to add Lottie animations to SwiftUI

Using Lottie animations is an easy and popular way to add animations to your app to have that modern look and feel. All sorts of companies use Lottie animations, from startups all the way to the big boys, such as Google, Microsoft, Spotify, and Netflix to name the few.

Using LottieFiles you have a choice to make your own animations using Lottie Editor, buying animations from creators on Lottie Marketplace or using Free Animations to get LottieFile(s) completely free of charge to add them into you project.



UIKit and SwiftUI interoperability

Unfortunately, Lottie animations cannot be added directly to SwiftUI view without some work prior to that. In order to add Lottie animation to SwiftUI, you need to implement UIViewRepresentable protocol which is a wrapper for a UIKit view that you use to integrate Lottie view into your SwiftUI view hierarchy.



Show me the code

Let’s get straight to the point, just make sure you previously installed lottie-ios library using your preferred package manager, whether it is CocoaPods, Carthage or Swift Package Manager.

Add new file name LottieView and add following contents:

import Lottie
import SwiftUI

struct LottieView: UIViewRepresentable 

    let fileName: String

    private let animationView = AnimationView()

    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView 
        let view = UIView(frame: .zero)

        animationView.animation = Animation.named(fileName)
        animationView.contentMode = .scaleAspectFill
        animationView.loopMode = .loop

        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)

        NSLayoutConstraint.activate([
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor)
        ])

        return view
    

    func updateUIView(_ uiView: UIViewType, context: UIViewRepresentableContext<LottieView>)  

All you need to do know is add following code to your SwiftUI view: LottieView(fileName: "your-file-name") and that’s it, you have fully functioning Lottie animation inside SwiftUI view.



How do I make it to play or pause

In order to make animation play or pause, a bit more coding is required. It is required to provider Coordinator to your LottieView.

What is Coordinator? Let’s see what Apple says:

The system doesn’t automatically communicate changes occurring within your view to other parts of your SwiftUI interface. When you want your view to coordinate with other SwiftUI views, you must provide a Coordinator instance to facilitate those interactions. For example, you use a coordinator to forward target-action and delegate messages from your view to any SwiftUI views.

Let’s see updated code:

import Lottie
import SwiftUI

struct LottieView: UIViewRepresentable 

    let fileName: String
    let isEnabled: Bool

    private let animationView = AnimationView()

    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView 
        let view = UIView(frame: .zero)

        animationView.animation = Animation.named(fileName)
        animationView.contentMode = .scaleAspectFill
        animationView.loopMode = .loop

        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)

        NSLayoutConstraint.activate([
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor)
        ])

        return view
    

    func updateUIView(_ uiView: UIViewType, context: UIViewRepresentableContext<LottieView>) 
        if isEnabled 
            context.coordinator.parent.animationView.play()
         else 
            context.coordinator.parent.animationView.stop()
        
    

    class Coordinator: NSObject 
        var parent: LottieView

        init(_ parent: LottieView) 
            self.parent = parent
        
    

    func makeCoordinator() -> Coordinator 
        Coordinator(self)
    

And this is it! You can now pass isEnabled Bool value to LottieView to make it play or pause.



One final gotcha

If you are using TabView withing your SwiftUI application and you are switching between tabs you will notice that animations won’t start playing automatically when you switch back to view with animations.

All you must do is add animationView.backgroundBehavior = .pauseAndRestore to makeUIView(context:) method. Now animations will pause and restore as the code itself suggests.



Conclusion

Thank you for reading and I hope this article was useful to you! In conclusion, this article went over how to add Lottie animation(s) to SwiftUI view, make it reactive if needed and how to use Lottie animations with TabView.

If you like my content and find it useful, please consider following me here on DEV Community. If you are feeling extra generous, please consider buying me a coffee.

Connect with me on LinkedIn.


Source link

Technical SEO Advice from an Industry Veteran

It’s not that often that you meet experienced marketers who are nice people and also good at their jobs at the same time.

Dave Davies is an SEO veteran we featured in our 25 Technical SEO Experts on Twitter roundup who has been in the industry for longer than almost anyone. Davies has been writing about SEO topics as a contributor to Search Engine Journal and Search Engine Watch for over a decade. He is the founder of Beanstalk Marketing and is currently the Lead SEO at Weights & Biases.

Apart from being a skilled SEO professional, Davies is also knowledgeable about web development and machine learning topics. As such, Davies has a more intimate understanding of the relationship between internet users and search engines better than nearly anyone else in the field today.

Davies isn’t just an SEO expert with technical chops either – he loves sharing his knowledge and using his experience to make the industry better for everyone. That coupled with his affable personality and sense of humor make him widely respected in the SEO world.

We sat down with Davies to ask him about technical SEO, the relationship between Google and smaller brands, and where he thinks the next core algorithm update might have in store. Here’s what he has to say.

Screen Shot 2021-11-30 at 10.02.05 PM.png

I. Google’s official stance is that Googlebot can crawl and index Javascript without any issues. The available studies out there show that although technically true, it takes them longer and uses more resources – meaning Javascript SPAs exhaust their crawl budget quickly.



You’ve been in the SEO industry longer than almost anyone. What is your opinion on this?

They are wrong.

I am right now working for a company that has a SPA website that uses prerendering and let me tell you, whenever the slightest thing goes wrong I see it very clearly in the rankings and the caches.

I noticed just a couple of months ago a hiccup at Google with prerendering, which was followed pretty closely with a lag in the coverage reports and a form to submit indexing bugs.

In short, I do think they’re working on it – but they’re still a ways off from this being true, and I’m not sure that the solution will ever be crawling.

II. In recent years it’s become harder and harder for small businesses and startups to get visibility on Google SERPs because of algorithm changes that favor established brands that already have an audience and a web presence.



What can Google do to better support smaller businesses and startups and be their advocates?

While I understand the context of the question and sentiment, when I really think about it I’m not sure that’s true.

Yes, when we’re fighting battles with national brands on their turf (national SERPs) it does often come to this, but Google is giving local businesses a lot of new tools and visibility options. The national brands can play there, as applicable – but it’s a lot harder for them to stand out and they don’t seem as favored by traditional metrics.

So if small businesses focus on local markets, which many do, they have serious advantages if they know how to take them. For smaller businesses tackling national markets against sites like Amazon and Walmart, it is true they’ll be fighting an uphill battle.

They need to find a sub-niche to start, where keywords are easier and start there. In that context, not a lot has changed over the years.

III. Many SEO professionals make the mistake of making the Google gods happy at the expense of user experience.

This is a fundamentally flawed approach because Google’s mission statement focuses on the user – to provide the user with the best possible result for a given query.



How do we solve for the user instead? How do we make that user-first mentality the conventional wisdom in SEO?

I have a very short answer to this question because I think we often make it more difficult than it has to be.

Create the content the user wants. Deliver it in the format they want it in. And make sure Google understands that you’ve done that.

To expand a twitch:

Create the content the user wants – Think about the user as the person entering the query, not your customer. Think about all the things a person entering that query might be looking for and deliver as many as you can while keeping the content clean. With that, you maximize the probability that you will satisfy a user, and that’s what Google wants you to do.

Deliver it in the format they want it in – If they want a video, give them a video. They all want it fast. They all want it secure. They all want to be able to access it on any device from any location. Give people what they want, and you’ll be ahead of the next rule Google throws at you.

And make sure Google understands that you’ve done that – Make sure you link between your pages logically, add schema where applicable, etc. You’ve done the work for the user, do a bit more to make sure Google understands it, and you’ll be well on your way.

IV. Even if we take Google’s word for it that their web crawler can crawl and render Javascript, there’s no guarantee that websites made using Javascript frameworks will be well-optimized for both users and search engines.



What is the single most important thing that webmasters and technical SEO experts can do to make sure their Javascript web applications are well-optimized for search?

Monitor. Monitor. Monitor.

Set up alerts on key pages to run daily and alert you to an unexpected drop.

Manually check pages not just with a crawler, but inspect the cache and inspect the code produced by testing your URL in Google Search Console – see how it renders. Check a variety of pages and page types. Just because one part of the page is fine, doesn’t necessarily mean it all is.

Beyond that, make sure you have a good dev and good technology.

V. You’ve been covering Google core algorithm updates on Search Engine Journal for years.



What do you anticipate the next core algorithm update to focus on, and why? What’s missing in the way Google ranks and categorizes web pages that isn’t there already?

This question really got me thinking.

I think as far as core updates go, the next series will likely focus on infrastructure and keeping an increasingly complex arrangement of pieces working together.

We’re watching MUM starting to get used in the wild, and we’ve heard about LamDA. We’ve read about KELM and the potential it has in creating a more reliable and “honest” picture of the world.

What we don’t read a lot about (mainly because it’s boring and we don’t want to) is the technology behind it. KELM would add verified facts to a picture of the world Google has created from a different system (MUM, for example). Great, but how do you get those two parts communicating and sharing information?

This is, to me, the biggest of their challenges and why I suspect it will be the focus on their core updates for the foreseeable future.

I’ve started reading some of the papers on some of the technologies behind the technologies we hear about.

How ByT5 can improve understanding content in a noisy environment (where noise may be something like misspelled words on social media, etc) by moving away from tokens and working byte-to-byte which required a lot to overcome the hurdle of ballooning the compute time.

Or how Google FLAN improves zero-shot NLP across domains (where domains are not sites, but rather tasks) so a system trained on classifying sentiment (for example) can be used to improve a translation model with little additional training required for the new task.

This, in my mind, is what the core updates need to deal with.

VI. Many web developers lack even a basic understanding of SEO. That creates problems down the line when SEO problems become ignored or buried under legacy code which makes them harder to diagnose and fix.



As an SEO veteran with web development credentials, what do you think we can do to bridge that gap? How can web developers make sure that an SEO infrastructure is in place from the moment they begin development? On the other side, what can marketing teams do to make the developers’ jobs easier?

I honestly believe it’s a two-way street.

When I was cutting my teeth I used Dreamweaver 4 to put content into tables and upload them page-by-page. I learned a lot on my way, but the pace of change in dev and SEO meant I needed to choose a path and I was never a developer so I stuck with SEO.

Yes I can still throw together a decent WordPress site, and probably edit the themes without breaking anything, but I wouldn’t consider myself even an intermediate dev. And it’s great that I know that.

That history and ability though, I think makes me a bit better than some at understanding how to communicate with developers.

I can’t count the number of times I’ve outlined my needs and how to solve a problem to a capable developer, only to have it bite me in the butt when they followed by instructions to unexpected results.

Now I isolate what the problem is, describe and send screenshots of how I know and how I’ll know when it’s fixed to the developer, and while I might include a potential fix I found – I try to be clear that it is for illustrative purposes only.

9 times out of 10, if you are working with a good developer they’ll be able to think of solutions you never would and often solve additional problems you might not have known you had.

Respect them, respect their knowledge and they will respect yours.




Source link