Entries by admin

How to Start a Shopify Store in Germany (Step-by-Step Guide)

Original Source: https://ecommerce-platforms.com/ecommerce/how-to-start-a-shopify-store-in-germany

Starting a Shopify store in Germany?

Great idea. Germany is one of the biggest eCommerce markets in Europe, with over 62 million online shoppers.

But if you don’t set things up properly, you’ll run into legal issues, tax problems, and compliance headaches.

That’s why I’m breaking this down step by step—so you don’t waste time or money.

Step 1: Sign Up for Shopify

First, go to Shopify.com and create an account.

You get a 3-day free trial, and after that, plans start at:

Basic (€36/month) – Perfect for beginners.

Shopify (€105/month) – For scaling businesses.

Advanced (€384/month) – Only needed for big brands.

Most people start with Basic—you can upgrade later.

Once you sign up, Shopify will guide you through the initial setup.

Which Shopify Plan Should You Choose?

If you’re just testing the waters, Basic Shopify is more than enough. You get everything you need to start selling: a website, product pages, checkout, and basic reports.

If you’re already making sales or planning to scale quickly, the Shopify (€105/month) plan gives you more features, like professional reports and lower transaction fees.

For large eCommerce businesses that need advanced analytics and lower credit card fees, the Advanced Plan (€384/month) is the best choice. But 99% of new stores don’t need this plan—stick with Basic or Shopify until you start making consistent revenue.

What Happens After You Sign Up?

Once you create an account, Shopify will guide you through the store setup process:

1️⃣ Enter Your Store Name – Choose something brandable and unique. You can change it later.
2️⃣ Select Your Business Type – Choose what best describes your store (e.g., dropshipping, digital products, physical goods).
3️⃣ Pick Your Goal – Shopify asks if you’re just starting or already selling elsewhere. This helps customize your experience.
4️⃣ Enter Your Business Address – This is important for tax settings and payment processing.
5️⃣ Access Your Dashboard – Once inside, you’ll see the Shopify dashboard where you can add products, customize your theme, and set up payments.

Bonus Tip: Secure Your Shopify Domain Early

Your store will start with a myshopify.com domain (e.g., yourstore.myshopify.com). While this works for testing, it doesn’t look professional.

To build trust with German customers, buy a .de domain (e.g., yourstore.de). You can do this directly in Shopify or through domain registrars like Namecheap or IONOS.

Step 2: Register Your Business in Germany

Germany has strict eCommerce and tax laws, so you must register your business legally. Skipping this step could lead to fines, tax penalties, or even getting your store shut down.

Even if you’re starting small, registering your business properly will protect you from legal issues and make tax compliance easier.

Choose Your Business Type

You have two main options when setting up a business in Germany:

1️⃣ Sole Proprietorship (Einzelunternehmen) – Easy but Risky

This is the simplest and fastest way to start your business. You don’t need a lot of paperwork, and it’s cheap to set up. However, you are personally liable for all debts. If your business gets sued or goes into debt, your personal assets (house, car, savings) can be taken to pay off what you owe.

Best for: Small businesses, freelancers, and low-risk businesses.

2️⃣ Limited Liability Company (UG or GmbH) – Safer, but More Paperwork

If you’re serious about building a long-term business, a UG (Unternehmergesellschaft, or mini-GmbH) is the best choice. It requires only €1 in starting capital, but you must reinvest profits until you reach €25,000, at which point you can convert to a GmbH (Gesellschaft mit beschränkter Haftung).

The main benefit? Your personal assets are protected. If your business fails, you only lose the company’s money—not your personal savings.

Best for: Entrepreneurs planning to grow their business long-term.

Should You Register as a Freelancer (Freiberufler)?

Some online businesses might qualify for Freiberufler (Freelancer) status. This applies to professions like:

Graphic designers

Web developers

Consultants

Writers

Freelancers don’t need to register a business, but they still need a Steuernummer (Tax ID) from the Finanzamt. Most eCommerce businesses do NOT qualify as Freiberufler.

How to Register Your Business in Germany

Once you’ve chosen the right business structure, follow these steps to register legally:

Step 1: Register at the Gewerbeamt (Trade Office)

Go to your local Gewerbeamt (Trade Office)

Fill out the Gewerbeanmeldung (Trade Registration Form)

Pay the registration fee (€20–€60, depending on the city)

Once completed, you’ll receive a Gewerbeschein (Trade License), which proves you’re legally registered.

Step 2: Register with the Finanzamt (Tax Office)

The Finanzamt (Tax Office) will send you a questionnaire about your business

You’ll receive a Steuernummer (Tax ID) for tax reporting

If you expect to make over €22,000 per year, you must charge 19% VAT (MwSt)

Important: If you don’t register for VAT but exceed the €22,000 threshold, you could face penalties. A Steuerberater (tax consultant) can help you set this up correctly.

Step 3: Register for a VAT ID (USt-IdNr.)

If you’re selling to customers outside Germany but within the EU, you may need a VAT Identification Number (Umsatzsteuer-Identifikationsnummer, or USt-IdNr.).

You can apply for this at the Bundeszentralamt für Steuern (Federal Tax Office) or ask your tax consultant to handle it.

Step 4: Open a Business Bank Account (Optional but Recommended)

While it’s not legally required, opening a separate business bank account will make accounting much easier. This is especially important if you register a UG or GmbH, as you need to keep personal and business finances separate.

Best business banks in Germany:

N26 Business – Online bank with no monthly fees

Commerzbank Business – Good for traditional banking services

Holvi – Business banking with integrated invoicing tools

Do You Need a Tax Consultant (Steuerberater)?

German tax laws are complicated—even small mistakes can lead to hefty fines. Hiring a Steuerberater (tax consultant) can save you time, stress, and money in the long run.

A good Steuerberater will help with:

Registering your business correctly

Setting up VAT compliance

Filing your annual tax returns

Avoiding common tax mistakes

Tip: You can find a tax consultant through platforms like Steuerberater.de or Lohnsteuerhilfeverein. Prices range from €50 to €200 per month, depending on how much help you need.

Final Thoughts on Business Registration

Registering your business in Germany isn’t difficult, but it’s essential to do it right. If you skip steps or file incorrect information, you could face legal issues or tax penalties.

Sole Proprietorship? Fast and easy, but you’re personally liable.

UG/GmbH? More paperwork, but protects your personal assets.

VAT Registration? Required if you make over €22,000 per year.

Business Bank Account? Not required, but highly recommended.

If in doubt, get a Steuerberater—they can save you from costly mistakes later.

Once your business is officially registered, you’re ready for the next step.

Step 3: Set Up Your Shopify Store

Now that your business is legally registered, it’s time to build your Shopify store. This step is all about choosing the right domain, theme, and legal setup to ensure your store looks professional and complies with German eCommerce laws.

Pick a Domain Name

Your domain name is your brand’s online identity, so choose wisely.

Where to Buy a Domain?

You can buy a domain directly through Shopify or use third-party services like Namecheap or IONOS.

A .de domain is highly recommended because Germans trust local businesses more than international ones.

Tips for Choosing a Domain:

Keep it short and memorable – Avoid long or complicated words.

Use your brand name if possible – Example: BestGermanShoes.de instead of BestShoesOnline.com.

Avoid hyphens and numbers – They can confuse customers.

Check for trademark conflicts – Ensure no other company is using the name.

Pro Tip: Secure social media handles (@yourbrandname on Instagram, Facebook, etc.) that match your domain for consistent branding.

Choose a Shopify Theme

Your Shopify theme is one of the most important factors in determining your store’s user experience, conversion rates, and site speed. A well-optimized theme loads quickly, looks professional, and makes it easy for customers to navigate your store.

A poorly designed theme, on the other hand, can lead to high bounce rates, low conversions, and frustrated customers who leave your site without making a purchase.

Shopify offers both free and paid themes, and your choice will depend on your budget, brand style, and business needs.

Best Free Shopify Theme

If you are just starting and do not want to spend money on a paid theme, Shopify’s Dawn theme is one of the best options available.

Dawn – A fast, modern, and mobile-friendly theme that works well for most Shopify stores. It features:

Minimalist design that allows your products to stand out.

Quick page load speeds, which improve your store’s SEO and reduce cart abandonment.

Easy customization, so you can adjust colors, fonts, and layouts to match your brand.

Mobile-responsive design, ensuring your store looks great on smartphones and tablets.

Dawn is a great option for general stores, fashion brands, and small businesses that want a clean, professional look without extra costs.

However, because it is a free theme, it lacks some advanced conversion features like built-in upsells, trust badges, and customizable checkout pages. If you want more control over your store’s design and functionality, consider a premium Shopify theme.

Best Paid Shopify Themes

Paid themes come with advanced features, better design options, and built-in conversion tools that can help you sell more products. While they require an upfront investment, they often pay for themselves by increasing sales and improving the user experience.

Here are two of the best premium Shopify themes:

Debutify – One of the highest-converting Shopify themes, designed for dropshipping and eCommerce businesses. It includes:

Built-in upsell and cross-sell features to increase order value.

Trust-building elements, like security badges and customer testimonials.

Advanced customization options for layout, colors, and typography.

Fast loading speeds to improve conversion rates.

Debutify is perfect for high-growth eCommerce brands that want a customizable theme with powerful sales-boosting tools.

Prestige – Best for luxury brands or stores that want a premium look and feel. It is ideal for businesses selling high-end fashion, jewelry, or designer goods. Features include:

Large image sections to showcase high-quality product photos.

A sleek, modern design that enhances brand credibility.

Storytelling layouts, allowing you to highlight brand history and product quality.

Advanced typography and styling options to create a unique brand aesthetic.

Prestige is the right choice if you are selling luxury products and want to differentiate your store from competitors with a high-end look.

Pro Tip: Always check theme speed scores—slower themes hurt your SEO and increase cart abandonment rates.

Add Legal Pages (Required in Germany)

Germany has strict eCommerce laws, and missing these legal pages could get your store fined or shut down.

Impressum (Legal Notice) – Required by law. It includes your business details.

Datenschutzerklärung (Privacy Policy) – Explains how you handle customer data (GDPR compliance).

Widerrufsbelehrung (Cancellation Policy) – Customers must be informed about their right to cancel orders.

AGB (Terms & Conditions) – Outlines business policies, warranties, and liabilities.

Where to Generate Legal Pages?

Use eRecht24 or a legal expert to create Germany-compliant legal documents.

Step 4: Add Products & Pricing

Now it is time to upload your products to your Shopify store. This step is critical because how you present your products will determine whether potential customers decide to buy or leave your store.

Go to Shopify Dashboard > Products > Add Product and start listing your inventory.

Many store owners rush through this step, but that is a mistake. The way you structure your product listings affects Google rankings, customer engagement, and conversion rates. A well-optimized product page can significantly increase your sales, so take the time to set it up correctly.

Optimize Your Product Listings for SEO & Conversions

When listing your products, the key elements to focus on are the title, description, images, and pricing strategy.

Product Title: How to Write a High-Converting Title

Your product title is one of the most important factors for SEO and customer decision-making. A poorly written title can prevent your product from appearing in Google search results and Shopify’s internal search function.

Always include your main keyword in the title. If you are selling a leather wallet, a title like “Men’s Leather Wallet – Handmade in Germany” will perform much better than just “Leather Wallet” because it includes specific details and location-based keywords.

Avoid generic product names. Instead of “Casual Shoes”, use “Men’s White Sneakers – Lightweight & Breathable”.

If applicable, mention unique features such as “Waterproof,” “Organic,” or “Handmade”.

Keep it concise but descriptive enough for customers to understand what you are selling at a glance.

Well-optimized product titles can improve SEO rankings and click-through rates, helping your store attract more organic traffic.

Product Description: How to Write Copy That Sells

Your product description should do more than just describe the item. It needs to persuade customers by highlighting the benefits rather than just the features.

Many store owners make the mistake of writing long, boring paragraphs about their product. Instead, make it easy to read by using bullet points and short sentences.

Here is an example of an effective product description:

Handcrafted Leather Wallet – Premium Quality & Built to Last

Genuine Full-Grain Leather – Designed to develop a beautiful patina over time.

RFID Blocking Technology – Keeps your credit card information safe from theft.

Compact & Spacious – Holds up to 10 cards while maintaining a slim profile.

Handmade in Germany – Built with attention to detail by expert artisans.

This structure makes it easy for customers to quickly scan the key selling points without getting overwhelmed.

Additional tips for improving product descriptions:

Use customer-centric language. Instead of saying, “Our shoes are made with durable rubber soles,” say, “Walk comfortably all day with durable rubber soles that absorb shock.”

Include trust-building phrases like “Trusted by over 5,000 customers” or “Featured in [reputable publication]” if applicable.

Create a sense of urgency. Use phrases like “Limited stock available” or “Selling fast – order now” to encourage faster decisions.

A well-written product description reduces buyer hesitation and increases conversions.

Product Images: How to Make Your Store Look Professional

Images play a crucial role in converting visitors into buyers. A low-quality image can make your store look untrustworthy, while high-resolution images build confidence in your product’s quality.

Use high-resolution images (Shopify recommends at least 2048 x 2048 pixels).

Upload multiple angles of the product, including close-up shots to highlight details.

Include lifestyle images showing the product in use. For example, if you sell backpacks, include photos of people wearing them outdoors.

If applicable, include a size comparison image or infographic to help customers visualize the dimensions.

Bad product images are one of the biggest reasons for high return rates, as customers may not get an accurate representation of the product before purchasing.

Tools like Canva, Fotor, and Adobe Photoshop can help enhance your product photos and make them look professional.

Pricing Strategy: How to Price Your Products for Maximum Sales

Pricing can make or break your business. If your prices are too high, you will lose potential customers. If they are too low, you will struggle to make a profit.

Here is how to set the right price for your products in the German market:

Factor in VAT (Value Added Tax)
In Germany, the standard VAT rate is 19%, and you are required to include VAT in your displayed prices. If your product costs €100 before VAT, your final listed price should be €119. German consumers are used to seeing the final price upfront, so avoid any hidden fees.

Use Psychological Pricing
Prices that end in .99 or .95 often feel more affordable. For example, €49.99 appears cheaper than €50, even though the difference is just one cent.

Offer Volume Discounts & Bundles
Encourage larger purchases by offering deals like:

“Buy 2, Get 10% Off”

“Buy 3, Get 1 Free”

“Family Pack – Save 15%”

This strategy increases your average order value (AOV) and boosts revenue without needing additional customers.

Compare with Competitor Pricing
Before setting your prices, analyze what competitors are charging for similar products. If your price is significantly higher, justify it with premium quality, better packaging, or free shipping.

Use Limited-Time Discounts to Create Urgency
Running occasional sales with a countdown timer can create a sense of urgency, leading to more impulse purchases. Shopify apps like Countdown Timer Ultimate can help with this.

Final Steps Before Publishing Your Products

Before making your products live, double-check everything:

Ensure your product titles include keywords and descriptive details.

Make sure your product descriptions focus on benefits rather than just features.

Upload multiple high-quality images showcasing the product from different angles.

Confirm that your pricing includes VAT and matches your competitors.

Add discounts or bundles to encourage higher order values.

Once your products are properly listed, you are ready for Step 5: Setting Up Payment & Shipping. A well-optimized product listing will not only help you rank higher in Google searches but also convert more visitors into paying customers.

Step 5: Set Up Payment & Shipping

Now that your store is set up with products and pricing, it is time to ensure customers can pay you easily and receive their orders quickly. Offering the right payment methods and shipping options is critical because German shoppers expect secure transactions and reliable delivery services.

A slow or inconvenient checkout process can lead to cart abandonment, so it is essential to provide trusted payment options. Similarly, unreliable shipping can lead to negative reviews and customer complaints, which can damage your store’s reputation.

Enable Payment Methods

Germans are very specific about payment preferences. Unlike in the US or UK, where credit cards dominate, many German shoppers prefer bank transfers, PayPal, or “Buy Now, Pay Later” options like Klarna. If you fail to offer these, you risk losing a significant portion of your potential customers.

The most popular payment methods in Germany include:

PayPal – Over 30% of Germans use PayPal for online shopping because it offers buyer protection and fast refunds.

Sofort & Klarna – These allow customers to pay via direct bank transfers or opt for “Buy Now, Pay Later” (BNPL), which is widely used in Germany. Klarna alone accounts for over 50 million transactions annually in Germany.

Shopify Payments – Shopify’s built-in payment gateway accepts credit cards, Apple Pay, and Google Pay, but many Germans still prefer alternatives like PayPal or Klarna.

If you want to maximize sales, offering multiple payment methods is essential.

Important: A large percentage of German shoppers do not trust credit cards for online purchases. If you only offer credit card payments, you will lose sales. Make sure to include PayPal, Klarna, or Sofort to accommodate the local audience.

Set Up Shipping

Shipping is one of the biggest factors influencing customer satisfaction and repeat purchases. A slow or unreliable delivery service can result in negative reviews, increased refund requests, and fewer repeat customers.

In Germany, consumers expect fast and reliable shipping, with tracking numbers provided for every order.

The top couriers in Germany are:

DHL – The most trusted and widely used shipping service. Offers flat rates, domestic and international shipping, and a network of Packstations where customers can pick up packages.

Hermes – Ideal for small parcels and domestic deliveries. Known for cost-effective pricing, but slightly slower than DHL.

DPD – Faster than DHL, but often more expensive. Best suited for premium delivery options or express shipping.

When setting up shipping in Shopify, it is important to choose the right shipping strategy:

Flat-Rate Shipping – Charging a fixed rate for shipping across Germany. This makes pricing predictable for customers.

Weight-Based Shipping – Charging based on the package weight, which is ideal if you sell different-sized products.

Real-Time Carrier Rates – Using Shopify’s built-in shipping calculator to automatically charge live shipping rates from DHL, Hermes, or DPD.

Should You Offer Free Shipping?

German consumers expect free shipping, especially for orders above a certain amount. If you can afford to absorb the shipping cost, offering free shipping can increase your conversion rates.

Yes, if possible – Free shipping increases the chance of checkout completion.

If not, use a free shipping threshold – For example, “Free shipping on orders over €50”. This encourages customers to add more items to their cart.

Pro Tip: Use Shopify’s built-in shipping calculator to determine the best shipping rates for different regions in Germany.

Once your payment and shipping settings are configured, your store is officially ready to take orders.

Step 6: Get Your First Customers

Your Shopify store is now fully set up, but without customers, it will not make any sales. Getting traffic to your store requires a mix of organic SEO, paid advertising, and influencer marketing.

Many Shopify stores fail because they do not focus enough on marketing. You need to actively drive traffic to your site and convert visitors into paying customers.

1. Optimize for Google (SEO)

Over 80% of German shoppers research products on Google before buying. If your store does not appear in search results, you are losing potential sales to competitors.

Here is how to rank higher on Google:

Use German keywords – Instead of only using English terms, include localized keywords such as “Beste Herrenuhren unter 100 Euro” (“Best men’s watches under 100 euros”).

Write SEO-friendly product descriptions – Do not just copy-paste generic descriptions. Use primary and secondary keywords naturally within the text.

Publish blog content – Writing informative blog posts related to your niche helps improve search engine rankings and attracts potential customers. Example: “Top 5 Sustainable Shoe Brands in Germany”.

Get backlinks from German directories & forums – Submitting your store to local business directories improves credibility and SEO rankings.

Pro Tip: Use free SEO tools like Ubersuggest, Ahrefs, or Google Keyword Planner to find high-volume, low-competition keywords.

2. Run Facebook & Instagram Ads

Most successful Shopify stores in Germany run Facebook & Instagram ads to drive traffic and sales.

Here is a simple but effective ad setup for beginners:

Start with €10/day – Test your ads with a small budget before scaling.

Use high-quality product images – Clear, professional images perform much better than low-quality ones.

Write a clear, benefit-driven headline – Example: “Handcrafted Leather Wallets – Built to Last a Lifetime!”.

Call to Action (CTA) – Use action-driven phrases like “Shop Now” or “Limited Stock – Order Today”.

Pro Tip: Retarget website visitors with Facebook Pixel ads to increase conversions by up to 300%.

3. Work with German Influencers

German consumers trust influencer recommendations more than traditional ads. Partnering with Instagram, YouTube, or TikTok influencers can help you gain credibility and drive sales.

Here is how to find the right influencers:

Use platforms like Heepsy or Upfluence to find micro-influencers (10k–50k followers).

Look for influencers who match your niche (e.g., fashion, tech, fitness, beauty).

Negotiate product-for-promotion deals instead of paying upfront—this saves money while still generating exposure.

Influencer marketing works particularly well for fashion, beauty, fitness, and tech products. A single influencer post can generate hundreds of new sales overnight.

Pro Tip: Work with multiple smaller influencers rather than paying for one big celebrity. Smaller influencers tend to have more engaged audiences.

Final Thoughts: Time to Scale!

At this point, your Shopify store is fully set up, optimized, and ready for traffic.

Your branding and domain are live.

Payments and shipping are correctly set up.

Your store is ready to take orders.

Your marketing strategies are in place.

Now it is time to track your results, optimize your store, and scale your business. Keep testing what works, double down on winning strategies, and cut anything that does not convert.

If you focus on SEO, paid ads, and influencer marketing, your store will start seeing consistent traffic and sales.

The post How to Start a Shopify Store in Germany (Step-by-Step Guide) appeared first on Ecommerce Platforms.

How to Use UUID for WordPress Author URL

Original Source: https://www.hongkiat.com/blog/wordpress-uuid-author-url-security-guide/

In WordPress, you can register multiple authors, and each author will have their own URL. The problem is that this author URL shows the author’s username, which poses a security risk for your WordPress site. Since the author username is exposed, attackers could use it to attempt to log in or brute-force their way into your site.

To solve this problem, we can mask the author URL with a randomized ID like UUID. This way, the author URL will not reveal the author’s username and will be more secure.

WordPress security illustration showing a shield protecting user profiles

We’ll be looking at two approaches: The hard way, where we write the code ourselves, and the easy way, where we use a plugin.

So, without further ado, let’s see how it works.

The Hard Way

To begin, create a new PHP file, for example uuid-slug.php, inside either the /wp-content/plugin directory or the /wp-content/mu-plugins/ directory, to load it as a must-use plugin. This file will contain the plugin headers…

/**
* Plugin bootstrap file.
*
* This file is read by WordPress to display the plugin’s information in the admin area.
*
* @wordpress-plugin
* Plugin Name: Author UUID Slug
* Plugin URI: https://github.com/hongkiat/wp-author-uuid-slug
* Description: Use UUID for the author URL.
* Version: 1.0.0
* Requires at least: 6.0
* Requires PHP: 7.4
* Author: Thoriq Firdaus
* Author URI: https://github.com/tfirdaus
*/

…and the logic required to implement UUID-based author URLs. In this case, we will provide a simple input in the user profile editor to add the UUID.

add_action(‘show_user_profile’, ‘add_uuid_field_to_profile’);
add_action(‘edit_user_profile’, ‘add_uuid_field_to_profile’);

function add_uuid_field_to_profile($user)
{
$uuid = get_user_meta($user->ID, ‘_uuid’, true);
?>
<table class=”form-table”>
<tr>
<th><label for=”user_uuid”><?php esc_html_e(‘UUID’, ‘hongkiat’); ?></label></th>
<td>
<input
type=”text”
name=”user_uuid”
id=”user_uuid”
value=”<?php echo esc_attr($uuid); ?>”
class=”regular-text”
<?php echo !current_user_can(‘manage_options’) ? ‘readonly’ : ”; ?>
/>
<p class=”description”>
<?php
if (current_user_can(‘manage_options’)) {
esc_html_e(‘Enter or update the UUID for this user.’, ‘hongkiat’);
} else {
esc_html_e(‘This UUID is read-only for non-administrators.’, ‘hongkiat’);
}
?>
</p>
</td>
</tr>
</table>
<?php
}

add_action(‘personal_options_update’, ‘save_uuid_field’);
add_action(‘edit_user_profile_update’, ‘save_uuid_field’);

function save_uuid_field($user_id)
{
if (!current_user_can(‘manage_options’, $user_id)) {
return false;
}

$new_uuid = isset($_POST[‘user_uuid’]) ? sanitize_text_field($_POST[‘user_uuid’]) : ”;

if (!empty($new_uuid) && is_uuid($new_uuid)) {
update_user_meta($user_id, ‘_uuid’, $new_uuid);
} else {
delete_user_meta($user_id, ‘_uuid’);
}
}

function is_uuid($value)
{
$pattern = ‘/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i’; // UUID pattern.

return (bool) preg_match($pattern, $value);
}

For security reasons, this input will only be active and editable for users with the manage_options permission, so only administrators will be able to add or update the UUID for users. Users without the proper permissions will see the input as read-only.

Change the Author URL

Next, we need to modify the author URL to use the UUID instead of the author’s username. This can be achieved by implementing the author_link filter, as shown below:

add_filter(‘author_link’, ‘change_author_url’, 10, 3);

function change_author_url($link, $author_id, $author_nicename)
{
$uuid = get_user_meta($author_id, ‘_uuid’, true);

if (is_string($uuid)) {
return str_replace(‘/’ . $authorSlug, ‘/’ . $uuid, $link);
}

return $link;
}

This implementation will update the generated URL for the author, affecting both the front-end theme and the admin interface.

WordPress admin panel showing author URL with UUID implementation
Handling Queries for Author Archives

Since we’ve modified the URL structure for author archive URLs, we also need to handle the corresponding queries. Without this, WordPress would return a 404 Not Found error because it wouldn’t recognize how to query authors by their _uuid metadata.

To implement this functionality, we can utilize the pre_get_posts hook as shown below:

add_action(‘pre_get_posts’, ‘author_uuid_query’);

function author_uuid_query($query) {
/**
* If the permalink structure is set to plain, the author should be queried
* by the user ID.
*/
if ((bool) get_option(‘permalink_structure’) === false) {
return;
}

$author_name = $query->query_vars[‘author_name’] ?? ”;

if (! is_string($author_name) || ! is_uuid($author_name)) {
$query->is_404 = true;
$query->is_author = false;
$query->is_archive = false;

return;
}

$users = get_users([
‘meta_key’ => ‘_uuid’,
‘meta_value’ => $author_name,
]);

if (count($users) <= 0) {
$query->is_404 = true;
$query->is_author = false;
$query->is_archive = false;

return;
}

$user = $users[0];

if (! $user instanceof WP_User) {
$query->is_404 = true;
$query->is_author = false;
$query->is_archive = false;

return;
}

$query->set(‘author_name’, $user->user_nicename);
}

The code above verifies whether the permalink structure is set to something other than the default “Plain” setting. We exclude handling queries for the “Plain” permalink structure because WordPress uses the author ID (?author=<id>) rather than the author_name in this case.

Changing the Author Slug in REST API

The user’s username is also exposed in the /wp-json/wp/v2/users REST API endpoint. To enhance security, we’ll modify this by replacing the username with the UUID. This can be accomplished by implementing the rest_prepare_user hook as demonstrated below:

add_filter(‘rest_prepare_user’, ‘change_user_slug_in_rest_api’, 10, 2);

function change_user_slug_in_rest_api($response, $user)
{
$data = $response->get_data();

if (is_array($data)) {
$uuid = get_user_meta($author_id, ‘_uuid’, true);

if (is_string($uuid)) {
$data[‘slug’] = $uuid;
}
}

$response->set_data($data);

return $response;
}

With this implementation, the author URL will now utilize the UUID instead of the username. Any attempts to access the author URL using the original username will result in a 404 not found error.

While this solution works effectively for smaller sites or those with limited users, it can become cumbersome to manage when dealing with a large number of users. In such cases, implementing UUIDs manually for each user would be time-consuming and impractical.

Therefore, let’s explore an alternative approach that offers a more streamlined solution.

The Easy Way

For a simpler solution, we’ll utilize a plugin called Feature Flipper. This plugin provides several security features, including the ability to obfuscate usernames using UUIDs.

You can install the plugin directly from the Plugins section in your WordPress dashboard. After installation and activation, navigate to Settings > Feature > Security and enable the Obfuscate Usernames option.

WordPress Feature Flipper plugin settings interface showing security options

Once you’ve saved the settings, the plugin will automatically generate UUIDs for all existing users on your site. Additionally, it will assign UUIDs to any new users upon registration.

Conclusion

Implementing UUIDs for author URLs is an effective security measure that helps protect your WordPress site by concealing author usernames. This approach significantly reduces the risk of brute-force attacks and unauthorized access attempts.

Throughout this tutorial, we’ve explored two implementation methods. For those who prefer a custom solution, the complete source code is available in our GitHub repository. Alternatively, the Feature Flipper plugin offers a more straightforward approach for users seeking a ready-made solution.

The post How to Use UUID for WordPress Author URL appeared first on Hongkiat.

Running Large Language Models (LLMs) Locally with LM Studio

Original Source: https://www.hongkiat.com/blog/local-llm-setup-optimization-lm-studio/

Running large language models (LLMs) locally with tools like LM Studio or Ollama has many advantages, including privacy, lower costs, and offline availability. However, these models can be resource-intensive and require proper optimization to run efficiently.

In this article, we will walk you through optimizing your setup, and in this case, we will be using LM Studio to make things a bit easier with its user-friendly interface and easy installation. We’ll be covering model selection and some performance tweaks to help you get the most out of your LLM setup.

Optimizing Large Language Models Locally with LM Studio

I assume that you have LM Studio installed; otherwise, please check out our article: How to Run LLM Locally on Your Computer with LM Studio.

Once you have it installed and running on your computer, we can get started:

Selecting the Right Model

Selecting the right Large Language Model (LLM) is important to get efficient and accurate results. Just like choosing the right tool for a job, different LLMs are better suited for different tasks.

There are a few things that we can look for when selecting models:

1. The Model Parameters

Think of parameters as the “knobs” and “dials” inside the LLM that are adjusted during training. They determine how the model understands and generates text.

The number of parameters is often used to describe the “size” of a model. You’ll commonly see models referred to as 2B (2 billion parameters), 7B (7 billion parameters), 14B, and so on.

Ollama model parameter selection interfaceModel parameter selection in Ollama

A model with more parameters generally has a greater capacity to learn complex patterns and relationships in language, but it typically also requires more RAM and processing power to run efficiently.

Here are some practical approaches you can take when selecting a model based on your system’s resources:

Resource Level
RAM
Recommended Models

Limited Resources
Less than 8GB
Smaller models (e.g., 4B or less)

Moderate Resources
8GB – 16GB
Mid-range models (e.g., 7B to 13B parameters)

Ample Resources
16GB+ with dedicated GPU
Larger models (e.g., 30B parameters and above)

Fortunately, as we can see below, LM Studio will automatically highlight the most optimal model based on your system’s resources, allowing you to simply select it.

LM Studio model selection interface with system recommendations
2. The Model Characteristics

While a model with billions of parameters plays a role, it’s not the sole determinant of performance or resource requirements. Different models are designed with different architectures and training data, which significantly impacts their capabilities.

If you need a model for general-purpose tasks, the following models might be good choices:

Llama 3.2
Mistral
Deepseek R1
Gemma

If you’re focused on coding, a code-focused model would be a better fit, such as:

Qwen 2.5 Coder
StableCode
Yi Coder

If you need to process images, you should use an LLM with multimodal capabilities, such as:

Llava
Llama 3.2 Vision
Janus

The best model for you depends on your specific use case and requirements. If you’re unsure, you can always start with a general-purpose model and adjust as needed.

3. Quantization

Another way to optimize your LLM setup is by using quantized models.

Imagine you have a huge collection of photos, and each photo takes up a lot of space on your hard drive. Quantization is like compressing those photos to save space. You might lose a tiny bit of image quality, but you gain a lot of additional free space.

Quantization levels are often described by the number of bits used to represent each value. Lower bit values, like going from 8-bit to 4-bit, result in higher compression and thus lower memory usage.

In LM Studio, you can find some quantized models, such as Llama 3.3 and Hermes 3.

You’ll find several download options for these models.

LM Studio model quantization options comparison

As shown above, the quantized model with 4-bit quantization (marked with Q4_K_M) is smaller than the 8-bit version (marked with Q8_0) by more than 1 GB.

If you’re experiencing memory issues, consider using quantized models to reduce memory usage.

Performance Tweaks

LM Studio offers a variety of settings that allow you to fine-tune your selected model’s performance.

These settings give you control over how the model uses your computer’s resources and generates text, enabling you to optimize for speed, memory usage, or specific task requirements.

You can find these settings in the My Models section within each downloaded model.

LM Studio My Models section interface

Let’s explore some of the key options:

Context Length
LM Studio context length settings

This setting determines how much of the previous conversation the model “remembers” when generating a response. A longer context length allows the model to maintain coherence over longer exchanges but requires more memory.

If you’re working on shorter tasks or have limited RAM, reducing the context length can improve performance.

GPU Offload
LM Studio GPU offload settings

This setting enables you to leverage your GPU’s power to accelerate inference. If you have a dedicated graphics card, enabling GPU offload can significantly boost performance.

CPU Thread Pool Size
LM Studio CPU thread pool size settings

This setting determines how many CPU cores are utilized for processing. Increasing the thread pool size can enhance performance, particularly on multi-core processors.

You can experiment to find the optimal configuration for your system.

K Cache/V Cache Quantization Type
LM Studio K Cache and V Cache quantization settings

These settings determine how the model’s key and value caches are quantized. Similar to model quantization, cache quantization reduces memory usage but may slightly impact accuracy.

You can experiment with different quantization levels to find the optimal balance between performance and accuracy.

Limit Response Length
LM Studio response length limit settings

This setting controls the maximum number of tokens (roughly equivalent to words or sub-word units) the model can generate in a single response. It directly impacts performance, primarily in terms of processing time and resource usage.

The main trade-off of limiting response length is that the model’s responses may be truncated or incomplete if they exceed the specified limit. This could be problematic if you require detailed or comprehensive answers.

Wrapping up

Running large language models locally provides a powerful tool for various tasks, from text generation to answering questions and even coding assistance.

However, with limited resources, optimizing your LLM setup through careful model selection and performance tuning is essential. By choosing the appropriate model and fine-tuning its settings, you can ensure efficient and effective operation on your system.

The post Running Large Language Models (LLMs) Locally with LM Studio appeared first on Hongkiat.

Adaptive Video Streaming With Dash.js In React

Original Source: https://smashingmagazine.com/2025/03/adaptive-video-streaming-dashjs-react/

I was recently tasked with creating video reels that needed to be played smoothly under a slow network or on low-end devices. I started with the native HTML5 <video> tag but quickly hit a wall — it just doesn’t cut it when connections are slow or devices are underpowered.

After some research, I found that adaptive bitrate streaming was the solution I needed. But here’s the frustrating part: finding a comprehensive, beginner-friendly guide was so difficult. The resources on MDN and other websites were helpful but lacked the end-to-end tutorial I was looking for.

That’s why I’m writing this article: to provide you with the step-by-step guide I wish I had found. I’ll bridge the gap between writing FFmpeg scripts, encoding video files, and implementing the DASH-compatible video player (Dash.js) with code examples you can follow.

Going Beyond The Native HTML5 <video> Tag

You might be wondering why you can’t simply rely on the HTML <video> element. There’s a good reason for that. Let’s compare the difference between a native <video> element and adaptive video streaming in browsers.

Progressive Download

With progressive downloading, your browser downloads the video file linearly from the server over HTTP and starts playback as long as it has buffered enough data. This is the default behavior of the <video> element.

<video src=”rabbit320.mp4″ />

When you play the video, check your browser’s network tab, and you’ll see multiple requests with the 206 Partial Content status code.

It uses HTTP 206 Range Requests to fetch the video file in chunks. The server sends specific byte ranges of the video to your browser. When you seek, the browser will make more range requests asking for new byte ranges (e.g., “Give me bytes 1,000,000–2,000,000”).

In other words, it doesn’t fetch the entire file all at once. Instead, it delivers partial byte ranges from the single MP4 video file on demand. This is still considered a progressive download because only a single file is fetched over HTTP — there is no bandwidth or quality adaptation.

If the server or browser doesn’t support range requests, the entire video file will be downloaded in a single request, returning a 200 OK status code. In that case, the video can only begin playing once the entire file has finished downloading.

The problems? If you’re on a slow connection trying to watch high-resolution video, you’ll be waiting a long time before playback starts.

Adaptive Bitrate Streaming

Instead of serving one single video file, adaptive bitrate (ABR) streaming splits the video into multiple segments at different bitrates and resolutions. During playback, the ABR algorithm will automatically select the highest quality segment that can be downloaded in time for smooth playback based on your network connectivity, bandwidth, and other device capabilities. It continues adjusting throughout to adapt to changing conditions.

This magic happens through two key browser technologies:

Media Source Extension (MSE)
It allows passing a MediaSource object to the src attribute in <video>, enabling sending multiple SourceBuffer objects that represent video segments.

<video src=”blob:https://example.com/6e31fe2a-a0a8-43f9-b415-73dc02985892″ />

Media Capabilities API
It provides information on your device’s video decoding and encoding abilities, enabling ABR to make informed decisions about which resolution to deliver.

Together, they enable the core functionality of ABR, serving video chunks optimized for your specific device limitations in real time.

Streaming Protocols: MPEG-DASH Vs. HLS

As mentioned above, to stream media adaptively, a video is split into chunks at different quality levels across various time points. We need to facilitate the process of switching between these segments adaptively in real time. To achieve this, ABR streaming relies on specific protocols. The two most common ABR protocols are:

MPEG-DASH,
HTTP Live Streaming (HLS).

Both of these protocols utilize HTTP to send video files. Hence, they are compatible with HTTP web servers.

This article focuses on MPEG-DASH. However, it’s worth noting that DASH isn’t supported by Apple devices or browsers, as mentioned in Mux’s article.

MPEG-DASH

MPEG-DASH enables adaptive streaming through:

A Media Presentation Description (MPD) file
This XML manifest file contains information on how to select and manage streams based on adaptive rules.
Segmented Media Files
Video and audio files are divided into segments at different resolutions and durations using MPEG-DASH-compliant codecs and formats.

On the client side, a DASH-compliant video player reads the MPD file and continuously monitors network bandwidth. Based on available bandwidth, the player selects the appropriate bitrate and requests the corresponding video chunk. This process repeats throughout playback, ensuring smooth, optimal quality.

Now that you understand the fundamentals, let’s build our adaptive video player!

Steps To Build an Adaptive Bitrate Streaming Video Player

Here’s the plan:

Transcode the MP4 video into audio and video renditions at different resolutions and bitrates with FFmpeg.
Generate an MPD file with FFmpeg.
Serve the output files from the server.
Build the DASH-compatible video player to play the video.

Install FFmpeg

For macOS users, install FFmpeg using Brew by running the following command in your terminal:

brew install ffmpeg

For other operating systems, please refer to FFmpeg’s documentation.

Generate Audio Rendition

Next, run the following script to extract the audio track and encode it in WebM format for DASH compatibility:

ffmpeg -i “input_video.mp4” -vn -acodec libvorbis -ab 128k “audio.webm”

-i “input_video.mp4”: Specifies the input video file.
-vn: Disables the video stream (audio-only output).
-acodec libvorbis: Uses the libvorbis codec to encode audio.
-ab 128k: Sets the audio bitrate to 128 kbps.
“audio.webm”: Specifies the output audio file in WebM format.

Generate Video Renditions

Run this script to create three video renditions with varying resolutions and bitrates. The largest resolution should match the input file size. For example, if the input video is 576×1024 at 30 frames per second (fps), the script generates renditions optimized for vertical video playback.

ffmpeg -i “input_video.mp4” -c:v libvpx-vp9 -keyint_min 150 -g 150
-tile-columns 4 -frame-parallel 1 -f webm
-an -vf scale=576:1024 -b:v 1500k “input_video_576x1024_1500k.webm”
-an -vf scale=480:854 -b:v 1000k “input_video_480x854_1000k.webm”
-an -vf scale=360:640 -b:v 750k “input_video_360x640_750k.webm”

-c:v libvpx-vp9: Uses the libvpx-vp9 as the VP9 video encoder for WebM.
-keyint_min 150 and -g 150: Set a 150-frame keyframe interval (approximately every 5 seconds at 30 fps). This allows bitrate switching every 5 seconds.
-tile-columns 4 and -frame-parallel 1: Optimize encoding performance through parallel processing.
-f webm: Specifies the output format as WebM.

In each rendition:

-an: Excludes audio (video-only output).
-vf scale=576:1024: Scales the video to a resolution of 576×1024 pixels.
-b:v 1500k: Sets the video bitrate to 1500 kbps.

WebM is chosen as the output format, as they are smaller in size and optimized yet widely compatible with most web browsers.

Generate MPD Manifest File

Combine the video renditions and audio track into a DASH-compliant MPD manifest file by running the following script:

ffmpeg
-f webm_dash_manifest -i “input_video_576x1024_1500k.webm”
-f webm_dash_manifest -i “input_video_480x854_1000k.webm”
-f webm_dash_manifest -i “input_video_360x640_750k.webm”
-f webm_dash_manifest -i “audio.webm”
-c copy
-map 0 -map 1 -map 2 -map 3
-f webm_dash_manifest
-adaptation_sets “id=0,streams=0,1,2 id=1,streams=3”
“input_video_manifest.mpd”

-f webm_dash_manifest -i “…”: Specifies the inputs so that the ASH video player will switch between them dynamically based on network conditions.
-map 0 -map 1 -map 2 -map 3: Includes all video (0, 1, 2) and audio (3) in the final manifest.
-adaptation_sets: Groups streams into adaptation sets:
id=0,streams=0,1,2: Groups the video renditions into a single adaptation set.
id=1,streams=3: Assigns the audio track to a separate adaptation set.

The resulting MPD file (input_video_manifest.mpd) describes the streams and enables adaptive bitrate streaming in MPEG-DASH.

<?xml version=”1.0″ encoding=”UTF-8″?>
<MPD
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xmlns=”urn:mpeg:DASH:schema:MPD:2011″
xsi:schemaLocation=”urn:mpeg:DASH:schema:MPD:2011″
type=”static”
mediaPresentationDuration=”PT81.166S”
minBufferTime=”PT1S”
profiles=”urn:mpeg:dash:profile:webm-on-demand:2012″>

<Period id=”0″ start=”PT0S” duration=”PT81.166S”>
<AdaptationSet
id=”0″
mimeType=”video/webm”
codecs=”vp9″
lang=”eng”
bitstreamSwitching=”true”
subsegmentAlignment=”false”
subsegmentStartsWithSAP=”1″>

<Representation id=”0″ bandwidth=”1647920″ width=”576″ height=”1024″>
<BaseURL>input_video_576x1024_1500k.webm</BaseURL>
<SegmentBase indexRange=”16931581-16931910″>
<Initialization range=”0-645″ />
</SegmentBase>
</Representation>

<Representation id=”1″ bandwidth=”1126977″ width=”480″ height=”854″>
<BaseURL>input_video_480x854_1000k.webm</BaseURL>
<SegmentBase indexRange=”11583599-11583986″>
<Initialization range=”0-645″ />
</SegmentBase>
</Representation>

<Representation id=”2″ bandwidth=”843267″ width=”360″ height=”640″>
<BaseURL>input_video_360x640_750k.webm</BaseURL>
<SegmentBase indexRange=”8668326-8668713″>
<Initialization range=”0-645″ />
</SegmentBase>
</Representation>

</AdaptationSet>

<AdaptationSet
id=”1″
mimeType=”audio/webm”
codecs=”vorbis”
lang=”eng”
audioSamplingRate=”44100″
bitstreamSwitching=”true”
subsegmentAlignment=”true”
subsegmentStartsWithSAP=”1″>

<Representation id=”3″ bandwidth=”89219″>
<BaseURL>audio.webm</BaseURL>
<SegmentBase indexRange=”921727-922055″>
<Initialization range=”0-4889″ />
</SegmentBase>
</Representation>

</AdaptationSet>
</Period>
</MPD>

After completing these steps, you’ll have:

Three video renditions (576×1024, 480×854, 360×640),
One audio track, and
An MPD manifest file.

input_video.mp4
audio.webm
input_video_576x1024_1500k.webm
input_video_480x854_1000k.webm
input_video_360x640_750k.webm
input_video_manifest.mpd

The original video input_video.mp4 should also be kept to serve as a fallback video source later.

Serve The Output Files

These output files can now be uploaded to cloud storage (e.g., AWS S3 or Cloudflare R2) for playback. While they can be served directly from a local folder, I highly recommend storing them in cloud storage and leveraging a CDN to cache the assets for better performance. Both AWS and Cloudflare support HTTP range requests out of the box.

Building The DASH-Compatible Video Player In React

There’s nothing like a real-world example to help understand how everything works. There are different ways we can implement a DASH-compatible video player, but I’ll focus on an approach using React.

First, install the Dash.js npm package by running:

npm i dashjs

Next, create a component called <DashVideoPlayer /> and initialize the Dash MediaPlayer instance by pointing it to the MPD file when the component mounts.

The ref callback function runs upon the component mounting, and within the callback function, playerRef will refer to the actual Dash MediaPlayer instance and be bound with event listeners. We also include the original MP4 URL in the <source> element as a fallback if the browser doesn’t support MPEG-DASH.

If you’re using Next.js app router, remember to add the ‘use client’ directive to enable client-side hydration, as the video player is only initialized on the client side.

Here is the full example:

import dashjs from ‘dashjs’
import { useCallback, useRef } from ‘react’

export const DashVideoPlayer = () => {
const playerRef = useRef()

const callbackRef = useCallback((node) => {
if (node !== null) {
playerRef.current = dashjs.MediaPlayer().create()

playerRef.current.initialize(node, “https://example.com/uri/to/input_video_manifest.mpd”, false)

playerRef.current.on(‘canPlay’, () => {
// upon video is playable
})

playerRef.current.on(‘error’, (e) => {
// handle error
})

playerRef.current.on(‘playbackStarted’, () => {
// handle playback started
})

playerRef.current.on(‘playbackPaused’, () => {
// handle playback paused
})

playerRef.current.on(‘playbackWaiting’, () => {
// handle playback buffering
})
}
},[])

return (
<video ref={callbackRef} width={310} height={548} controls>
<source src=”https://example.com/uri/to/input_video.mp4″ type=”video/mp4″ />
Your browser does not support the video tag.
</video>
)
}

Result

Observe the changes in the video file when the network connectivity is adjusted from Fast 4G to 3G using Chrome DevTools. It switches from 480p to 360p, showing how the experience is optimized for more or less available bandwidth.

Conclusion

That’s it! We just implemented a working DASH-compatible video player in React to establish a video with adaptive bitrate streaming. Again, the benefits of this are rooted in performance. When we adopt ABR streaming, we’re requesting the video in smaller chunks, allowing for more immediate playback than we’d get if we needed to fully download the video file first. And we’ve done it in a way that supports multiple versions of the same video, allowing us to serve the best format for the user’s device.

References

“Http Range Request And MP4 Video Play In Browser,” Zeng Xu
Setting up adaptive streaming media sources (Mozilla Developer Network)
DASH Adaptive Streaming for HTML video (Mozilla Developer Network)

Vibe Coding: Revolution or Recipe for Disaster in App and Game Development?

Original Source: https://webdesignerdepot.com/vibe-coding-revolution-or-recipe-for-disaster-in-app-and-game-development/

Vibe coding is a new concept where developers use AI tools to generate code through simple text prompts, bypassing traditional coding methods. While it offers quick prototyping and democratizes development, it comes with limitations in terms of code quality, scalability, and long-term viability for complex projects.

Korean Air Takes Off with a Fresh New Look

Original Source: https://webdesignerdepot.com/korean-air-takes-off-with-a-fresh-new-look/

Korean Air’s rebranding features a modernized Taegeuk symbol in a deeper blue, paired with a new typeface that’s cleaner and more streamlined. The updated logo and symbol, combined with a metallic look on the aircraft livery, create a sleek, contemporary visual identity that emphasizes the airline’s innovative and forward-thinking approach.

Ferm Living's Refined Visual Identity | Branding & Design

Original Source: https://abduzeedo.com/ferm-livings-refined-visual-identity-branding-design

Ferm Living’s Refined Visual Identity | Branding & Design

abduzeedo
03/25 — 2025

Explore Ferm Living’s new visual identity, a blend of Scandinavian design and modern branding. See how e-Types and Signifly evolved the brand.

Ferm Living, known for its Scandinavian aesthetic, has grown into a global brand. Since its founding in 2006, the Danish company has offered furniture, accessories, and lighting. Today, Ferm Living operates in 85 countries, focused on creating comfortable spaces.

The brand has recently updated its visual identity, reflecting its growth and dedication to timeless design. Trine Andersen, the founder of Ferm Living, collaborated with the Danish design agency e-Types on the new logo. Signifly, a digital agency also based in Denmark, played a key role in applying the new visual identity across various platforms, including packaging and the online store.

A Natural Evolution in Branding

The new brand design, developed over the past year by Ferm Living, e-Types, and Signifly, centers on a redesigned logo. This logo reinterprets Ferm Living’s former iconic bird motif and applies it across different brand touchpoints.

According to Alexander Spliid, Design Director & Partner at Signifly, the new design aims to express “a unique type of comfort and accessible luxury.” The goal is to invite people in, rather than simply appearing stylish in magazines or on social media.

The updated visual identity also includes a new color palette and revised typography. The typography combines soft curves and sharp edges, balancing warmth with a modern feel. A set of four core colors provides a consistent and recognizable look across all communications, and these are complemented by dynamic seasonal colors.

Ferm Living and Signifly worked together to implement the visual identity across all brand elements. This was a significant undertaking, as the identity needed to work effectively across the entire product range and the brand’s online presence. Spliid notes that the collaboration involved reviewing all media and establishing brand guidelines to ensure consistency and efficiency across all products and customer interactions.

From a Simple Idea to a Global Brand

Trine Andersen’s journey began in 2006 when she created her own wallpaper because she couldn’t find what she wanted for her home. Gradually, her collection expanded, and Ferm Living began selling to a growing number of markets.

Today, Ferm Living’s products are available in over 85 countries through retailers, online stores, and its own webshop. The brand also serves offices, hotels, and similar commercial spaces. The new brand design aims to refresh this story of Scandinavian design and entrepreneurial spirit.

The new branding and visual identity successfully captures the essence of Scandinavian design while positioning Ferm Living for continued global growth. The collaboration between Ferm Living, e-Types, and Signifly demonstrates a thoughtful approach to evolving a brand’s identity.

For more information check out Signifly website.

Branding and visual identity artifacts

Previewing Content Changes In Your Work With document.designMode

Original Source: https://smashingmagazine.com/2025/03/previewing-content-changes-work-documentdesignmode/

So, you just deployed a change to your website. Congrats! Everything went according to plan, but now that you look at your work in production, you start questioning your change. Perhaps that change was as simple as a new heading and doesn’t seem to fit the space. Maybe you added an image, but it just doesn’t feel right in that specific context.

What do you do? Do you start deploying more changes? It’s not like you need to crack open Illustrator or Figma to mock up a small change like that, but previewing your changes before deploying them would still be helpful.

Enter document.designMode. It’s not new. In fact, I just recently came across it for the first time and had one of those “Wait, this exists?” moments because it’s a tool we’ve had forever, even in Internet Explorer 6. But for some reason, I’m only now hearing about it, and it turns out that many of my colleagues are also hearing about it for the first time.

What exactly is document.designMode? Perhaps a little video demonstration can help demonstrate how it allows you to make direct edits to a page.

At its simplest, document.designMode makes webpages editable, similar to a text editor. I’d say it’s like having an edit mode for the web — one can click anywhere on a webpage to modify existing text, move stuff around, and even delete elements. It’s like having Apple’s “Distraction Control” feature at your beck and call.

I think this is a useful tool for developers, designers, clients, and regular users alike.

You might be wondering if this is just like contentEditable because, at a glance, they both look similar. But no, the two serve different purposes. contentEditable is more focused on making a specific element editable, while document.designMode makes the whole page editable.

How To Enable document.designMode In DevTools

Enabling document.designMode can be done in the browser’s developer tools:

Right-click anywhere on a webpage and click Inspect.
Click the Console tab.
Type document.designMode = “on” and press Enter.

To turn it off, refresh the page. That’s it.

Another method is to create a bookmark that activates the mode when clicked:

Create a new bookmark in your browser.
You can name it whatever, e.g., “EDIT_MODE”.
Input this code in the URL field:

javascript:(function(){document.designMode = document.designMode === ‘on’ ? ‘off’ : ‘on’;})();

And now you have a switch that toggles document.designMode on and off.

Use Cases

There are many interesting, creative, and useful ways to use this tool.

Basic Content Editing

I dare say this is the core purpose of document.designMode, which is essentially editing any text element of a webpage for whatever reason. It could be the headings, paragraphs, or even bullet points. Whatever the case, your browser effectively becomes a “What You See Is What You Get” (WYSIWYG) editor, where you can make and preview changes on the spot.

Landing Page A/B Testing

Let’s say we have a product website with an existing copy, but then you check out your competitors, and their copy looks more appealing. Naturally, you’d want to test it out. Instead of editing on the back end or taking notes for later, you can use document.designMode to immediately see how that copy variation would fit into the landing page layout and then easily compare and contrast the two versions.

This could also be useful for copywriters or solo developers.

SEO Title And Meta Description

Everyone wants their website to rank at the top of search results because that means more traffic. However, as broad as SEO is as a practice, the <title> tag and <meta> description is a website’s first impression in search results, both for visitors and search engines, as they can make or break the click-through rate.

The question that arises is, how do you know if certain text gets cut off in search results? I think document.designMode can fix that before pushing it live.

With this tool, I think it’d be a lot easier to see how different title lengths look when truncated, whether the keywords are instantly visible, and how compelling it’d be compared to other competitors on the same search result.

Developer Workflows

To be completely honest, developers probably won’t want to use document.designMode for actual development work. However, it can still be handy for breaking stuff on a website, moving elements around, repositioning images, deleting UI elements, and undoing what was deleted, all in real time.

This could help if you’re skeptical about the position of an element or feel a button might do better at the top than at the bottom; document.designMode sure could help. It sure beats rearranging elements in the codebase just to determine if an element positioned differently would look good. But again, most of the time, we’re developing in a local environment where these things can be done just as effectively, so your mileage may vary as far as how useful you find document.designMode in your development work.

Client And Team Collaboration

It is a no-brainer that some clients almost always have last-minute change requests — stuff like “Can we remove this button?” or “Let’s edit the pricing features in the free tier.”

To the client, these are just little tweaks, but to you, it could be a hassle to start up your development environment to make those changes. I believe document.designMode can assist in such cases by making those changes in seconds without touching production and sharing screenshots with the client.

It could also become useful in team meetings when discussing UI changes. Seeing changes in real-time through screen sharing can help facilitate discussion and lead to quicker conclusions.

Live DOM Tutorials

For beginners learning web development, I feel like document.designMode can help provide a first look at how it feels to manipulate a webpage and immediately see the results — sort of like a pre-web development stage, even before touching a code editor.

As learners experiment with moving things around, an instructor can explain how each change works and affects the flow of the page.

Social Media Content Preview

We can use the same idea to preview social media posts before publishing them! For instance, document.designMode can gauge the effectiveness of different call-to-action phrases or visualize how ad copy would look when users stumble upon it when scrolling through the platform. This would be effective on any social media platform.

Memes

I didn’t think it’d be fair not to add this. It might seem out of place, but let’s be frank: creating memes is probably one of the first things that comes to mind when anyone discovers document.designMode.

You can create parody versions of social posts, tweak article headlines, change product prices, and manipulate YouTube views or Reddit comments, just to name a few of the ways you could meme things. Just remember: this shouldn’t be used to spread false information or cause actual harm. Please keep it respectful and ethical!

Conclusion

document.designMode = “on” is one of those delightful browser tricks that can be immediately useful when you discover it for the first time. It’s a raw and primitive tool, but you can’t deny its utility and purpose.

So, give it a try, show it to your colleagues, or even edit this article. You never know when it might be exactly what you need.

Further Reading

“New Front-End Features For Designers In 2025,” Cosima Mielke
“Useful DevTools Tips and Tricks,” Patrick Brosset
“Useful CSS Tips And Techniques,” Cosima Mielke

Shoreride's Branding: A Study in Visual Identity Design

Original Source: https://abduzeedo.com/shorerides-branding-study-visual-identity-design

Shoreride’s Branding: A Study in Visual Identity Design

abduzeedo
03/24 — 2025

Explore Shoreride’s branding and visual identity, a design focused on water, adventure, and simple solutions.

Shoreride, a product designed to help people transport paddleboards and kayaks, has a visual identity crafted by Arthur Stovell of Mondial Studio. The branding extends beyond the product itself, focusing on a deeper connection with water and outdoor adventure.

The core concept, as the designer states, centers not on the product, but on “the bigger idea of a love of water and helping people to have water based micro-adventures.” This philosophy is evident in the chosen design elements.

A key element of Shoreride’s visual identity is a bespoke “O” symbol. This symbol, rather than directly representing the product, draws its inspiration from “the calmness of being on the ocean.” The “O” is versatile, functioning both as a standalone icon and within typographic compositions.

The color palette selected for Shoreride is both “bold and vibrant,” conveying a sense of energy while remaining appropriate for the water sports industry. This choice of color helps to position the brand within its target market while also evoking the feeling of being outdoors and active. The design uses color to create a feeling that is energetic, and appropriate.

The branding extends across various applications. The design is visible on business cards, websites, and promotional materials. This consistency helps to establish a strong and recognizable brand presence. The visual identity is also applied to merchandise.

The designers aimed to create a brand that is both practical and aspirational. It speaks to individuals who enjoy water sports and seek simple solutions to enhance their outdoor experiences. The branding suggests a lifestyle centered around adventure, ease, and a connection with nature. The design is simple, yet effective.

The design effectively communicates the brand’s core values: a love for the water, a passion for making things, and a commitment to sustainability. Shoreride emphasizes product longevity and material transparency, using recycled materials and working with manufacturers that adhere to high standards.

The branding successfully captures the essence of the product and its target audience. It is a visual identity that speaks to a lifestyle, rather than just a product. The design is both simple and effective, and it is likely to resonate with people who love the water and outdoor adventure.

For more information make sure to check out https://mondial-studio.com/work/shoreride

Branding and visual identity artifacts