The essential news about content management systems and mobile technology. Powered by Perfect Publisher and XT Search for Algolia.
The News Site publishes posts to the following channels: Facebook, Instagram, Twitter, Telegram, Web Push, Bluesky, and Blogger.
Laravel Forge announced it has added first-party integration with Statamic.
Statamic is a modern, clean, and highly adaptable CMS that can run full-stack, headless, on flat files or databases, & as an SSG. Statamic is built as a highly extendable, standalone capable, Laravel CMS package. If you’re already a Laravel developer, you’ll feel right at home extending core features with Models, Service Providers, and Middleware. You can even drop it into existing Laravel applications to add a full CMS in seconds.
With this new integration when you add a new site you'll have the option to choose Statamic:
Then, you can select the starter kit you'd like to use, and it'll set up everything:
This is now available for every Forge customer and it's a super easy way to start using Statamic.
The post Laravel Forge adds Statamic Integration appeared first on Laravel News.
Join the Laravel Newsletter to get all the latest Laravel articles like this directly in your inbox.
Read more https://laravel-news.com/laravel-forge-adds-statamic-integration
This PHP Data Model package provides a lightweight, non-invasive way to hydrate type-safe PHP objects recursively. It uses reflection and PHP attributes to hydrate objects and instantiate them based on type hints:
class Address
{
use \Zerotoprod\DataModel\DataModel;
public string $street;
public string $city;
}
class User
{
use \Zerotoprod\DataModel\DataModel;
public string $username;
public Address $address;
}
$User = User::from([
'username' => 'John Doe',
'address' => [
'street' => '123 Main St',
'city' => 'Hometown',
],
]);
echo $User->address->city; // Hometown
This package also includes advanced features like required properties that are enforced via a PHP attribute:
use Zerotoprod\DataModel\Describe;
class User
{
use \Zerotoprod\DataModel\DataModel;
#[Describe(['required' => true])]
public string $username;
public string $email;
}
User::from(['email' => This email address is being protected from spambots. You need JavaScript enabled to view it. ']);
// Throws PropertyRequiredException exception:
// Property: username is required
Additional related packages also provide helpers, factories, transformers, and more. You can get started with this package by reading the documentation; the source code is also available on GitHub at zero-to-prod/data-model.
The post Transform Data into Type-safe DTOs with this PHP Package appeared first on Laravel News.
Join the Laravel Newsletter to get all the latest Laravel articles like this directly in your inbox.
Read more https://laravel-news.com/zero-to-prod-data-model-php-package
Eric Barnes and Chris Morrell discuss the resurgence of PHP meetups post-COVID, focusing on the creation and growth of PHPX, a new initiative to revitalize local PHP communities.
You can also view all the past Laravel Creator series interviews on our site.
The post PHPxWorld - The resurgence of PHP meet-ups with Chris Morrell appeared first on Laravel News.
Join the Laravel Newsletter to get all the latest Laravel articles like this directly in your inbox.
Read more https://laravel-news.com/phpxworld-the-resurgence-of-php-meet-ups-with-chris-morrell
PhpStorm 2024.3 was released and includes support for PHP 8.4 as well as some awesome updates for Laravel Developers, such as detection of Laravel Herd PHP executables, mutation support for Pest 3, and parallel testing for Pest.
PhpStorm automatically detects the path for your machine's current Herd PHP version. You can configure the Herd interpreter from the settings:
PhpStorm has leveled up the Pest 3.0 testing experience for Laravel with full support for running parallel and mutation tests directly from your IDE. You can run tests with the mutation option directly from a test file:
You can also run a group of tests in parallel by selecting the
option when clicking the run button in the gutter of a file. You
can run tests by clicking on a it()
or
test()
function directly, as well as a group of tests
within a describe()
closure:
This update also includes many PHP feature updates, such as refactoring to the new PHP 8.4 array functions, Property Hook support, and more. You can learn about everything new in PhpStorm 2024.3 by reading the PhpStorm blog post announcement.
Get started by Downloading PhpStorm 2024.3 now!
The post Herd Executable Support and Pest 3 Mutation Testing in PhpStorm 2024.3 appeared first on Laravel News.
Join the Laravel Newsletter to get all the latest Laravel articles like this directly in your inbox.
Read more https://laravel-news.com/phpstorm-2024-3
Everyone who uses the Internet looks at website layout examples every day. Yet, unless you are a designer or in the process of building your own site, few of us ever stop to think about what actually makes a good web-page structure.
You may instinctively feel it when you encounter one that is less than satisfactory. But do you know how to design a website layout that both pleases your visitors and allows you to achieve what you want with your site?
If the answer to that question is no, don’t fret. We’ll show you examples of different types of website layouts you can choose from and help you understand which are most appropriate in different situations. Then, we’ll explain how to choose a layout for your own website, as well as share some tips and tools you can use to create layout mockups.
Table of Contents
1. Z-pattern2. F-pattern3. Magazine4. Grid5. Modular6. Single-Column7. Content-Focused8. Full-Screen9. Hero10. Split-Screen11. Asymmetrical Understanding website layout vs. website structureWhat Is the Goal of Your Website Layout?Consider the Type of Website You Are BuildingDo Your ResearchConsider What You LikeBase Your Design on Common Layouts Wireframing your layoutAdditional TipsTools for WireframingIn order to give you ideas about what a website layout can look like, let’s go over some common types, the kinds of websites they are most suitable for, and examples. Be aware that for some of these, the distinction is a bit fluid. You can often apply more than one layout principle to a single site.
This Z-pattern layout is based on the way many people naturally look at website content. They start at the top left, scan to the top right, then go down to the left and to the right again.
You can take advantage of that, for example, by placing the logo in the upper left corner and the navigation menu across from it. Your most important information, such as your heading and visuals, appears diagonally down left from that, while the call to action is to the right of it again.
This website layout is very skim friendly and most appropriate for sites that have relatively little content that you want to give much attention to, like CTAs, forms, and buttons.
You can also line up several Z-patterns with alternating elements to lead visitors down in zigzag form and keep them engaged.
This layout is also based on common page-scanning behavior, first discovered and defined by the Nielsen Norman Group.
It is observable on both desktop and mobile and especially for more text-heavy sites. That makes it well suited for websites with lots of options or written content that needs to be scanned quickly, e.g. news sites or search result pages. You can take advantage of it by using the left side as an anchor.
However, it is important to note that NNG has come out in recent years saying that, while the F-pattern is a natural reading sequence, it is not good for users and websites. They state you should encourage readers to consume the rest of your content through text formatting like bullet points or visuals like icons and images.
Magazine layouts are inspired by printed newspapers and magazines and there are many examples of this kind of website out there. They usually consist of multiple columns made up of individual containers that create a complex visual hierarchy.
In this website layout, different elements often have different weights assigned to them to show their relative importance. You can do this, for example, with bigger headlines or the use of images. This creates a multi-level hierarchy.
The goal is to allow visitors to scan a great amount of information quickly. As a consequence, it’s a great choice for content-heavy websites, especially those covering a multitude of topics. Dashboards, such as for web applications, are also good candidates. The Gazette theme is another great example for how to use a magazine layout.
Also called box-based website layouts, grid layouts distribute elements across the page according to a clear underlying order.
The result is a well-structured and geometrically-arranged design. It’s ideal for sites that have a lot of content of equal importance, e.g. portfolios. Linked pages often appear in the form of an image plus title and a short abstract.
If your content does not all have the same priority, there are lots of options to determine relative importance of different elements as well.
Next in our list of website layout examples, we have a special kind of grid structure, which is also known as block layout. In it, each unit of content has their own space, is evenly spaced, and thus easy to locate. You might be very familiar with it from Pinterest and other sites that use a card layout.
This website layout is also great for mobile design, as it rearranges well for smaller screens. If you want to use it, it is most suitable for business websites, content collections like product pages, or the display of custom post types.
Our next website layout example arranges all content in one vertical column and orders it sequentially.
Single-column layouts are popular and easy to use, especially on mobile, where users prefer to scroll over clicking from page to page. To that end, it benefits from a back-to-top button and sticky menu.
If your content is very text-heavy, remember to break it up with images to ensure readability. As you can imagine, this website layout is frequently used for blogs and anything that has a feed-like content pipeline. Landing pages are also a good candidate.
As the name already suggests, this layout is most appropriate for websites whose primary appeal is (written) content. It’s similar to the single-column variety, often with one main column and one or more side columns for additional information.
While the focus is on the primary content, you can surround it by other elements that you want visitors to notice after landing on the page for the main attraction. This could be a newsletter signup form in the sidebar, advertisement for your product or service, or a sales banner.
Naturally, this page structure lends itself best to blogs or other websites that mainly deal in writing. At the same time, singular pages on websites with a different layout can also benefit from a content-focused approach.
This is a website layout that covers the entire page. There are no sidebars, the screen comes across as a singular unit.
Sometimes this design is coupled with a modular build that scrolls screen by screen, so that each section is like a separate page. It often has an image or even video in the background.
Full-screen layouts are best suited for one-page designs, storytelling, and product pages. They work best if you couple them with captivating colors and/or visuals. If you like this look, the Afterlight theme might be a good option for you.
A special type of full-screen website layout with a large image at the top (also called “hero image”) that contains the main elements like your site title, CTA, etc.
Hero layouts are a good way to quickly capture attention and clarify the topic of the page, especially for products. It’s a big, bold visual statement with additional information in the form of text elements.
The layout works best for product pages and ecommerce websites in general. However, some blogs also use it.
In this website layout, the screen is divided in the middle.
Split-screen layouts provide a balanced symmetry allowing you to represent two different ideas and give them the same consideration. Alternatively, you can also show off the same idea from different angles or use it to divide ecommerce customers at the start of their journey.
Split screen is a great option for websites that use two different types of content (e.g. images and text) or provide two distinct customer journeys. It’s also suitable simply for websites that want a modern look. However, it’s not so great for text-heavy designs because it doesn’t scale well, especially on mobile.
A design similar to split screen or grid but with uneven distribution, offering an added dynamic.
You can use scale, color, width, and more to provide different focal points and highlights on the page. However, asymmetry does not mean chaos. There’s an underlying order that provides elegance and congruity.
What are good candidates for asymmetrical website layouts?
Websites that want to go for something modern, innovative and guide the user’s attention in dynamic ways. Business websites, online portfolios, or landing pages are prime beneficiaries.
With a better idea about what types of website layouts exist, how do you pick the right one for your website? Here are a few practical tips to do so.
First, make sure that a website layout is what you’re looking to implement. In a sentence, this means the way that the elements on your web pages (content, navigation, header, footer, and everything else visible) are arranged to present the information included within them.
In contrast to website structure, layout focuses on the individual page experience and how users consume the content on your pages. It is less concerned about leading them around your site as a whole (though, of course, that’s part of it as well).
While different web pages on your site can (and should) have different layouts, the basic structure usually stays the same. For example, the information needed on a shop page is very different from that of a product page or something like an About section. At the same time, the basic layout elements, especially header and footer, usually stay constant across most pages.
This makes for a consistent user experience, while allowing for flexibility to deliver different types of content to users.
Good layout has the power to keep users on your page longer and engage them. Bad layout can do the opposite. In times where most visitors leave your site within ten seconds, you need all the edge you can get. Here are some things that good website layout accomplishes:
The best website layout is one that you barely notice because you can easily find every element you are looking for. It is also one aimed at your target group, their preferences, behaviors, and needs.
As you have seen above, different website layouts are more or less suitable for different types of websites. Therefore, in order to choose the right one for you, you first need to be crystal clear about what kind of site you are building.
Business sites, shops, blogs – they all have very different focal points and demand different layouts. Clarity in this area is the first step towards making the right choice.
Your website does not exist in a vacuum. Look at websites that are the same type as yours (e.g. blog, ecommerce, B2B, B2C, etc.) but sell different types of products/services or serve different industries/niches than your own.
When you do, identify common website layouts, best practices, what looks good, and see what you can do better with your layout.
Yes, a website is primarily there to serve other people. However, at the same time, it also needs to be something you like. If you are turned off by your own website, it’s unlikely that you will put in the energy and enthusiasm needed to run it and make it successful.
For that reason, while considering which website layout to choose, also do some introspection. Think about what you personally like and would like to see on your site.
The website layouts we discussed above are commonly known because they work. They have proven to be usable over time, are familiar to users, and ready to go. Therefore, it’s a good idea to go with one of the established layouts and then add your individual flavor to it.
WordPress themes are flexible enough to support different types of page layouts out of the box. But what if you are designing your own theme or are working with a website developer? In this case, you might want to create a wireframe. This helps to map out your page layout and is also good to clarify your ideas and get them onto paper.
A wireframe is like a map of your page. It’s not the finished design but something that shows its structure.
Here’s how to create a simple wireframe:
Pro Tip: Did you know that sites hosted with WordPress.com includes wireframe block patterns that you can use? These are patterns that are closer to a blank slate for your page without much design, but they include a basic structural layout. Just choose a wireframe pattern you like from the patterns library and customize it to suit your needs.
In order to create the best possible website layout, here are some tips and concepts to keep in mind:
You can use different kinds of tools to build wireframes:
The layout is one of the most decisive factors for the usability of your website. For that reason, it deserves ample consideration so that you can serve your visitors in the best way possible.
Established page structures are a great way to get started. They have proven themselves over time and are able to fulfill established user expectations. While you can (and should) add your own flavor, you don’t have to reinvent the wheel. It’s also often feasible and sensible to use more than one layout in a website, especially on different pages.
When making decisions, consider your type of website, goals, industry, and personal likes. Then, use wireframing to capture your ideas for your website layout. And remember, it’s all about your users. The best layouts are those that they hardly notice.
Build fast, ship faster with Studio, a fast, free way to develop locally with WordPress. Get started now.
Read more https://wordpress.com/blog/2024/11/14/website-layout-examples/
Page 8 of 1378