Deploying CSS Logical Properties On Web Apps

Original Source: https://smashingmagazine.com/2022/12/deploying-css-logical-properties-on-web-apps/

Localization is one of the most interesting fields in terms of user interface: text length may be different depending on the language, default alignments for text might vary, reading direction can be mirrored or vertical, and so many other different cases. In short, it’s an incredible source of diversity, which makes our interfaces and our front-end work way stronger, more reliable, and more challenging.

The Need For Right-To-Left Interfaces

Most languages, like French or English, are meant to be read for Left-To-Right (LTR). However, in these cases, some languages like Farsi (Persian), Arabic, and Hebrew have a different reading direction — Right-To-Left (RTL).

The question is how can we adapt our interfaces to this huge change?

Before CSS Logical Properties

Before CSS Logical Properties, we could make RTL adaptations with different methods:

Adding a dedicated CSS file only for RTL surcharge/layout;
Surcharging only parts that need to be adapted in the same CSS, e.g. [dir=”rtl”] .float-left { float: right; }.

Even if these methods are doing the work — I used the second one to create an Arabic version of the Stand Up for Human rights website a few years ago — both of them are quite sub-optimal:

You need to maintain another file for the first one;
The CSS file for the second one is a bit heavier, and there might be some issues to deal with (specificity, more properties to add, and so on).

For sure, we can create huge machinery with Sass to produce several builds and use some tools like UnCSS to remove what is not needed, but let’s be honest: this is boring, and it can lead to “non-natural” pieces of code, like in the previous example.

Why CSS Logical Properties Are A Perfect Fit/Promising

This is where the CSS Logical Properties module comes into the game. The main idea of this CSS module is to have a logical abstraction that enables us to produce one layout that will adapt itself depending on the text direction and writing mode (properties like writing-mode, direction, and text-orientation, or dir attribute in HTML). This gives us possibilities like horizontal right-to-left or left-to-right, vertical RTL, and so on.

Implementation In Practice
How It Works

There are a few concepts to understand, already explained by Rachel Andrews here in “Understanding Logical Properties And Values”:

We no longer think in terms of left/right but start/end (the same goes for top/bottom):
We no longer say width or height but instead inline and block — quite classical. (You’ve probably heard of default inline or block elements. 😉)

This idea of start/end is not new. You use it probably every day with things like justify-content: start.

Congratulations, you now know — almost — everything! 🎉 Let’s see some practical examples.

Examples

Let’s start with the basics:

Classical Property
Logical Property

width
inline-size

height
block-size

min-width
min-inline-size

min-height
min-block-size

max-width
max-inline-size

max-height
max-block-size

Margins follow the same logic:

Classical Property
Logical Property

margin-top
margin-block-start

margin-bottom
margin-block-end

margin-left
margin-inline-start

margin-right
margin-inline-end

The same goes for padding. Let’s move to the positioning:

Classical Property
Logical Property

top
inset-block-start

bottom
inset-block-end

left
inset-inline-start

right
inset-inline-end

Simple, isn’t it? float, text-align, and border follow the same path:

Classical Property/Value
Logical Property

float: left;
float: inline-start;

float: right;
float: inline-end;

text-align: left;
text-align: start;

text-align: right;
text-align: end;

border-top
border-block-start

border-bottom
border-block-end

border-left
border-inline-start

border-right
border-inline-end

I won’t detail some others like resize or scroll-margin-top, but instead, let’s look at the particular case of border-radius:

Classical Property
Logical Property

border-top-left-radius
border-start-start-radius

border-top-right-radius
border-start-end-radius

border-bottom-left-radius
border-end-start-radius

border-bottom-right-radius
border-end-end-radius

A bit different, but easily understandable anyway.

Some possibilities with values are really cool — you can simplify some notations. Here are some further examples:

Classical Property/Value
Logical Property

margin-left: auto;
margin-right: auto;
margin-inline: auto;

margin-top: 0;
margin-bottom: 0;
margin-block: 0;

margin-top: 1em;
margin-bottom: 2em;
margin-block: 1em 2em;

top: 0;
left: 0;
bottom: 0;
right: 0;
inset: 0; 🎉

left: 10%;
right: 10%;
inset-inline: 10%;

This is pure gold in the best world, right? Less code for perfect support of RTL languages! 🎉

Now I’m sorry to brush away some of the stars in your eyes — there are indeed some limitations.

Some Limitations
Missing Syntaxes

CSS Logical Properties are quite new, even if the support is good on recent browsers. However, the CSS Logical Properties module is kind of “young” and needs a level 2.

To give a simple example: our toggle component is using CSS transforms between different states (loading, active, and so on), mostly because transform is a reliable way to have fluid transitions or animations.

So, we have something like this:

.element {
transform: translateX(#{$toggle-width – $toggle-width-button});
}

Unfortunately, there is no flow-relative syntax for transform. So, we have to do something like the following:

[dir=’rtl’] .element {
transform: translateX(-#{$toggle-width – $toggle-width-button});
}

If you want to get an idea of missing stuff like this, you can check opened issues on CSS logical props.

Shorthand Properties

Some shorthand notations are not supported for the moment, like the 2, 3, or 4 values for margin:

Classical Property/Value
Logical Property

margin: 1em 2em;
margin-block: 1em; / top and bottom /
margin-inline: 2em / left and right /

margin: 1em 2em 3em;
margin-block: 1em 3em; / top, bottom /
margin-inline: 2em / left, right /

margin: 1em 2em 3em 4em;
margin-block: 1em 3em; / top, bottom /
margin-inline: 4em 2em / left, right /

Don’t use these classic examples with logical needs. You will encounter issues as it’s actually not working. It’s better to be explicit. Also, it’s more readable, in my opinion.

Showing Some Real Issues And Some Solutions
Images Where Reading Direction Is Important

Some images have a direct meaning. Let’s take the example of theme cards:

In this case, if we just apply RTL stuff to this, we would get this:

The order is RTL, but each image does not look like the interface of an RTL user. It’s the LTR version! In this case, it’s because the image reading direction conveys information.

We have a CSS class helper that makes it really simple to achieve this fix:

[dir=”rtl”] .on-rtl-mirror {
transform: rotateY(180deg);
}

This also applies to any image with a reading direction, like an arrow or double chevron icon showing or pointing to something.

Styles/Values Computed Via JavaScript

Let’s imagine you have a plugin that calculates some positioning in JavaScript and provides the value you can use in JS or CSS. The dropdown library that we’re using provides only the left value in both RTL/LTR contexts, and we transfer to CSS using a CSS Custom property.

So, if we were using this with Logical Properties, i.e. inset-inline-start: calc(var(–left) * 1px);, we would get the following by clicking on the user dropdown:

The solution is simple here. We keep the non-logical property:

/* stylelint-disable */
top: calc(var(–top) * 1px);
left: calc(var(–left) * 1px); // JS provide left value only
/* stylelint-enable */

And we disable our linting for this particular case.

Mixing RTL And LTR content

Even with the best CSS modules, anyone who has already made some RTL adaptations will say that mixing RTL and LTR content sometimes (often) gives crazy stuff.

Let’s take an example on Proton Drive with a component called MiddleEllipsis. The goal of this component is to apply ellipsis before the extension of the file to get something like my-filename-blahblahblah…blah.jpg.

Nothing crazy: we split the content into two parts and apply text-overflow: ellipsis on the first one. You can check the source of this MiddleEllipsis component.

Let’s apply some good ol’ RTL — we should then get the following:

Strange, right? This is simple to explain, however:

MiddleEllipsis structure is RTL;
And we inject LTR content. (Remember, we did RTL-cut this LTR content.)

The browser does its best, and what is displayed is not wrong from its point of view, but this makes no sense to a person. In this case, we chose to keep the LTR display to keep the purpose of the filenames but aligned it to the right:

Searching For Native LTR Patterns

The MiddleEllipsis example showed that if user-generated content is LTR, then it’s better to display it as LTR.

But we can wonder if there are some patterns that are naturally LTR. The short answer is yes. Below you can find an example.

Phone Number

The phone number might be the most obvious case here as it’s usually using western numbers, which are meant to be read LTR.

If we apply Logical props directly to it, it might give the following:

While it’s technically not false, it’s a bit weird to display +33 6 12 34 56 78 like this. In this case, we decided to keep the LTR alignment by default to avoid this strange result.

We have the same case for a 2FA input using western numbers. We don’t yet have the case but imagine a 4-part input to enter an IP address. This would not make sense to display it fully RTL as people would understand 1.0.163.192 instead of 192.163.0.1.

Compatibility

The biggest issue we faced was mostly in regards to compatibility. This can be seen on Can I Use tables for Logical Props:

If the target is only recent modern browsers, there is no problem. But if there is a need for older versions of Safari, for example, the support is pretty bad. And in this case, CSS Logical Properties are not gracefully degraded. Thus everything might look broken.

Several options are possible:

Serve a CSS build for modern browsers and another one for older ones;
Transpile everything for each case.

In Proton’s case, as we were not totally ready to ship an RTL language when we merged it, and for other reasons, the decision was taken to transpile everything to good ol’ classical CSS properties. Recently, we found a solution for one case that did need RTL support for Farsi language (VPN account):

We build two CSS files: one modern with Logical props and one legacy;
We load the modern one;
We test the correct support of border-start-start-radius;
If it’s not supported, we fall back to legacy.

Conclusion

Even if absolute perfection is out of this world, moving to CSS Logical properties is a really interesting move and a good bet for the future: we write less code with these CSS Logical Props, and we reduce the amount of future work by using them, so it really goes in an exciting direction.

As the last takeaway, and even if it would need more work, we did some tests of a vertical RTL display to test further CSS Logical properties.

Looks quite interesting, doesn’t it? 😉

Related Resources

“W3C i18n resources”, W3C.org
“RTL Styling 101”, Ahmad Shadeed
“What Languages Use RTL Scripts?”, Richard Ishida, W3C
“Opened Issues On CSS Logical Props”, W3C, GitHub
“CSS Logical Properties and Values”, MDN Web Docs
“Unicode Bidirectional Algorithm Basics”, Richard Ishida, W3C
“CSS Logical Properties and Values Level 1,” W3C Working Draft
“Multilingual Desktop Publishing: Tips & Tricks #3”, Kirill Fedotov, InText
“Understanding Logical Properties And Values”, Rachel Andrew

The Top 10 Security Vulnerabilities for Web Applications

Original Source: https://www.sitepoint.com/top-app-security-vulnerabilities/?utm_source=rss

The Top 10 Security Vulnerabilities for Web Applications

It’s important to consider the security of the applications you build. Learn about the current top ten security vulnerabilities for web apps.

Continue reading
The Top 10 Security Vulnerabilities for Web Applications
on SitePoint.

Best IDEs and Code Editors for Python

Original Source: https://www.sitepoint.com/best-python-ide-and-code-editors/?utm_source=rss

Best IDEs and Code Editors for Python

For developers, a good IDE is like a superpower. View the top Python IDEs and code editors as judged by the Python developer community.

Continue reading
Best IDEs and Code Editors for Python
on SitePoint.

Useful Accessibility And Usability Examples To Help Improve Your Designs

Original Source: https://smashingmagazine.com/2022/12/useful-accessibility-usability-examples-help-improve-your-designs/

This article is a sponsored by Extensis

This article is ideal for your lunch break. It highlights five quite straightforward (dare I even say simple) graphic communication problems. I then expand on them, showing the problem, remedy, and what can be learned. It will give you an insight into accessibility, also the easily looked-over area of access structures, and usability showing that they are a major factor in so many things, like design, communication, technology, objects, and systems. But we are not done there — I will also help you think about some new ways to make your designs much better and help you consider some aspects that you have never even considered before on your current projects, right now, today.

Adding A Basic Scroll Bar To A User Interface Menu Makes Items Easier To Find And Use

If we look at the menu by clicking on the Fonts drop-down menu in Microsoft Word Mac version 16 or any version of Microsoft Word, we can see that everything looks normal:

There is a list of fonts installed on the computer in alphabetical order. However, when we go to perform a task using the menu, like going to the font Verdana at the end of the list, we have to move our mouse all the way down to the bottom of the menu list, then hover over the down arrow, then wait 3 or 4 seconds, or more, until it gets to the bottom of the menu, near V, before we can select Verdana. Yes, we could also type the font name at the top, but maybe you are not sure what font you want to use or what it is called.

Problem

It takes many seconds to get to a font that is below B or at the end of the list; the current solution does not allow quick access. Furthermore, if you make a mistake, or your mouse goes off the menu, or if you are not able to control the mouse cursor that well, it will cause the menu to close, and then you have to start this interaction all over again, because if the mouse goes off or clicks out of the menu, it closes it. These issues are certainly not ideal for most of us who are busy and who want to get things done quickly and efficiently, like designers.

The problem of not having a scroll bar is often experienced in website vertical or side-navigation menus (sidenavs). The side-navigation menus might not even need to have a scroll bar, as the content inside the menu is not larger than the vertical screen height. However, if the website or smartphone browser is made a lot shorter vertically in height, there is often no scroll bar shown. So, you cannot scroll to the end of the side navigation’s content within the menu, and you might not even know to try to scroll more vertically, as no scroll bar is shown. Not ideal or great, hey?

Solution

One of the things that would be really easy to do, and is found a lot in software user interfaces and websites, is to add a simple scroll bar to the right of the font menu. How difficult is that to do? Not very. This would allow users to scroll more quickly to the font they want, reducing the time to find and select a font in the menu by at least half (50%). Why do they not do this? I am not really sure.

What Can We Learn?

If the software developers and user interface designers used a scroll bar to the right of the font menu, it would allow users to find any font much quicker, increase workflow productivity, reduce stress, confusion, and enable a much quicker and better interaction. Audit, test users, and find out what people want to do, or else you cannot be sure you have effectively designed the thing. Maybe you are not even aware of the ways users want to use your design, communication, object, or system. That is why it is so important to understand the following:

What people will want to do with your thing;
Different people will want to use your design, information, and communication in different ways;
Different people will want to achieve different things.

Better Font Software = Faster, Easier, And Better Results

As another example, if we compare font organizing software like Font Book on a Mac or the Fonts option in Control Panel on Windows. Yes, we have these two types of software, but do you actually use them to install fonts, or do you install them manually by copying the font files into the Fonts folders? Do you use them to view, compare, and get information about fonts? Can you use this software to manage, organize, and share fonts for your design team? Probably not, as they lack the features.

Well, the creative folks at Extensis have created just what you need: Connect Fonts. It is clearly better than Font Book on a Mac or the Fonts option in Control Panel on Windows for a number of reasons:

It has a better display of a font’s glyphs;
It shows the name of the glyph, Unicode value, and Glyph ID;
It has a better grid display, QuickType, Waterfall, ABC 123, and punctuation (many of these options are not available in Font Book);
Connect Fonts is a more advanced and technology-advanced software than Font Book on a Mac, or the Fonts option in Control Panel on Windows.

Here are additional features not offered by Font Book on a Mac or the Fonts option in Control Panel on Windows:

Use a font vault that is a single, secure, managed repository for all your fonts;
Sort options for all fonts (Name, Postscript Name, Type, Foundry, Class, Family, Version, Font Sense, Classification, Activation, Favourites, Date Added, Location);
Add Google Fonts;
Manage Adobe Creative Cloud fonts;
Zoom in and out;
All glyph panels and search;
Glyph information (Name, Unicode, Glyph ID, Keystrokes);
View categories of glyphs (Entire Font (123 Glyphs), Alphabetic Presentation Forms, Basic Latin, Combining Diacritical Marks, Currency Symbols, Cyrillic, General Punctuation, Geometric Shapes, Greek and Coptic, Latin Extended Additional, Latin Extended-A, Latin Extended-B, Latin-1 Supplement, Letterlike Symbols, Mathematical Operators, Number Forms, Spacing Modifier Letters, Superscripts and Subscripts);
Desktop and online in browser versions, both connected;
Cloud libraries and synchronize fonts;
Setup team libraries across desktop and online versions;
Share any digital files and documents;
Font analytics and reports;
Full admin account settings;
Very useful for large organizations to control fonts available for use and to manage permissions and rights;
Add tags.

Also:

Works with Adobe Creative Cloud, Sketch, Affinity Designer/Photo/Publisher;
View and preview fonts (Tile, QuickType, Waterfall and customized Waterfall, ABC 123, and punctuation).

Use ‘Access Structures’ To Excel Your Communication Success

An annual review gives interested people information about the business, charity, or organization, promotes what they do, and showcases what they have done in the last year to shareholders and other interested people. We designed an annual review (a printed publication showcasing a charity’s achievements, news, and financial activities for the year) more than ten years ago.

Problem

One of the standout issues that we soon realized from reading, laying out, and designing the annual review, was that there were many mentions of different towns within a country, mentioned throughout the text in the annual review, that the charity supports and works with. However, there was no easy or obvious way to know where they were or how to envisage where they were.

Solution

What was missing that the client had not done or envisaged in the past? A map on the inside back flap of the publication showing where the different towns were within the main country. It is not rocket science — maybe even just good old common sense.

What Can We Learn?

Can you see what we are doing? We tried to envisage and dig out what people will want to do with the thing and see if there is anything we can do to make the communication better, more accessible, and usable, and to better describe and help people to use the annual review. The annual review could have been an electronic PDF or HTML — the same problems exist whatever media. But would you have envisaged or thought about adding a map that the client never even thought about or even asked for? Sometimes, designers have to go the extra mile and push the boat out for their clients in need.

This issue of making information easier to understand and consciously helping people to understand and use it by adding clever features, in this case, a map, has to do with the area of accessibility. It could easily be considered usability because it makes the information and publication more usable; however, it is more about the area of accessibility. Being even more precise and specific, it has to do with things called access structures, as highlighted in 1979 by information designer and educator Robert Waller who runs the Simplification Centre and who has been the Professor of Information Design between 2007–2011 at the well-known Department of Typography & Graphic Communication at the University of Reading in the United Kingdom, just outside London. In the JS Party (Episode #36) podcast Suz Hinton, Safia Abdalla and Kevin Ball have also highlighted that there is more to accessibility than a disability people may have, and what devices they may use to help them.

Access structures are not commonly talked about in the now huge and popular world of accessibility. Yes, we talk of people, their physical issues (vision impairment, aging, dyslexia, physical disabilities, and so on), or what supportive devices they may use to make things easier (magnifying glass, screenreader, vision impairment stick, and so on), or even what legal issues and implications there might be because of bad accessibility. But we rarely talk about adding elements like access structures to help people with their content comprehension, processing and reading style strategies, such as:

Browse;
Skim/preview;
Search/scan;
Intense study;
Review.

And to just expand a bit more (if I may?), maybe you have used the audio hosting website SoundCloud. Among many of its great features, it has a search option just the same as any other search option, a horizontal box, then a search button (so nothing unusual or out of the ordinary here yet). It allows users to search through the whole website and content rather than having to go through and read millions of web pages (well, you knew that anyway). Expanding a bit more, when you search, it of course, returns the search results in a vertical list, just like a search on Google, Microsoft, and Twitter. However, on the left of the search results webpage are some really interesting and very useful search refinement options, as follows:

Everything
The user’s search term searches through everything and the below.
SoundCloud Go+ tracks
If selected, will only search through this offline and ad-free listening service from Soundcloud. There are then two further sub-search filter options:
Added any time,
Any length.

Tracks
Apply user’s search to just audio content. There are then two further sub-search filter options:
Added any time,
Any length,
To listen to.

People
Apply user’s search to just people, for example, user/profile account names. There are then nine further sub-search filter options that somehow seem to know the countries associated with your search:
Location. (9 country names associated with your search.)

Albums
Apply user’s search to albums, for example, collected tracks within a grouped album option. They are then filtered by tag options:
Electronic,
Techno,
Hip-Hop & Rap,
Drum & Bass,
House,
Ambient,
Electronica,
Dance & EDM,
Deep House.

Playlists
Apply user’s search to user-curated playlists collection, once again with the previous filter by tag options:
Same as previous.

So, you might think, well, this is all fairly standard and default stuff. However, not only is a user able to search for something; they are then given many very handy and useful sub-access structures that are very helpful in allowing them to further refine and edit their search term. I cannot stress how useful and important this is. This is basically the definition and whole bowls of what design, accessibility, usability, information, and communication are together.

Think about it. What would you do, and what would the result be if you could only perform a search, i.e. just search for something and then had no further refinement options? Users would not able to further refine what they are trying to do and achieve.

Providing An Electronic Business Card Increases The Chance Of Being Contacted And Getting New Business

I run a graphic communication design and text editing business in the United Kingdom called User Design, Illustration, and Typesetting, working for book publishers and also other types of organizations. We also do information design, user testing, website design, and research. We contact quite a lot of art, design, and production managers at U.K. book publishers, and one of the things we realized about seven years ago, is that they get a lot of emails every day from people offering the same services and making the same inquiry as us.

Problem

We realized that we need to increase the chance and any chance of our business’s details being used and spread, at and within their organization, and by whatever communication method they use, typically a computer, from staff-to-staff or colleague-to-colleague, to ultimately increase the chance of them contacting us (this is the goal anyway while the reality is another matter, but keep reading).

Solution

What we did, and it is really simple and easy to do (but we hardly ever see anyone do it), we made a link available to a digital business card in PDF, PNG, RTF, and vCard formats, on our homepage and contact us webpages. Do you provide a business card on your website, portfolio, or client’s website? Probably not. It is these types of things we need to try and realize and find out as designers because it improves the chances of communication success, and the ultimate end objective that was to get people to make an inquiry and contact us (an action).

What Can We Learn?

By making our main contact details more easily available and reusable, and in different electronic formats, it makes it quicker and easier to share and exchange our details, and also in different types of software (remember, not all of us like to use the same software program or system) thus leading to more chance of people in organizations contacting us (well, I have already said that three times). Would you have thought of this? How can you apply this to the project you are currently working on? Furthermore, the next important question is how can you measure if it is working and having an impact, or indeed if it is not? It is very important in design and communication to actually know the following:

What is working and what is not;
What areas could be optimized and what areas could be better;
Or what areas are not working well and are underperforming.

Basing design success measurements on what people think or feel is highly subjective, and soooooooooo last century.

The Fastest Internet Speed In 2022 Is Still 4 kbps

Current times in 2022 are challenging throughout the world (there is no denying that). Over the last few years, we have noticed the truly awful impact, performance, and results of websites for users, because of lazy loading images, infinite scroll, and content shifting on page load to save on internet data bandwidth usage — both on the user’s end and server-side (that delivers the website).

Problem

In essence, lazy loading means that an image or content will not be loaded until it becomes available or requested by the user in the visible screen area. Because of this lazy (late) loading, users frequently have to wait a few seconds for content to load, even with today’s amazing technology.

Infinite scroll is essentially the same principle as lazy load images, but the non-visible vertical webpage content not in the screen’s visible screen area, is not loaded until you scroll down. Lazy load can also be used with painful pagination features (like go to page 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 as seen on large e-commerce websites and as Vitaly Friedman has outlined in his article, “Perfect Infinite Scroll UX”).

Content shifting on page load basically refers to a mixture of lazy loading content (text, images, and webpage layout) being delayed and loaded late, causing the content, when it does load, to load late, shifting the vertical and horizontal height of the web page’s content, cause elements and call-to-action buttons to shift and move around, as also highlighted by Michael Scharnagl on Smashing Magazine. This issue is especially problematic if you are trying to work quickly on a slowish or sluggish machine or device. However, not even a fast machine seems to make a difference regarding this issue.

All of these three issues create really bad user interactions, especially with longer-length web pages, although they are promoted and regarded as good webpage performance techniques.

Solution

Give people the content when it should be there and when they need it, as fast as you can. I understand that for very long webpages, some off-visible screen lazy loading and infinite scroll could be beneficial to save on unnecessary loading of content. But for everything else, just give it to users as fast as possible experience. We have incredible technology these days, and let’s not over-design and overthink.

What Can We Learn?

It could be said that when using lazy loading or infinite scroll in 2022, we are still dialing up with 4 kbps modems just like we did back in the year 2000. The amount of times and the delivery of information and images is the same: very, very slow. Nothing has changed. We are still looking at blank or block-colored images waiting for them to load… while 20 years of the internet have passed. The average speed of a computer and mobile internet in 2022 is 30.78 mbps, and we are still getting the same performance as in the year 2000 — as if on 4kbps modems. User experience is what matters, not technical wizardry.

Total Overload Of User’s First Website Interaction

Problem

Another example of bad usability is webpages that have very demanding first-visit user requirements. I am sure you all experience and struggle with the following on a daily basis (maybe you are even doing it now, arghhhh go away cookie policy box? Yes, no?):

Cookie policy “accept/deny warning box” pops up when you 1st visit a webpage that distracts and blocks natural use.
Email newsletter box pops up asking if you want to subscribe. That is another thing you have to do, even before you have started to use and read the webpage!
A “do you want to receive update/news notifications” box appears.
“Do you want to allow or block access to your physical location” box appears.
Another box appears asking if you want to save 50% if you order in the next three days.
A chat box appears asking if you want to chat with someone [well, maybe, but not at the moment].
Then, finally, a “do you want to save your password” box appears.

Solution

Do not overcomplicate the 1st interaction with your thing. It is a bit like comparing it to bumping into someone when you are in a hurry and have to go, and all they keep doing is talking to you and telling you their life story. If people find their 1st interaction with you displeasing, they will turn away. If you have to provide options like cookie warning boxes, email newsletter subscribe boxes, and other notifications, leave them optional or in a place that everyone knows they can visit, like a universal options link or button in the top right of a webpage, where they can customize and setup these things, as they like.

What Can We Learn?

All of this creates a hard-to-use and over-demanding graphic communication. That distracts, over-complicates, and creates extra barriers to information that are very costly for your business or organization because it increases the chance of your users leaving and rejecting your item. Say goodbye to your users and customers in less than 3 seconds. It gives your brand a bad feeling and experience, and maybe they decide not to order something through your website. These are the everyday realities of bad usability because of your over-demanding and difficult-to-use design, information, and communication. It is not difficult:

Think about how people will want to use your design.
Make it as easy and least demanding as possible.
Test with them in real time.

Clothing Measurement Sizes On Fashion E-commerce

The next example has to do with measurements such as millimeters (mm), centimeters (cm), and inches (in). It doesn’t bring that much confusion with it, but surprisingly, it can still cause quite a lot of confusion and problems worldwide.

Problem

Measurements such as millimeters (mm), centimeters (cm) and inches (in) may not seem that interesting, but if you were to try to order a polo t-shirt online, you’ll notice that it may take you longer to do than expected. By measuring the width between your armpits across your breast area to get your bust (chest) circumference, and you may have measured 60 cm on the front, i.e. you have to multiply this number by 2 for the whole circumference of 60 cm (front) × 2 (front and back) to get a result of 120 cm.

Let’s say you finally find a polo t-shirt that you really like on a French clothing e-commerce website. You choose the color of the polo t-shirt you like and search for your size (we know that it is 120 cm, this sounds like we’re back in a Maths class, bear with me), but the only available sizes from that French clothing company are the following:

2 – XS
3 – S
4 – M
5 – L
6 – XL
7 – XXL
8 – 3XL
9 – 4XL
10 – 5XL
11 – 6XL

The above measurements are a bit helpful but certainly not accurate. They are not accurate because there is still no measurement information in millimeters, centimeters, or inches. However, the information above is a link titled Size guide. Okay, let’s give that a go and see what it does. A slide-in panel appears, and there is a drop-down list with the following information:

2 – XS = (bust circumference: 87 cm/34 in, pant waist circumference: 73 cm/28 inch).
3 – S = (bust circumference: 90–93 cm/35–37 in, pant waist circumference: 77–81 cm/30–31 in).
4 – M = (bust circumference: 97–101 cm/38–40 in, pant waist circumference: 85–89 cm/33–35 in).
5 – L = (bust circumference: 105–109 cm/41–43 in, pant waist circumference: 93–97 cm/36–38 in).
6 – XL = (bust circumference: 113–117 cm/44–46 in, pant waist circumference: 101–106 cm/39–42 in).
7 – XXL = (bust circumference: 121–125 cm/48–49 in, pant waist circumference: 111–116 cm/44–46 in).
8 – 3XL = (bust circumference: 129 cm/51 in, pant waist circumference: 121 cm/48 in).
9 – 4XL = (bust circumference: 134 cm/53 in, pant waist circumference: 126 cm/50 in).
10 – 5XL = that now, strangely, in the Size guide slide-in panel seems to say 1XG = (bust circumference: 139 cm/55 in, pant waist circumference: 131 cm/52 in).
11 – 6XL = that now, strangely, in the Size guide slide-in panel seems to say 2XG = (bust circumference: 144 cm/57 in, pant waist circumference: 136 cm/54 in).

Are you starting to get a headache? I told you, keep reading and we will find the remedy!

Our bust (chest) circumference, as we know, is 120 cm, so it seems by the information in the above Size guide panel, that this size (entry):

7 – XXL = (bust circumference: 121–125 cm / 48–49 in, pant waist circumference: 111–116 cm/44–46 in).

It is going to be a really good and safe size (because it is slightly larger than 120 cm by 1–4 cm). So it seems that there is no problem here, and in fact, the website has given good and flexible information because measurement sizes have been provided in three different measurements: cm, mm and in.

Another related question is whether all clothing websites display their polo t-shirts measurement like the French clothing company above. Well, no. Here is an example from a British clothing company, and we are going to use our pre-measured bust (chest) circumference, which we know is 120 cm once again, to order a different polo t-shirt from the British clothing company. So I have selected a polo t-shirt from the British clothing company’s e-commerce website, and the sizes that it gives are:

36
38
40
42
44
46

If we look at the drop-down list information from the French clothing company, we really cannot see anything that says 36, 38, 40, 42, 44, 46. However, once again, there is a View guide link on this British clothing website, so we click that, and see what happens (as it might be able to give us some more information).

Two options are available:

Top half (bust, chest),
Bottom half (waist).

We want the Top half (bust, chest) option because we measured the distance from armpit-to-armpit, then multiplied by 2 to give our total circumference in cm, as previously. The tables say:

Top half (bust, chest)

36
38
40
42
44
46

Chest (inches)
36
38
40
42
44
46

Chest (cm)
92
97
102
107
112
117

XS
S
M
L
XL
XXL
XXXL

Chest (inches)
32–34
35–37
38–40
41–43
44–46
47–49
50–52

Chest (cm)
81–86
89–94
97–102
104–109
112–117
119–124
127–132

We have to remember that the only available sizes in this polo t-shirt are 36, 38, 40, 42, 44, and 46. So it would seem 46 is the largest size they offer, and the circumference in cm of 46 (inches circumference) is 117 cm circumference. As you can see, 117 cm is not large enough. There is not enough flex (leeway) in this size because we know that our already measured armpit-to-armpit circumference in cm is 120 cm.

Solution

The French clothing company provided a good range of measurements in 2 measurements, inches and cm. The British clothing company, however, provided two tables, and it would be more advisable to actually not offer users the second table because it is basically a whole range table for all their clothing and is not valid for the polo t-shirt we selected, where only 36, 38, 40, 42, 44, 46 were available (yes, it is confusing). If we really want to clarify even more, the initial sizes of 36, 38, 40, 42, 44, and 46 would maybe be better written like this:

36 in (92 cm), 38 in (97 cm), 40 in (102 cm), 42 in (107 cm), 44 in (112 cm), 46 in (117 cm).

Then there is much less misunderstanding, and users can relate the values better to their information and size.

What Can We Learn?

Yes, we can learn a lot. The interesting points to note are that the French clothing company’s website offered fairly useful and practical information. The British clothing company initially gave us six measurements in inches (36, 38, 40, 42, 44, 46) that made no sense to us, but when we went to the View guide link, we were able to decode the two tables, although it really was not made blatant (obvious enough) that this range only goes up to 46 inches bust (chest) circumference. And in fact, there were two tables provided, and it could have been very easy to read the second table (one below) and see that there is a size of XXL (119–124). Since the table has been provided, it will be available in XXL (119–124), but, of course, it is not for the polo t-shirt we selected.

Only give information relevant to the product and task, and remove any information that is not applicable or useful, especially when dealing with measurements. Furthermore, and you are going to like this if you are a designer or working in sales, if we consider the further-down-the-line consequences, you could very easily, as people do:

Make an order thinking the size will be alright when really it is not (we have all done this, hey).
Type in all your details.
Pay for it.
Wait for it to be delivered (maybe missing a day of work, or picking it up from somewhere else, as no one was in where you live).
Try it on, and it does not fit.
Get packaging to return it to them undamaged.
Complete another refund/return form.
Do more paperwork.
Send it back to them (maybe missing a day of work, so someone can pick it up from where you live or travel to a post/courier office).
Check your bank account over the next 30 days to see if you have been refunded.
Oh, I forgot, what about writing the postal address that the return needs to go to? Do you write it on the front in a pen, print out an A4 page, then sellotape it on, or do you do something else?

As you can see, user errors and mistakes are very time-consuming for the users themselves, and even more costly for the supplier of the product who has to process the return, i.e. giving them masses of more work to do. Good design makes a lot of sense for all involved.

Concluding Observations, What Did We Learn From All Of The Examples?

The results of getting good at the accessibility and usability issues previously mentioned are:

Be a better designer;
Designs will work better for people;
Enable people to achieve what they want to with your design and information;
Designs will increase business success;
Designs will reduce task interaction time and will allow users to achieve what they want to do faster;
Reduce stress, confusion, and unnecessary work;
Increase customer loyalty and quality perception of the brand.

What We Have Explored And Learned In This Article

Microsoft Word Font Menu
Rather than accepting a design and what is there, we understood and found out how people will want to use the thing. We then looked at a very simple solution to make this as quick and efficient as possible. It leads to increased workflow speed, productivity, better actions, and a reduction in time, stress, and confusion.
Font Software
We saw default operating software that lacked needed features.
Map In An Annual Review
We found out, explored, and understood how people are going to use the thing, interface, content, or system. We then provided a very simple map that improves access to the content to allow easier and more chance of comprehending the information, and to increase the chance of people doing what we intend and enabling it to happen more easily.
Electronic Business Card On Websites
We were able to increase the chances of people doing something (in our case, to contact us) by thinking about how we could make that easier to do by providing different electronic files to help people do this.
Modern (considered) good practice web performance techniques
Current-day website design performance methods, like lazy load and infinite scroll, are rendering websites to load at 4kbps speeds that we had around the year 2000, that is 22 years ago. This makes websites difficult to use and interferes with the user’s original intention and goal.
Total Overload Of User’s First Interaction
We saw many websites requiring a user’s first interaction to deal with, sometimes, 13 option settings and sorting, before they even get a chance to engage and complete their original task. Showing a high amount of information overload and digital information pollution.
Seemingly Straightforward And Assumed Easily Usable Information
When it comes to information, even seemingly very mundane and standard information (if it is not designed, communicated, and provided to users in a logical and easy way) creates masses of problems and work for all involved (as was the case in the online polo t-shirt ordering examples).

Ways To Come Up With New Accessibility And Usability Ideas, For Your Current Project Right Now!
How can you simplify (I mean really reduce) the work, energy, and tasks for users to complete and get something done?

Reduce complexity and demands (for instance, by not bombarding them with options, notifications, and things to sort out, even before they have started their originally intended task).
Reduce steps, stages, and clicks.
Strengthen and reduce the complexity and unnecessary difficulty in design, communication, user interfaces, and systems.
Ask for feedback and try to get good-quality questionnaires.
Conduct real-time diagnostic user testing.

How would you make your design and information more obvious and easier to access, find, process and scan through for users?

Search options on a website (enabling people to search through all of your content)?
Sitemap or index (allow people to quickly find what they are looking for)?
Navigation menu for a website or contents page for a publication (allows people to get an overview of all of the website or system content).
Add a map, graph, or data visualization (to help people envisage and see the content in better and different ways)?
Make the content available as audio (either online or able to transfer to a portable physical device)?
Could you use heading hierarchy levels like heading 1, heading 2, or heading 3, bullet lists, boxes, or icons to split up, better chunk, and highlight information?
Do you provide your communication in a range of different medias like online, print, audio, video, braille, large print, and easy read (that will increase the chances of it being used and being used in different people’s most ideal format?).
What about a conclusion, summary, or recap after a lot of information to help reprocess and reinforce the main points from lengthy content?
What kind of navigational elements could you use or introduce to help users move and navigate around your system: running heads, breadcrumb navigation, go to the top link, scroll spy elements, where you are a feature, progress indicator, grid or list of thumbnails to give a whole overview?
How can you help and make users discover and enjoy more of your hopefully useful content and information?

How can you understand, envisage and get to know more about people and their requirements?

Find out, think, explore, ask and watch people using the thing.
Ask users and find out what they want to do with your thing.
How can you make it easier for them to do what they want and achieve what they want as quickly as possible?
Do user testing and set people tasks to do and see where they struggle and if they can do it within a reasonable amount of time.
Learn about different people’s needs, like people who are aging, dyslexic, with vision, physical or hearing issues.
Find out about different categories of people by reading about user personas.
Better sectioning or navigation features.

How can you provide the information people may want in different formats to allow better and easier use of your information?

Maybe: HTML, SMS, RTF, PDF, VCARD, TXT, XML?
How can you allow people to customize your website, interface, or system:
If people use your website or system a lot, maybe they would like to customize the colors, typeface, or layout to avoid boredom.
How could you deliver age-specific or more fitting and relevant content (text and images) to this category of users, or other age categories of users?
How could you allow people to customize your website so they can use it how they wish and use it in their most ideal presentation?

Thank you for reading. I hope you enjoyed the issues raised in this article and how tools like Extensis can help — some show the latetst strategies and methods (sadly, not that advanced) that we have been using here for the past twenty years. Accessibility and usability are really not that difficult — they just need to be done better.

US Legal Forms Review: Is This The Right Solution for You?

Original Source: https://ecommerce-platforms.com/articles/us-legal-forms-review

As you probably know, each state has regulations and required forms that make processes like registering a business, creating a will, or filing a bill of sales confusing and expensive. 

This is where US Legal Forms comes in.

US Legal Forms has a collection of over 85,000 state-specific forms that are easy to sift through according to category and state. They also provide legal, accounting, and compliance advice, as well as packages containing all the necessary documents for complying with lengthy legal processes. For instance, settling a divorce, selling your home, and much more.

Typically, an attorney’s job is to present these forms to clients and help them through the process – usually at a considerable expense. However, US Legal Forms provides guidance to individuals and businesses at a considerably lower fee. But not just that – if you’re a legal practitioner, US Legal Forms can help you organize and find the documents you need to support your clients. 

So with that said, this review will briefly summarize what US Legal Forms offers, including its features, pricing, and answers to frequently asked questions. 

There’s lots to cover, so let’s begin.

US Legal Forms Review: About 

us legal forms review

US Legal Forms are a subsidiary of Airslate, one of the market’s largest online workflow automation platforms. 

As we’ve already hinted at in the intro, US Legal Forms offers a massive library of legal forms ready for individuals, firms, and attorneys to fill out. Users can fill out these documents online and get expert guidance from experienced attorneys with more than 25 years in the business. In addition, each form is regularly updated by a team of state-certified attorneys, so you can rest easy knowing you’re accessing up-to-the-minute legal services.

US Legal Forms scores 4.2 out of five on Trustpilot and is accredited by the Better Business Bureau.

Go to the top

illustration of a cat climbing a ladder

US Legal Forms Review: Features

us legal forms review

US Legal Forms’ main feature is its library of forms, so let’s start there. They have hundreds of categories to help you find and draft your required documents.

However, since there are so many categories, we’ll just cover the top five use cases here:

Form Categories 

Below, we’ve listed a few examples of the categories and types of forms included:

Real Estate – Closing forms, home sales, deeds, mortgages, and construction bids.

Business and Employment – Employment applications, company policies, incentives, and non-disclosure agreements.

Family Law – Adoptions, parental rights, divorces, annulments, and minor governances. 

Estate Planning – Power of attorney, wills, probate, and trusts.

Other – Affidavits, civil actions, bankruptcy, name changes, and personal planning.

Legal Packages

us legal forms review

As part of a package deal, you can purchase a whole category of forms. Sample documents (to help you see which information needs to be included) and worksheets to help you understand the submission process are also included. For example, suppose you’re planning the management of your estate after you pass. In that case, you can use US Legal Forms’ in-depth inventory worksheet to list all your assets and to whom you want to bequeath each asset.

When selecting your package, you can specify your state to ensure you receive the correct documentation for your location.

Notarization

us legal forms review

US Legal Forms also offers a notarization service for forms requiring legal verification. Online notarization is valid across all states. Sounds convenient, right? But how does it work? 

You can have a form notarized by an accredited notary following these steps:

Head to the notarization page on the US Legal Forms website

Upload the document you want notarized. This can be done from Dropbox, Google Docs, OneDrive, or Box.

Documents can be up to 25MB in size and can be in DOC, DOCX, RTF, JPEG, JPEG, PDF, PNG, PPT, PPTX, or TXT

Once uploaded, if there are areas on the form you need to complete, use the online editor to complete those fields

Click Notarize Online

You will be presented with a list of available online notaries

Arrange a quick video call with the notary and present your government-issued ID

Check your submitted information and e-sign your document

The notary will then add a digital notarization seal to your file

You’ll be instructed on how to access your notarized documents and how to share them 

Voila, that’s done!

The service is entirely online and really convenient. However, if you’re worried about finding a notary on time to meet a deadline, that’s no problem. The service is available 24/7/365 and is accessible via desktop and mobile.

To benefit from this service, you have to pay an additional $25 for each notary session (which isn’t included in your subscription). But rest assured, you won’t be charged if, for any reason, your document can’t be notarized. 

Also, it’s worth noting that some documents can’t be notarized. These typically relate to family matters, including wills, birth, marriage, codicils, trusts, and death certificates. 

Incorporation Services

us legal forms review

Starting a business is tough, made even harder by legal registry requirements, taxes, and incorporation. For the uninitiated, incorporation is the process by which a company registers as a legal entity.

In the US, this means separating the firm’s assets and income from its investors and owners. In other words, becoming a limited liability. This is a critical step for all major businesses. 

So, how does US Legal Forms help with this? 

When it comes to incorporating your business, you have a few options depending on the organization of your business – for instance:

LLC – if one or more individuals own a business, you would go down the LLC route. This is a simple process to protect assets and secure tax advantages.

Full incorporation – form a corporation that provides complete asset protection, lowers tax rates, and more.

PLLC – typically used by licensed professionals (doctors, lawyers, and accountants), a professional limited liability company that offers tax benefits and asset protection. 

DBA registration – when you’re looking for a name to reflect your business identity, you can register a DBA (doing business as) without needing to create a new business entity.

US Legal Forms provides the paperwork and guidance for each process. Once you become a registered business, you can apply for appropriate tax options, which US Legal Forms also provides the paperwork for.

For these services, you can pay a one-off fee of $199 or add the services as part of your subscription to US Legal Forms and pay $180 annually (more about subscription prices below). 

Completion Services 

Completion services are for those that need assistance writing key documents but aren’t sure where to start. 

You can access these services with a premium subscription to US Legal Forms. 

US Legal Forms offers completion services for:

Last will creation

Power of attorney 

Living will creation

Health directives 

But how does this work? 

To start, decide which document you need help with. US Legal Forms will then ask you to fill out a questionnaire to establish the basic details of your document. US Legal Forms will then input your details and fill out the sections based on this information. Finally, they’ll send you back a copy of the official document for you to sign as well as guidance on what you need to do to successfully submit your documents. 

For example, let’s say you want to fill out your last will. US Legal Forms will walk you through the following steps:

Answer questions: for a will, they ask you to choose an executor, list your assets and beneficiaries, and add your basic details. 

Completion: The team will draft a last will on your behalf and send it to you via email.

Review and sign: Just as it says on the tin, at this point, you review the will and sign if you’re happy with it. 

Go to the top

illustration of a cat climbing a ladder

US Legal Forms Review: Customer Service

US Legal Forms Review

There’s also an online help center where you’ll find the answers to frequently asked questions, billing information, managing your account, info on US Legal Forms, and its form library. 

Otherwise, if you prefer to speak to someone directly, you can talk to US Legal Forms via live chat, submit a contact form, or call them.

Go to the top

illustration of a cat climbing a ladder

US Legal Forms Review: Pricing

US Legal Forms Review

US Legal has two pricing plans, of which you can opt for monthly or annual billing. The latter comes at an 80% discount. We’ll quote monthly billing below as well as what you can expect from each program. 

But at this point, we think it’s worth highlighting that you can cancel your subscription anytime, and all documents are stored on an encrypted cloud. 

Okay, that said, let’s look at pricing:

Basic – $39 a month if you pay monthly, or $8 a month if you pay annually

The Basic plan comes with an all-access subscription to US Legal Forms’ databases, allowing you to search for any form and download it to your device. 

More specifically, it also includes:

A library of over 85,000 state-specific forms 

A package collection of personal planning forms, guidance, and worksheets

A package collection of business and corporate management documents 

All data is encrypted with military-level security (more on this below)

Premium – $59 a month if you pay monthly, or $15 a month if you pay annually

This plan has everything above, plus:

Subscription access to the online PDF editor and fillable form builder. You can edit, annotate, redline, and blackout any PDF doc or form. 

Subscription to the signNow eSignature solution. This allows you to create role-based e-signature workflows. This includes the ability to e-sign docs and send them to be e-signed from any device.

Completion services

A 50% discount on incorporation services

Go to the top

illustration of a cat climbing a ladder

US Legal Forms Review: US Legal Forms’ Pros and Cons

Let’s try and condense some of what we’ve discussed into a quick pro-cons list:

Pros 👍
Cons 👎

Pros 👍

This solution is cost-effective if you pay annually.
Its website is easy to navigate.
Access to 85,000+ state-specific US legal Forms
Founded in 1997 so it’s one of the most established online solutions for official legal forms, with a Better Business Bureau rating of A+.

Cons 👎

Limited training resources
No free trial

Go to the top

illustration of a cat climbing a ladder

US Legal Forms Review: FAQs

We’ve covered a lot of ground, but we appreciate you might still have questions. So below, we’ll try and answer some of the most frequently asked questions about US Legal Forms:

What If I Only Want to Fill Out One Form?

Unfortunately, US Legal Forms doesn’t offer a one-off form price in its library. Instead, it advises opting into a monthly subscription to access the form you need, US Legal Forms also mentions in the FAQ that a monthly subscription actually costs less than the previous price of a single form. Then cancel the membership before the renewal period at the end of the month. You’ll have full access to the database for the entire month regardless of when you cancel, and you won’t be charged again. 

To cancel a subscription:

Log into your account. 

Go to the My Accounts page.

Click cancel subscription. 

Where Can I View my Account Information?

Just log into your account and head to the My Account page. You can view and edit your contact details, subscription details, payment method, account activation, and renewal dates. You can also see all the forms you’ve edited or completed under My Forms.

What’s Military-level Encryption, and How Safe Are My Documents? 

US Legal Forms uses a US-based Amazon server called S3 or Amazon Simple storage service. This is a cloud storage service used to organize and protect data. The data center is physically guarded by military security and encrypted during transport. Data is also guarded by Verisure secure, which certifies that all data is secured at all times. So, in short, yes, your data is very safe.

Go to the top

illustration of a cat climbing a ladder

US Legal Forms Review: Our Verdict 

All in all, US Legal Froms is a solid tool that benefits businesses, individuals, and professionals. Their primary offering is a comprehensive database of state-specific forms and guidance to help you correctly fill out and submit these documents.

There are always a few things to check when using any online legal service. For instance, the service provides valid legal documentation and that your data and information are secure. US Legal Forms offers all this, a wealth of guidance throughout the process. So as far as this reviewer can see, there’s little to complain about.

Of course, it would be great if you could fill out individual forms on a pay-as-you-go basis without subscribing to the service, but that’s the only caveat. Otherwise, US Legal Forms is an excellent alternative to hefty legal counsel and attorney fees.

That’s all, folks! Do you reckon you’ll try out US Legal Forms? Please tell us your thoughts in the comments box below!

The post US Legal Forms Review: Is This The Right Solution for You? appeared first on Ecommerce Platforms.

8 Best Tools to Build and Sell Mobile Apps

Original Source: https://www.hongkiat.com/blog/build-sell-mobile-apps/

The phrase “there’s an app for everything” is not a hypothetical statement anymore. There is literally a mobile app for every utility, business, or activity. However, creating a mobile app and then getting more downloads for it seems like quite a daunting task for someone who has no prior knowledge of app development and marketing.

Well, through this post, I can solve this issue for all those who want to create and sell their mobile app without any knowledge in app development – that too, for free. Here are the eight best services to build and sell your mobile app. Let’s check the list after the jump.

30 Books For Web Designers and Developers

.no-js #ref-block-post-55215 .ref-block__thumbnail { background-image: url(“https://assets.hongkiat.com/uploads/thumbs/250×160/books-for-web-designers-developers.jpg”); }

30 Books For Web Designers and Developers

If you are a designer or developer, you probably know that this field is one of the most… Read more

Glide
GlideGlide

Glide helps you in creating an app using your business data. Without prior knowledge in coding or programming, you can create powerful tools from data in any format.

The tool enables you to design your app through an intuitive editor. You can add different elements to your design like color and layout etc., create computed columns, and turn different actions into workflows.

Glide lets you publish your app privately that you can share with your team or publicly with anyone. Plus, your app and data can stay synced so anything you modify in your data reflects in your app.

Bubble.io
Bubble.ioBubble.io

Bubble lets you create dashboards, apps, marketplaces, social media platforms, and CRMs quickly and easily. You can create efficient prototypes of your digital products without writing a single line of code.

It offers an intuitive editor that helps you design your digital product. You can add styles, workflow, plugins, and data, and customize styles as your requirements.

The apps created by Bubble are fully scalable without any limits. Plus, you can expand your app’s functionalities with various integrations and API connections.

Adalo
AdaloAdalo

Aldo is a versatile no-code app builder. Anyone can develop a professional and fully-functional web, desktop, or mobile app using this tool.

There are many customization options to add your branding details to the app. The tool also offers a built-in database to manage content. You can also get an analytics dashboard to measure and manage the growth of your digital products.

Mobincube
MobincubeMobincube

Mobincube is a great solution for creating native mobile apps for Android and iOS. It is built from the ground up to help you make money through your apps, and offers built-in monetization features , which can be easily activated. Mobincube also lets you build unlimited apps for free, but limits some functionalities.

What I like is it supports push notifications, Google Maps, and Google Analytics natively, allowing you to embed them in your app easily, but what I found odd is its interface that’s not as catchy as that of Dropsource (discussed below).

Some of its additional features include support for a mobile store, audio/video streaming, web embeds, and databases. Also, it lets you code for adding custom functionalities.

Mobincube’s single project works for all supported platforms. Also, you can test the app right in your browser but you need to publish it manually to the stores. Also, as I said before, it poses a few limits on the free plan such as a number of push notifications, the option to remove ads, and cloud, analytics, and optimization features.

Dropsource
DropsourceDropsource

Dropsource is an innovative solution for creating native mobile apps – right from your browser. This platform offers tools for the whole development process and support docs to help you get started with it. That said, if you have Dropsource, you do not require any other tool to design, review, develop, test, and publish your apps, unlike Mobincube.

Dropsource provides a robust drag-and-drop user interface editor which helps to prototype and build your apps with native elements and customized logic. You can integrate data in your app using REST APIs.

After you are done, you can build and test your app in its browser based emulator, and share it to get feedback from others. When the app is ready, you can download code or publish directly to the App Store or the Google Play Store.

However, I did not like that it creates an app for a single platform per project. That means you need to create two projects, i.e., two apps if you need both Android and iOS apps. Moreover, one cannot publish apps or download source code in its free plan. However, if you are fast enough to create an app during its one-month trial period, then you can download it.

Thunkable
ThunkableThunkable

Thunkable is yet another cloud solution to build native mobile apps for Android and iOS. It has a fantastic interface unlike Mobincube; however, it does not offers as many features as offered by the latter. Yet, it does not support creating apps for Windows Phone. However, I liked that Thunkable helps you create and monetize gorgeous-looking apps.

Though Thunkable is not as mature as Mobincube, yet it offers nice documentation, as well as video tutorials for getting started with its platform, which I found, is very helpful for beginners. Some of its features include modern interface elements, support for image and speech recognizers, various databases, Admob, Google Maps, and the IoT.

You can live test your apps on your mobile device or an emulator, and after you are done creating, you can download and publish your app manually. Also, like Dropsource, Thunkable projects are platform-dependent. That said, if you require apps for Android as well as iOS, then you need to create and work on two separate projects.

Andromo
AndromoAndromo

Andromo is one of the known mobile app creators for building Android apps. What I found interesting is that its apps are multilingual by default with support for 20+ languages – a feature I find missing in all other solutions on this list.

It offers built-in features and templates, which are easy to add to your apps. Some of them include an audio player, support for integrating Facebook, Twitter, Flickr, and YouTube, support for adding content from a website, radio and podcast player, PDF and RSS support, etc. It also features adding the essentials like contact info, about page, and photo gallery.

However, Andromo allows creating just one app in its free plan (unlike Mobincube and Dropsource) and put limits as you can neither disable ads nor opt for its monetization feature. After you have created the app, you can publish it on the Google Play Store, the Amazon Store, and other app stores, and monetize it if you are on a premium plan.

10 Frameworks to Build Mobile Application with HTML, CSS & JavaScript

.no-js #ref-block-post-19941 .ref-block__thumbnail { background-image: url(“https://assets.hongkiat.com/uploads/thumbs/250×160/mobile-frameworks.jpg”); }

10 Frameworks to Build Mobile Application with HTML, CSS & JavaScript

For many web developers, which may only be familiar with HTML, CSS, and JavaScript, developing a native mobile… Read more

AppsGeyser
AppsGeyserAppsGeyser

AppsGeyser is one of the oldest mobile app makers that does not require coding knowledge, but I find it is the not best-featured solution. What I find lacking in comparison to Dropsource and Thunkable is it is not as featureful and intuitive as the former ones. It does not support creating iOS apps and is best suited for assembling web content into apps.

That said, if you are looking to create beautiful apps, you may consider using any one of the above solutions. However, if you are looking to create a mobile app for your website as quickly as possible, then AppsGeyser can work for you. It offers 70+ app templates to start building your app smoothly and whole process is done right in the browser.

You can include web content in your apps, use HTML5 features, send pop-up notifications, add social sharing and analytics features as well as geolocation features. You can view or test your app in the browser itself and monetize it by showing ads or selling it.

After your app is ready to distribute, you can manually submit the app to the Google Play Store.

The post 8 Best Tools to Build and Sell Mobile Apps appeared first on Hongkiat.

Sophisticated Web Scraping with Bright Data

Original Source: https://www.sitepoint.com/bright-data-web-scraping/?utm_source=rss

Sophisticated Web Scraping with Bright Data

Web scraping is a developer superpower, but it’s getting harder. Bright Data makes scraping easier, reliable, and practical.

Continue reading
Sophisticated Web Scraping with Bright Data
on SitePoint.

Tauri: Fast, Cross-platform Desktop Apps

Original Source: https://www.sitepoint.com/tauri-introduction/?utm_source=rss

Building Better Desktop Apps with Tauri

Learn what Tauri is, how it compares with Electron for building native desktop apps, and how to build a fully functional Tauri app.

Continue reading
Tauri: Fast, Cross-platform Desktop Apps
on SitePoint.

Talllk café branding

Original Source: https://abduzeedo.com/talllk-cafe-branding

Talllk café branding
Talllk café branding

abduzeedo1215—22

Talllk café is a coffee brand belonging to ifanr, located in Uhub,Guangzhou. The concept of the brand system is to present “Talllk”, the state of different voices in the same space.

brand identity cafe coffee shop identity Logo Design Packaging Retail typography  brand identity cafe coffee shop identity Logo Design Packaging Retail typography  brand identity cafe coffee shop identity Logo Design Packaging Retail typography  brand identity cafe coffee shop identity Logo Design Packaging Retail typography  brand identity cafe coffee shop identity Logo Design Packaging Retail typography  brand identity cafe coffee shop identity Logo Design Packaging Retail typography  brand identity cafe coffee shop identity Logo Design Packaging Retail typography  brand identity cafe coffee shop identity Logo Design Packaging Retail typography  brand identity cafe coffee shop identity Logo Design Packaging Retail typography  brand identity cafe coffee shop identity Logo Design Packaging Retail typography  brand identity cafe coffee shop identity Logo Design Packaging Retail typography  brand identity cafe coffee shop identity Logo Design Packaging Retail typography  brand identity cafe coffee shop identity Logo Design Packaging Retail typography  brand identity cafe coffee shop identity Logo Design Packaging Retail typography  brand identity cafe coffee shop identity Logo Design Packaging Retail typography

Credits

Studio: etc.design studio
Art Direction: Pan Chuxiong
Design: Wang Yeeho, Yetta chen_
Client: ifanring

For more information make sure to check out Pan Chuxiong on:

Behance
Instagram

Collective #743

Original Source: https://tympanus.net/codrops/collective/collective-743/

Collective 743 item image

Inspirational Website of the Week: Water by Falmec

Subtle details and a wonderful scroll experience makes this website stand out. Our pick this week.

Get inspired

Collective 743 item image

NodeToy (Beta)

Create, fork and publish shader graphs with the world using an intuitive and easy to use tool built for all.

Check it out

Collective 743 item image

Optimize Interaction to Next Paint

Jeremy Wagner and Philip Walton learn how to optimize for the Interaction to Next Paint metric.

Read it

Collective 743 item image
Our Sponsor

Get access to marketing and sales resources here

Whether you’re looking to land the next promotion or solve a sales or marketing challenge at work, The Juice can help. The ultimate industry insider hack, The Juice aggregates career-enhancing resources from top brands and thought leaders and organizes them in one place, so you don’t have to keep filling out marketing forms for access (or dodging sales calls yourself). Start thinking like top B2B marketers and sales professionals with The Juice.

Check it out

Collective 743 item image

Inside the mind of a frontend developer: Article layout

An exploration of how a frontend developer thinks while building an article layout. By Ahmad Shadeed.

Read it

Collective 743 item image

DOM Clobbering

In this HTMHell Advent Calendar article, Frederik Braun explains what DOM Clobbering is and how it can make a website vulnerable.

Read it

Collective 743 item image

From Web Page to Web Player: How Spotify Designed a New Homepage Experience

Alexandria Goree walks us through the design process of making over Spotify’s homepage.

Read it

Collective 743 item image

Wikipedia Analysis Tool

A tool to navigate edits to the English Wikipedia made by IPs belonging to known organizations.

Check it out

Collective 743 item image

Mobile Performance of Next.js Sites

Clark Gunn shares his experience on performance remediation for a large e-commerce site built with Next.

Read it

Drowning in AI Generated Garbage: the silent war we are fighting

A very interesting read on how we’ll soon end up with inbred AI garbage and algorithmic trash.

Read it

Collective 743 item image

Humanizer

Humanizer is a minimal static site generator made with PHP.

Check it out

Collective 743 item image

Upscalo

Read how Morten Just made an app that makes a small image large and removes its background.

Check it out

Collective 743 item image

Contrast is boring—can’t someone else do it?

Learn how color-contrast() is soon here to save us from the boring task of ensuring sufficient contrast on a website.

Read it

Collective 743 item image

Introducing Mona Sans and Hubot Sans

Learn how to use and express yourself with GitHub’s open source variable fonts, Mona Sans and Hubot Sans.

Check it out

Collective 743 item image

Puter

Puter is a cloud operating system. Store, open, and edit your files from anywhere at any time in the cloud.

Check it out

Collective 743 item image

A :nth-child(An+B [of S]?) polyfill thanks to CSS :has()

Bramus Van Damme writes about an interesting polyfill made possible with :has().

Read it

Collective 743 item image

VRTs – Visual Regression Tests

Visual Regression Tests is a WordPress Plugin to test your website for visual changes and notifies you upon alerts automatically.

Check it out

Collective 743 item image

Rapier – Raycast Vehicle

Isaac Mason is porting the cannon.js RaycastVehicle to Rapier. Check out his progress in this demo.

Check it out

Collective 743 item image

Blockbench

An easy to use 3D model editor for low-poly and pixel-art.

Check it out

Collective 743 item image

Snowball Preloader

A beautiful CSS-only snowball preloader made by Jon Kantner.

Check it out

Collective 743 item image

Building A Virtual Machine inside ChatGPT

Read how it’s possible to run a whole virtual machine inside of ChatGPT.

Read it

Collective 743 item image

Coding techniques

A thread by Yuri Artiukh on some great coding techniques that can be learned from “Kerrygold, the Magical Pantry” made by makemepulse.

Check it out

Collective 743 item image
From Our Blog

How to Code an On-Scroll Folding 3D Cardboard Box Animation with Three.js and GSAP

A tutorial on how to create a 3D cardboard box that folds and unfolds on scroll using Three.js and the GSAP ScrollTrigger.

Check it out

Collective 743 item image
From Our Blog

Inspirational Websites Roundup #44

A new roundup of the most inspiring and creative website from the past couple of weeks.

Check it out

Collective 743 item image
Our Sponsor

Explore the world like a local with Babbel

If you’ve always wanted to learn a new language, Babbel will be the most productive 10 minutes of your day. Trusted by over 10 million subscribers worldwide, the subscription-based language learning platform can get you confidently conversing in a new tongue in just three weeks. Sign up today and get up to 60 percent off your subscription.

Learn more