Tuesday, 16 January 2018

How to Properly Load Test a WordPress Website

WordPress is without a doubt the most popular content management system in the history of the web. The power and versatility of the combination of technologies like SQL, PHP and web browsers have made it possible to produce a system that can be adapted for nearly any purpose including photo galleries, online comic books, and even web-based games.

When it comes to load testing and performance testing a WordPress based system, there are some technical details that have to be considered first. The basic principles of testing a web server are fairly consistent site to site, but the software involved in building and serving a WordPress system may be either subtly or completely different depending on how the server and the content management systems are configured.

If you are planning on instituting load testing of a WordPress-based system, here are some tips to get maximum efficiency out of the process and to make sure you test the site properly.

How to Properly Load Test WordPress Websites

load test wordpress websites

N-Tier Software

The first and most important consideration for load testing a WordPress site is to recognize the web server software is no longer just returning data in response to a browser request. Several processes are involved in gathering data, and these processes are subject to a wide variety of architecture, CPU, memory, and hardware speed limitations.

The technical description of this kind of software is “multiple tier” or “N-tier” where the N is a number representing the different levels of software involved. A WordPress system has a minimum of three tiers, and sometimes more. The first is the database. The second is the middleware, written in PHP, which provides the business logic for the system. The third tier is the user interface and browser.

When load testing the system, it should be understood the database and the middleware tiers are both constrained by limits that may not be obvious during testing.

Testing vs. Production

The second priority in load testing a WordPress system is to make sure the exact configuration of server software on the test system is replicated on the production system. This should include the database version, the WordPress version, the theme, all the necessary plugins and wherever possible, the network itself.

While it might seem that something as apparently routine as a plug-in version might be of little concern in the grand scheme of things, depending on which plug-in you are testing, it can have a dramatic effect on apparent speed. This consideration feeds directly into the next priority.

Bare Metal

how to load test wordpess websites bare metal

It is always a good idea to test any web-based system with only the minimal amount of configuration and add-ons installed. In the case of content management systems like WordPress, having a caching plug-in or an accelerated mobile pages plug-in running can end up simulating a super-fast server that falls apart under any circumstances that prevent the caching or acceleration plug-ins from working properly.

Part of this process should be to verify that requests sent to the server during testing are actually touching the software on the server. If your test battery is only creating views of your site that have already been cached, you may not be getting the full picture of your site’s actual performance under heavy loads (with a tool like Load View).

Version Control

Like any software, you should make certain you are running the most recent versions of all WordPress installations, plug-ins, themes and both database and PHP software, according to Web Hosting Buddy. Make certain your test systems match your production systems version for version as well. Even a slight difference can introduce variances into the testing process that will either cost you additional time tracking down the changes or additional work fixing things that aren’t broken and then finding out you still have variances.

Ultimately the whole point of a digital system is eliminating guesswork. For all intents and purposes, if your production and testing systems match, they should produce identical output and provide you with predictable performance when under load from real-world traffic and bandwidth constraints.

Testing a content management system can seem a lot like a police stakeout of a rather boring place where nothing exciting ever happens. While that is a colorful way to describe a job that can be repetitive, hearing the alarm and catching a bug because you ran that test for the third time might end up saving a half-day’s business—and that makes it worth the effort.

Related: How to Develop a WordPress Theme from the Ground Up

The post How to Properly Load Test a WordPress Website appeared first on SpyreStudios.



from SpyreStudios http://spyrestudios.com/how-to-properly-load-test-wordpress-websites/

Friday, 12 January 2018

Designing On The Go? 4 Apps And Add-Ons For The Mobile Creator

Are your design projects running behind schedule? Or are you just having trouble keeping track of team members while on the go? Whatever the issue, the fact is that web design is a mobile field today, and we all work from a range of locations. That means we need tools that go with us.

Take on your projects with the best new mobile apps and add-ons for 2018, pushing past your productivity blocks. These 4 are must-haves for every web designer.

Make The Switch To Sketch

For years, Adobe has been the go-to design tool, but it may be time to unseat it from its position of dominance. The contender for the crown? Sketch, a low-cost alternative with an extensive open source following. That means Sketch has countless user-created add-ons to enhance the software.

Of course, Adobe loyalists are bound to be skeptical of this new kid on the block – but top designers like Rory Berry of Superrb are convinced. As Berry notes, “The built-in grid system in Sketch is great and makes interface design much easier. I think the overall UI and minimal feel makes it much cleaner to design in and user friendly. Photoshop seems very complicated in comparison.”

If web designers are going to make the transition from Photoshop, it’s got to be for quality and convenience, and Sketch has both.

Connect From All Corners

Perhaps one of the worst trends for freelancers and remote workers of all stripes is the recent move by coffee shops – a favorite workplace – to turn off internet during the week to prevent workers from spending hours on the web while only buying one drink. To circumvent this, more web designers need to provide their own internet connection, and that takes a sturdy hotspot.

For a hotspot that can stand up to anything, consider investing in Kyrocera DuraXE, a rugged phone that embraces the old-school flip phone look for greater protection. This is a phone that you can drop on concrete, spill coffee on, and much more. It’s the best way to make sure you can stay in constant contact with your team.

Emphasize Interactions

With so many sites to choose from for any activity or exchange, interactivity is a top priority. As Katie Harris of Spot On Solutions explains, product quality and customer service are no longer enough. Rather, to meet customer demands, brands must “provide ways for consumers to engage and connect in a meaningful way.”

So how do you develop these interactive features? One powerful option is WIREWAX, a tool for making interactive videos. Since video is one of the leading content forms across all platforms, further enhancing video content to act as clickable hotspots is an ideal way improve click-through rates, boost sales, and transform videos from just another kind of passive content into a participatory experience.

Continue To Collaborate

A great website relies on constant innovations and updates, so be thorough in testing for glitches and errors, dead links, and slow load times. And for a comprehensive check, you’ll want to work with other team members. That way, you can simultaneously check the site in different browsers and using different platforms, annotating in parallel.

One of the best new tools for collaborative site testing and editing is Visual Inspector because it allows for live webpage edits. Working with other team members, Visual Inspector collects comments, temporary edits, and stakeholder reviews for final application to the page. Live editing can pose serious problems, especially when they involve multiple parties, but Visual Inspector smoothes the way for group communication at all levels.

Web design is an in-demand service, but the most popular designers are those that understand the process from start-to-finish, which means emphasizing communication, mobility, visuals, interactivity, and enhancement. Set yourself apart from your competitors with the right tools for the job, 2018 style.

The post Designing On The Go? 4 Apps And Add-Ons For The Mobile Creator appeared first on SpyreStudios.



from SpyreStudios http://spyrestudios.com/designing-go-4-apps-add-ons-mobile-creator/

Wednesday, 10 January 2018

Mockplus Is a Tool to Prototype Faster and Smarter – and We’re Giving Away 3 Annual Subscriptions

Can you imagine life without a mockup or prototyping tool?

Doing your job would be impossible, for sure.

These tools are an inherent part of a designer’s job, and we know you’re probably always on the lookout for the best prototyping tool to meet your needs and preferences.

Well, we’re here to make your life easier.

We’ve partnered up with Mockplus, a prototyping tool that will help you do your job faster, smarter, and easier.

Everything’s visual, so interaction is a breeze:

The interaction design in Mockplus is totally visualized. That’s WYSIWYG. With a simple drag-and-drop, one can build interactive prototypes effortlessly. A set of pre-designed components, including Pop-up Panel, Stack Panel,Scroll Box, SlidingDrawer and Image Carousel enable you create fully interactions fasterand easier.

mockplus prototyping tool giveaway

With pre-designed components, you complete projects faster:

Mockplus comes with more than 3,000 icons and nearly 200 components. Just drag these components into the canvas for a combination to prototype your app ideas within few minutes. Focus on design itself and no more efforts will be spent on making a component.

As for testing:

Scan the generated QR code to preview prototypes on the native device instantly. No USB cable required. Publish the project to cloud and you will get a shareable web link, which can be sent to co-workers & clients. It also supports exporting to HTML offline.

Convinced yet?

There’s more – the learning curve is short, there are features for convenient collaboration, review, and page division.

You don’t have to take our word for it, though. With the giveaway, three of you will have access to Mockplus annual subscriptions – each worth $199!

What do you have to do?

Simply follow the instructions in the widget below.

A few things:

  • The giveaway starts today and ends on January 14, Sunday.
  • The winner will be announced on January 15, Monday.
  • You can tweet once a day, every day, to get more entries.

Good luck!

a Rafflecopter giveaway

The post Mockplus Is a Tool to Prototype Faster and Smarter – and We’re Giving Away 3 Annual Subscriptions appeared first on SpyreStudios.



from SpyreStudios http://spyrestudios.com/mockplus-prototyping-tool-giveaway/

The 10 Best WP Themes That Will Make Your Website Look Amazing In 2018

How about bringing an attractive, engaging website online? This would be a great way to get a business off to a great start in 2018. A website’s ability to bring in traffic is not enough, however.

If it isn’t responsive, those who rely on mobile devices can easily be turned off by what they see (or are unable to see).

Having a responsive website is, therefore, a “must”. The good news is that ThemeForest offers thousands of responsive themes. Yet, who wants to sift through thousands of themes to find the best fit for a given project?

You really want to be able to narrow your choices down to a much smaller number of providers. That’s what we’ve done for you.

These aren’t just any WordPress theme providers. With these 10, you’ll get the greatest value for your money.

 

 

  1. Be Theme

Every new web-building project has its unique challenges, whether they arise from a set of unusual client requirements or the difficulty in finding a theme that’s a good fit for a given business or business niche.

Be Theme has you covered with its selection of 300+ pre-built websites. Your business may be an accounting firm, a sports club, and auto dealership, or a bistro. A one-page website may make the most sense, or a website featuring an awesome portfolio for a creative individual or agency could be what’s needed. It doesn’t matter.

Each pre-built website is responsive and customizable, so if you find a template that’s a close fit, you can easily make adjustments to create a perfect fit.

A pre-built website can be installed with a single click. From that point on, building a website is an easy task thanks to powerful tools like the Muffin Builder, the Options Panel, and a host of additional features to help you along the way, plus there’s no need for coding.

 

  1. Kalium – Creative Theme for Professionals

Kalium is also well worth considering. This is especially true if you’re looking for a multi-purpose Website theme. Kalium has all the layouts, shortcodes, and design elements you’re ever likely to need. The demo sites make it easy to get a website-building project off to a quick start.

While Kalium’s page-building features were created with the professional web designer in mind, this WordPress theme is delightfully easy to use. Even if you happen to be a first-time user, you can still create an engaging website or blog, an awesome portfolio, or a ready-to-go online store from one of the many shop layouts, in minutes.

In addition to home-page demos, you’ll find a nice selection of demos for your landing pages as well.

If you choose Kalium, you’ll be adding an award-winning ThemeForest best seller to your website-building toolkit.

 

  1. Pro

If you can imagine it, you can build it. That’s Pro’s claim; and this game-changing WordPress theme definitely has what it takes to live up to that claim. Designed with creative professionals, and those who aspire to be, in mind, Pro utilizes an easy to work with the modular approach, coupled with an extensive array of design elements, free extensions, and more.

There’s no need for coding, and if you prefer, you can do your design work with Pro directly from your browser. With the Header Builder, you can create anything from the most basic headers, to those that will blow your mind. The Content Builder’s optimized workflow capabilities can make you a poster child for productivity, and you can use the Footer Builder’s features to demonstrate that footers can be things of beauty.

To repeat. If you can imagine it, you can build it.

 

  1. Newspaper

If you have a news-oriented website in mind, one featuring a magazine format, a blog or a publishing website, the Envato-authored Newspaper theme will be an excellent choice.

This theme’s layouts are responsive and retina ready, and its 48+ demos cover everything from food, fitness, and lifestyle to art, law, and beauty; each of which can be highly customized. Moreover, it has a frontend page builder, an intelligent ad system, and premium widgets.

 

  1. Uncode – Creative Multiuse WordPress Theme

Uncode is a pixel-perfect theme you’ll find ideal for building awe-inspiring portfolios. It will appeal to artists, creative web designers, and bloggers. Uncode is packed with everything you need, including a tailored version of Visual Composer, so you don’t have to worry about writing code.

A key feature is the centered mobile menu that ensures your website will look great on mobile devices.

 

  1. TheGem – Creative Multi-Purpose High-Performance WordPress Theme

Starting with its selection of 70+ beautiful design concepts, TheGem doesn’t stop there. This amazing one page/multipage-ready multipurpose theme features more than 200 creative page templates (demos), shortcodes, widgets, multiple header and footer options, unlimited layout possibilities, and much more.

Smart tools, such as the latest Visual Composer, plus the intuitive GUI, make website, blog, and portfolio building easy; with no coding required. TheGem could be called the “Swiss Army knife” of WordPress themes.

 

  1. The Core

The Core’s website demos address key business, corporate, non-profit, and creative niches, making you feel as if you own a host of different WordPress themes instead of one. This flexible theme provides you with a host of layouts and design options, it’s responsive, and it requires no coding.

There are plenty of tutorials, and if you have a question or need help, The Core’s user support is rock solid.

 

  1. Houzez

If you are a realtor, or your client is one, or represents a real estate agency, Houzez is a love affair in the making. Not only does this responsive WP theme’s attractive layouts conform to industry standards, but its other features and functionalities, including advanced property search, payment options and membership options, combine to make Houzez a complete package.

All the design elements you’ll need are there too.

 

  1. XStore – Responsive WooCommerce Theme

If launching a successful online store is your goal, you might as well use a WordPress theme that’s dedicated toward that goal. XStore is just such a theme.

With this minimalist, responsive theme, with its selection of 70+ customizable good-to-go shops, it’s easy to create a fully-functioning, eye-popping online store that’s guaranteed to get you off to a great start.

 

 

  1. ListingPro Directory WordPress Theme

This is the only all-in-one solution for creating an online directory on the market. The Listing Pro Directory WordPress theme is the #1 best-selling ThemeForest theme of its type, having accounted for more than 3000 units sold in less than 6 months.

With Listing Pro, you don’t have to worry about coding, or any need for paid plugins. Everything you’ll need comes with the package.

 

Summing Up

 

Pick one of these 10 best responsive WordPress themes, and you can be assured of getting off to a good start in 2018.

They have the features and functionalities you need to get a project underway. Also, they have everything needed to help you maintain your momentum until you’re ready to go online.

If you looking for a multipurpose website builder, you find the best ones here. The same goes for the case when you opt for one that addresses a specific niche.

Read More at The 10 Best WP Themes That Will Make Your Website Look Amazing In 2018



from Web Design Ledger https://webdesignledger.com/the-10-best-wp-themes-that-will-make-your-website-look-amazing-in-2018/

Tuesday, 9 January 2018

The Go-To Guide of Responsive Typography in Website Design

Everything that breaks looks terrible! Typography is a crucial part of web design and as a designer or a developer, it can be frustrating to see the body copy of web pages crumble into pieces when they are accessed through devices of varying sizes.

Fortunately, responsive typography lets your web design adapt to the website’s layout on various devices, ensuring that the design responds to the users’ requirements. Responsive typography adjusts the copy to shrink at breakpoints, maintaining the style and flow of the text and design elements.

A responsive web design requires responsive typography for ensuring better readability across all experiences. Here are three things to consider when working with responsive typography, helping the web copy fulfill its purpose of clear communication.

Responsive Typography Guide

Focus on the Typography Basics

Typography is the visual appearance of text, making it look attractive while enabling readers to engage with the web content.

Choose a typeface (or the font-family) that compliments your theme. For instance, if your website is for kids, use web fonts such as Enchanted Land or DK Crayon Crumble for your header that aligns with your target audience. Use the @import command and a standard link tag to make the web font compatible across all modern browsers.

For instance, using the import tag or the standard link tag, the code can be written as –

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

OR

<link href=’http://fonts.googleapis.com/css?family=Open+Sans’
rel=’stylesheet’ type=’text/css’>

Every developer has to deal with the pixels (px units), ems, and rems (root em) when writing CSS/SCSS codes. Pixels are fixed-sized units on the screen, while ems are relative to the parent HTML element.

Responsive Typography Guide

Using rem will enable you to set the size of the text and get the desired output when the browser is re-sized. Rem is supported by all modern browsers and can be used, as shared in the code below.

html{
font-size: 16px; // 1rem = 16px
}
h1{
font-size: 1.9rem // 19px
}
h2{
font-size: 1.8rem // 18px
}

Use the @media command to define various sizes. Remember to set a bigger font size for smaller screens (where the max-width is lower).

@media (max-width: 640px) {
h1 {
font-size:1.7rem
}
h2{
font-size: 1.6rem

It is also crucial to manage the line length or the measure to ensure that the layout looks legible and professional. Aim for an average measure of 45-90 characters (including spaces).

Make the Text Easily Readable

Reading experience differs when you read on a mobile, a tablet, and a desktop. The reader tends to hold the mobile or the tablet closer to him/her owing to the smaller size of the screen and the fonts.

In order to increase the readability, increase the font-size of the text copy as the screen size increases. With the increase in font-size, it is crucial to increase the line-height in order to allow some breathing room between the lines of the body copy.

Choose a readable font face that is legible and accessible, making it easy for the reader to go through the web pages, without straining his/her eyes. Artistic and cursive type of fonts are a good choice for short headlines, however, avoid using them for the body copy, as these type of fonts are not easily comprehensible when the size decreases.

Use the @font-face rule to declare the font-family and provide a fallback font for browsers that cannot read the custom font.

@font-face {
font-family: ‘open_sans’;
src: url(‘opensans-bold-webfont.eot’);
src: url(‘opensans-bold-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘opensans-bold-webfont.woff’) format(‘woff’),
url(‘opensans-bold-webfont.ttf’) format(‘truetype’),
url(‘opensans-bold-webfont.svg#OpenSans’) format(‘svg’);
font-weight: bold;
font-style: normal;
}

Pay attention to the font-color accessibility by offering sufficient contrast between the copy and the background. Use the Web Content Accessibility Guidelines to help you measure the contrast between the colors used, preventing the web page from looking garish and illegible.

In order to create a good balance of the readable elements, use the modular scale that adjusts the font of the body text until you get the desired size.

Avoid mixing text with graphics, as it is tough to enlarge or shrink graphics, making the copy look muddled. Moreover, graphics make the web pages slower and the search engines cannot read them. However, if the web design demands use of text and graphics together, use Scalable Vector Graphics that can solve this issue.

Pay Attention to the Vertical Rhythm

The vertical rhythm is a concept from the print design field, where vertical spaces between the elements are placed in a consistent manner. In web designing, it enables you to gel the individual web elements together, ensuring a harmonious flow of the content. A good vertical rhythm makes the web layout look balanced and guides the readers’ eye through the content.

In order to employ the vertical rhythm, adjust the white space that connects all the elements by setting the line-height.

Typography

Though the baseline grid is crucial in applying the vertical rhythm, it’s not always easy to place the text between the baselines. Baseline grids often contain sub-pixels (for instance, 30.6px) which may be treated differently by different browsers, moving the elements off the grid and making it look garish.

Thus, instead of the baseline grid, use the line-height property as a base for the vertical rhythm. For instance, if the line-height of the website body copy is 25px, set the vertical white space between the text elements and the line-height of these elements in multiples of 25px. Consequently, the code will look like –

h1 {
line-height: 50px;
margin: 25px 0;
}
p {
line-height: 25px;
margin: 25px 0;
}

In the above code, notice how the appropriate margin is applied between paragraphs to ensure the vertical rhythm is maintained throughout the copy.

In order to extend the vertical rhythm responsively, with respect to the screen size, use the CSS @media command to load a set of styles when the width increases beyond a certain size.

For instance, in the code below, 750px is the break-point.

@media screen and (min-width : 750px)

Responsive typography is the cornerstone of web designing; however, making the website content responsive involves more than just re-sizing the text container and managing the fonts.

The typography is the most noticeable element of a website, making it a crucial aspect of the web design. The above-mentioned tips will help you appreciate the factors to be considered when creating responsive web typography.

A Showcase of Great Typography Usage in Web Design

Author Bio:

John Siebert is the President and CEO of Tranquil Blue Corp., a web design company in Florida that focuses on all kinds of website design, mobile app development, and search engine marketing.

The post The Go-To Guide of Responsive Typography in Website Design appeared first on SpyreStudios.



from SpyreStudios http://spyrestudios.com/responsive-typography-guide-in-website-design/

Monday, 8 January 2018

4 Ecommerce Challenges For Luxury Brands

Have you ever noticed that luxury brands rarely sell online? Sure, big names have elaborate, appealing websites, but many of them have restricted ecommerce offerings because it’s just not exclusive enough. Ecommerce is for the masses and luxury brands thrive on the distinction between those who can afford a product and those who can’t. That difference has kept as many as 40% of luxury retailers out of ecommerce.

The challenge with not selling online, of course, is that even high-end clients like convenience, but convenience and luxury don’t generally fit together – and that takes an innovative approach to ecommerce.

For luxury brands trying to increase customer access without losing their cachet, these 4 strategies can help combine appeal and ease seamlessly.

The Video View

Video marketing is growing in importance in all ecommerce areas, but for luxury brands, video is especially valuable; for brands with money, production value can make a real impact. For example, this onsite advertisement for Chanel’s J12 watch isn’t just about function – in fact, the video is wordless – but rather, it’s a high fashion scene, styled like a photo shoot or fashion show. More accessible brands can neither afford to make nor would they especially benefit from such videos, but luxury brands can use them to pull the strings of intrigue.

The Language Of Luxury

One thing that will always set luxury brands apart from lower status competitors is the language used in sales copy. That’s because luxury brands have a language of their own, from unique value proposals to in-group vocabulary. Polishing your language, then, will set you apart from those selling cheaper knock-off products.

Often, luxury language is field-specific, so that means a furniture maker might cite textile makers or carpentry techniques in their copy. The Three Graces, a fine jewelry purveyor, highlights style periods like “Victorian diamond rings,” with gemstones and diamond cutting styles such as “cushion cut” or “old European cut.” Only qualified buyers would even know how to search for these terms, and conversely they authorize your brand in the eyes of such buyers.

Simplicity As Strategy

In addition to exclusivity, a key reason that luxury brands are resistant to ecommerce is that online sales remove a lot of the personalized customer service aspects that are a hallmark of the industry. How do you demonstrate service and commitment to your buyers if you don’t interact with them?

One way to bring this kind of personalization into ecommerce is by offering moments of simplification. For example, your average ecommerce website wants checkout to be as simple as possible to prevent cart abandonment, but luxury sites might consider taking this to the next level.

During traditional work hours, say, they might offer a direct chat with representatives who can call up customer accounts, monitor sales history, and allow clients to sidestep log-ins and other mundane interactions. It’s a personal touch that also eliminates burdensome checkout requirements for valued customers.

Know Thyself

Ultimately, the most important thing for luxury brands moving into ecommerce is to remember who they are. Just because you’re moving into digital sales doesn’t mean you have to compromise what makes your brand unique.

Just look at Apple. As a style-focused computer brand, they’ve always had to walk the line between luxury and accessibility, and that’s given them an advantage compared to more recent ecommerce entries that’s evident at first click. With sleek animations and attention to detail, Apple’s site exemplifies their brand values as user-friendly but classier than your average technology shop.

In the next few years, it’s likely that the majority of luxury brands will move online, at least in part, and that means they’re going to bring new ideas and techniques to the world of web design, if only to stand out from the competition. Whether it’s interactive video displays or online concierge services, the new is on the horizon. As for now, tapping into the aesthetic and service features that make luxury brands distinctive can help make the transition a little easier.

The post 4 Ecommerce Challenges For Luxury Brands appeared first on SpyreStudios.



from SpyreStudios http://spyrestudios.com/4-ecommerce-challenges-luxury-brands/