Interview with Nicolas Grekas
Audio
This episode is sponsored by
Using the WordPress REST API
The post Interview with Nicolas Grekas appeared first on Voices of the ElePHPant.
Comments are closed.
This episode is sponsored by
Interview with Nicolas Grekas
Audio
This episode is sponsored by
Using the WordPress REST API
The post Interview with Nicolas Grekas appeared first on Voices of the ElePHPant.
Comments are closed.
PHP SSH2 SFTP Client
Package:
Summary:
Transfer files and run commands with SFTP and SSH
Groups:
Author:
Description:
This package can transfer files and run commands with SFTP and SSH...
Read more at https://www.phpclasses.org/package/11655-PHP-Transfer-files-and-run-commands-with-SFTP-and-SSH.html#2020-05-18-16:24:42
Read more at https://www.phpclasses.org/package/11655-PHP-Transfer-files-and-run-commands-with-SFTP-and-SSH.html#2020-05-18-16:24:42
Comments are closed.
5 Things a Modern CMS Shouldn’t Do
All content management systems (CMS) have their own strengths and weaknesses. Some are meant for very niche offerings such as eCommerce or membership sites, while others are a jack-of-all-trades. In addition, these systems range from open source to proprietary.
Beyond the market-leading WordPress, I have had the opportunity to dabble in a few other systems. The experiences have been uneven.
I won’t pretend to have in-depth knowledge of every software package out there. But I have enough experience to understand what makes for a good system. It’s about ease of use and putting users in the best position to do things the right way.
For the most part, there’s been a ton of improvement over the past decade. Still, not everything is where it should be. With that in mind, here are five things that no CMS should be doing in modern times.
Generate Non-Standardized and Inaccessible Code
It’s hard not to notice that the web has a lot of standards and best practices these days. Markup has to be structured semantically and content needs to be accessible. In addition, CSS should be used for styling elements such as containers and typography.
Yet, I still see content editing UIs that facilitate, and thus promote, doing things the wrong way. For example, take a proprietary, membership-based CMS I’ve worked with. Its content editor still utilizes tables for multi-column layouts as well as old school HTML font tags. Um, 1999 called, they want their markup back!
Now, there’s a difference between slight deviations from standards and an outright disregard for them. The fact that any software would still use such outdated techniques (by nearly two decades) is kind of bewildering – not to mention irresponsible.
The average person who creates content places a great amount of trust in an editor UI. We need the software to turn our text and images into clean, accessible code. It doesn’t have to be perfect, but it should never hinder anyone’s ability to consume it.
Allow for Unregulated Clutter in the Dashboard
For some of us, working at a cluttered desk is frustrating. It’s hard to be creative – or even concentrate – with various junk lying around. A CMS dashboard is much the same.
Dashboards should be both minimal and easily customized. The WordPress Dashboard starts off this way, but quickly becomes a heaping mess as you install more themes and plugins. Dashboard widgets can be turned off easily enough. But the many nagging notification messages shown throughout the back end aren’t so easy to jettison.
Part of the issue is that, as an open source system, WordPress doesn’t have much control over how these notifications are deployed. There have, however, been some efforts to wrangle notices in a more user-friendly way.
This is one area where some proprietary systems, especially those that don’t allow for third-party plugins, have an advantage. They can take complete control over the UI and decide what notifications are needed and how they will be displayed.
Then too is the need for distinguishing between legitimate system-related notices and cheesy upsells. It’s understandable that software developers need to make money. However, being bombarded with ads and forced to dismiss the same notification a hundred times crosses a line. There need to be strict guidelines regarding this type of behavior.
Restrict Content Portability
Just because your website was built using a particular CMS doesn’t mean it will forever stay in that system. You might eventually outgrow the platform you started out with or simply want to try something new. This is not always easy.
With some proprietary systems, the site you build either stays with the provider or it goes away altogether. Content and design can’t be natively exported for use elsewhere. In some instances, you can’t even export a copy of your site for internal staging purposes.
In that case, you’re left searching for a third-party tool to extract what you need. Fail that, you might be copying and pasting source code out of your web browser.
It’s reasonable that some functionality may not be exported – like, say, a shopping cart. But in this day and age, the content itself should at least be available to export as a CSV, JSON or XML file. Is that too much to ask?
Trade Stability for Features
All software evolves over time – that’s a given. Bugs are squashed, security holes are filled and new features are unveiled. And they are all rightly expected of a CMS.
However, there is also a great need for stability. When you deploy a website on your CMS of choice, you want to know that it will continue to work, version after version.
Big, sweeping changes can throw a monkey-wrench into the works. If all the “what-ifs” are not accounted for, any fundamental change to how a system works can have dire consequences. Specific features, or even an entire website, could break after the change is implemented.
New features are still important. They help to attract new users and ideally make life easier for existing ones. But they need to be carefully thought-out in order to minimize any negative impacts.
If an app gains a reputation for breaking websites, it’s not going to be around very long.
Fail to Communicate with Users
It seems like communication might be just as important as code. Because, while a system may have compelling features, users will need to know about them in order to take advantage.
Likewise, those behind the scenes at a CMS need to know what their users want and need. That information is key in deciding which features to implement and which bugs need fixed.
But communication is a big job. It encompasses areas like documentation, user support and building community. A lot of effort needs to be spent here, which is difficult even for industry giants. For smaller systems, it may stretch finite human resources to the max.
Still, it’s worth the effort. A failure to keep an open dialogue with users will erode relationships and may cause a mass exodus from the platform.
A CMS Must Keep the Focus on Users
Ultimately, a CMS will be judged on whether it fulfills the needs of its users. None are perfect in this area, but some are far ahead of others.
The best systems allow us to create content in an accessible manner. They’ll develop features that maintain stability and will provide at least some backward compatibility. In addition, these systems will respect a user’s right to their own content and facilitate portability.
Above all, a good CMS will keep an open line of communication with users. The open dialogue will benefit everyone and help to ensure a bright and productive future.
On the other hand, systems that fail in these areas will most likely cease to exist over the long term.
The post 5 Things a Modern CMS Shouldn’t Do appeared first on Speckyboy Design Magazine.
Comments are closed.
Tor PHP File Manager Class
Package:
Summary:
Perform operations to manipulate on files
Groups:
Author:
Description:
This class can perform operations to manipulate on files...
Read more at https://www.phpclasses.org/package/11653-PHP-Perform-operations-to-manipulate-on-files.html#2020-05-17-23:41:52
Read more at https://www.phpclasses.org/package/11653-PHP-Perform-operations-to-manipulate-on-files.html#2020-05-17-23:41:52
Comments are closed.
Show Me Emoji: Iconic Code Snippets
Emoji seems to have invaded every part of our culture. What started out as a niche feature for mobile phone users and computer geeks has become its own phenomenon. Now, we see these little characters on t-shirts, marketing campaigns and even not-so-funny feature films.
It wouldn’t be a stretch to say that emoji have become a sort-of common language. Whether you speak English, Japanese or Swahili, certain characters are just universally recognized. As such, they can break down barriers in their own, cute way.
Naturally, the web design community utilizes and experiments with emoji quite a bit. Today, we’d like to showcase some of the more interesting and fun examples from CodePen. They run the gamut from simple CSS recreations, to clever animation that brings these little guys and gals to life. Enjoy 😊
Pop the Emoji
This JavaScript-based animation is interesting enough on its own. But it’s also interactive. Moving your cursor over a face removes it from the screen, sort of like popping bubbles. Clicking on the canvas restarts the entire process.
See the Pen
gap – pure JavaScript by Toshiya Marukubo
Let the Pseudocats Teach Us
Because emoji is so universal, it makes for a great learning tool. This interactive demonstration of CSS pseudoclasses benefits from the use of helpful “pseudocats”.
See the Pen
Structural pseudocats 🐱 by wendko
Surprisingly Pure CSS
Developers are continually getting better at creating images via CSS. Here, we have a surprised-face emoji that is crisp, clean and scalable. It’s also been written with surprisingly little code.
See the Pen
Surprise face by Alexander Vega
Choose Your Critter
One of the more popular usage of emoji is in games. They make for great, easily-recognized characters while also adding fun to the mix. This particular game is similar to a slot machine. Click the “spin” button and see which cute animal you land on.
See the Pen
Emoji Spinner by Melvin Idema
Beary Cool Animation
What’s not to love about this emoji bear? It’s clearly a fun-loving animal, with sunglasses and backwards cap. It apparently writes code as well, judging from the super-cool scrolling animation in those lenses.
See the Pen
Shades Loader 🐻 by Jhey
Going Viral
Happy or not, emoji does reflect what’s happening in our society. As such, it’s no surprise that this COVID-19-inspired character has been developed. The disgruntled little virus bounces pensively, apparently wary of an inevitable cure.
See the Pen
Corona Virus SVG (Covid-19) by Sourav Pradhan
Take a Virtual Vacation in Emoji Town
One clever developer asked the question: What would an emoji town look like? The result is a fun, flat and animated world. It’s a great mix of modern technology and retro-game looks.
See the Pen
3D Emoji Town (Pure CSS) by George W. Park
Build Your Own Emoji
Not a fan of the run-of-the-mill emoji characters? Then build your own! This tool lets you choose from various skin tones, facial features and even accessories.
See the Pen
Emoji Factory by Olivia Ng
Representing All the Feels
You wonder if, thousands of years from now, archaeologists will equate emoji with ancient Egyptian hieroglyphics. Granted, emoji are probably more lighthearted and reflect modern times. But both are used to communicate a story.
Beyond those academic arguments, emoji can be just plain fun. Especially when spiced up with a little CSS and JavaScript, like the examples above. Hopefully, they’ll get give you a laugh and get your creative juices flowing.
Want to see even more cute and fun emoji snippets? Take a look at our CodePen collection!
The post Show Me Emoji: Iconic Code Snippets appeared first on Speckyboy Design Magazine.
Comments are closed.
PHP httpful Request (New)
Package:
Summary:
Send and process HTTP requests using handler class
Groups:
Author:
Description:
This package can send and process HTTP requests using handler class...
Read more at https://www.phpclasses.org/package/11651-PHP-Send-and-process-HTTP-requests-using-handler-class.html
Read more at https://www.phpclasses.org/package/11651-PHP-Send-and-process-HTTP-requests-using-handler-class.html
Comments are closed.
Responsive Design Checklist: Your 7-Item List for Responsive Design
Are you reading this article on your smartphone? If you are, it wouldn’t be surprising — considering in 2019 alone, there were 3.9 billion unique mobile internet users.
That’s why, in July 2019, Google rolled out mobile-first indexing — forcing website owners to consider the responsiveness of their sites.
So, is your website responsive? On this page, we’ll go over your extensive responsive design checklist to ensure that you provide the best possible website experience to all users — no matter what device they use.
We’ll even cover some tools that you can use to determine the responsiveness of your site.
If you’d like to stay up to date with the latest design trends and tips just like the ones on this page, subscribe to Revenue Weekly emails!
What is responsive design?
Before we can jump into our responsive web design checklist, it’s important to talk about responsive design.
Responsive design, or mobile-friendly design, ensures that visitors to your site have a fantastic experience, no matter what device they use.
That means whether they use a desktop computer, a smartphone, or a tablet, your site will look and act the same way.
If you visit a site on your smartphone and it has the following characteristics, it’s probably not responsive:
- Text is so small, it’s almost illegible
- If you try to fill out a form, it stays small, and you must zoom in to fill it out
- It’s difficult to click on navigation bar elements
- Photos appear out of alignment
- You can scroll left to right on a page
As you can see in the example below, you must scroll from left to right on your smartphone screen to see the entire home page of this salon’s site. That said, this site would be considered unresponsive.
On the other hand, if you visit a site on your smartphone that has the following characteristics, it’s likely responsive:
- Text sections fill the page
- Design modules are aligned and easy to digest
- You don’t have to zoom in to read the menu
- Navigation bars typically take the form of a hamburger menu until expanded
- Forms expand to fill the page, making it easier to fill out on small screens
In the example below, you can see that Swiss Miss hot chocolate has a responsive site. When you switch from looking at the URL on your desktop computer to your smartphone, the website still offers the same great experience.
Now that we’ve gone over the difference between responsive and unresponsive sites, it’s time to dive right into our responsive design checklist!
Your complete responsive design checklist
If you don’t want your customers (and Google) to write you off as an authority in your industry, it’s important to have a professional, responsive site. Here’s how:
Responsive checklist item 1: Test your current website
If you’re not sure if your current website is responsive, you’ll want to test it to find out. You can use a variety of responsive design test tools including:
These tools will provide insight into how your website looks on different devices. Remember, if your site isn’t responsive, it won’t look the same as your desktop version on smaller devices.
When you test your current website on a variety of responsive design test tools, you’ll also want to test them on a variety of devices. Many responsive web design test tools allow you to see what your site will look like to users on different devices.
For example, using Google’s Resizer tool, you can toggle between phone and tablet versions of your website to see what they look like to users.
Responsive checklist item 2: Determine which elements aren’t responsive and fix them
After using the responsive web design test tools mentioned above, you’ll have a good idea of which site elements are responsive and which are not. For example, your entire site might look great on mobile, except for your images.
After taking note of responsive and non-responsive elements, you can start digging into how to fix them.
Some site items to check for responsiveness include:
- Navigation bar
- Images
- Fonts
- Forms
- Buttons
These are some of the most important web design elements that are extremely important to great user experience.
Responsive checklist item 3: Test site speed on different devices
Page speed is a crucial part of providing a fantastic user experience for users. Your site should load quickly on all devices or you run the risk of users bouncing from your site — which is why site speed is item three on our checklist for responsive design.
Eighty-three percent of users expect a site to load in just three seconds or less, so regardless of what device they use, you should make sure that your site loads quickly.
Your site could load slowly for several reasons including:
- Images are not condensed
- Site elements are not responsive
- Cluttered code
- Too many heavy elements like video
You can use Google’s PageSpeed Insights tool to learn more about what’s slowing your site down. If you’re unsatisfied with your score, you can always turn to a responsive design and development agency like WebFX that offers page speed optimization services!
Responsive checklist item 4: Consider finger taps
When users look at your website on different devices, they could be using different items to tap on your site elements. For example, with smartphones, users are likely tapping site elements with their fingers, but when it comes to tablets, they could be using a stylus.
You’ll want to consider your site elements regarding those different options to ensure that it provides a great experience for whatever “tapping device” a site visitor uses.
You should consider things like:
- Are buttons big enough for a stylus on tablets?
- Are buttons big enough for fingertips on smartphones?
- Are navigation bar hamburger menus easy to tap on any device?
- Are forms easy to fill out with finger taps or styluses?
Responsive checklist item 5: Test your navigation
As we mentioned before, on most mobile-responsive web designs, you’ll find the navigation to be a hamburger menu rather than spanning along the top of the page. This keeps users from having to zoom in on your navigation bar to see the options.
Below, you can see an example of Dunkin’ Donuts responsive website, and how their navigation menu takes the form of a hamburger menu that expands when users click.
You’ll want to ensure that your navigation menu works properly on all devices and that nothing gets cut off when users open it.
Your navigation menu is an extremely important part of your site since it provides a roadmap for users to find exactly what they want. Without one that works properly, users could bounce from your site.
Responsive checklist item 5: Make popups responsive
The fifth item on our mobile-friendly design checklist is to make your pop-ups responsive, too.
Popups are typically triggered by a specific action. For example, you might visit a site that shows you a popup whenever you try to leave the site to encourage you to stick around. Other actions that might trigger a popup include:
- Making it to the bottom of a page
- Clicking on a specific link
- Staying on the homepage for a certain amount of time
These popups could provide a special offer or encourage users to sign up for a newsletter.
In the example below, Bones Coffee provides a popup to users that make it to the bottom of their homepage. It’s a special offer for 10% off your first purchase if you enter an email address.
However, if you look at the popup from the perspective of a smartphone, the iPhone 6, 7, or 8, to be exact, you can see that the popup isn’t responsive, and makes it difficult for users to sign up.
It’s equally as important to keep popup responsiveness in mind since they provide enormous benefits for your business.
Responsive checklist item 6: Make sure your site is visually appealing across all devices
Number six on our checklist for responsive design is making sure that your site is visually appealing on all devices.
When you design a site specifically for desktop, it can be difficult to make your site elements look right on other devices like smartphones and tablets.
Even if you make all your site elements responsive, it’s still crucial to make sure every element of your site looks great on every device.
You’ll want to make sure that:
- Images don’t take up the whole screen
- Menus aren’t cut off
- Bulleted lists are formatted correctly
- Tables look neat and organized
- Service lists render properly
- Product images and descriptions are formatted properly
- Forms are aesthetically pleasing and effective
- Shopping carts are organized and easy to use
Since it only takes users 50 milliseconds to form an opinion of your website, making sure that it’s aesthetically pleasing across all devices is crucial.
Responsive checklist item 7: Make yourself the site visitor
Now that you’ve followed every step on our responsive web design checklist, it’s time to audit your efforts by making yourself the site visitor.
Take a few laps around your site to make sure that you didn’t miss any responsive design elements. For example, you’ll want to:
- Test every step of submitting a form
- Test every step of purchasing a product
- Test navigation bar links
- Test different areas of your site like your blog and your product pages
Putting yourself in the driver’s seat and taking a few spins around your website will ensure that nothing fell through the cracks of your responsive web design checklist.
Finish off your mobile-friendly design checklist by working with WebFX
Making your site entirely responsive to users is a crucial part of your online presence and your company’s success online. With mobile users increasing every day, you can’t afford to have a website that doesn’t respond to every device.
If you find that you still need help creating a responsive website, even after following our responsive web design checklist, WebFX is here to help.
We’re a full-service digital marketing agency that offers more than 60 marketing strategies to clients in a variety of industries and locations.
We’ve created more than 1000 responsive websites in our more than ten years of business that help companies just like yours see more site traffic, increase leads, and maximize revenue.
If you’re ready to get started, contact us online for a free quote, or give us a call at 888-601-5359!
The post Responsive Design Checklist: Your 7-Item List for Responsive Design appeared first on WebFX Blog.
Comments are closed.
Part 1: Slow and Steady
Editor’s Note: This is the first in a five-part blog series on refactoring and modernizing PHP applications. We’ve all heard the expression from the children’s story: “slow and steady wins the race.” But what does this have to do with refactoring? And how can this help us to modernize our applications? First, a little background: […]
The post Part 1: Slow and Steady appeared first on BrandonSavage.net.
Comments are closed.
Weekly News for Designers № 540
A Complete Guide to CSS Functions – Yes, CSS has functions! Learn how they can benefit your projects with this in-depth guide.
A case study of complex table design – A look at redesigning a feature for better usability.
What to Do When a Web Design Client Leaves – Tips for making the best of an awkward situation and lost revenue.
Creating an Accessible Range Slider with CSS – Use this tutorial to learn the finer points of form accessibility.
The 15 Best Light Leak Effects Photoshop Action Sets – Adding light leak effects to your images is a breeze with these Photoshop actions.
YouTube Sans: The Making of a Typeface – How YouTube created a tailor-made font that doubles as a brand ambassador.
Norde Source – Use this SVG icon manager and editor to easily customize your images.
Blush, Illustrations for Everyone – A tool/Figma plugin that lets you create, mix and customize illustrations.
Easings – Test and create Cubic Bezier easing curves with this generator.
Are you using SVG favicons yet? A guide for modern browsers. – Get the inside scoop on using SVG that works in the latest browsers.
Scunthorpe Sans – A font that censors bad language automatically. WTH?
Margin – A plain text language for list-making, note-taking, and to-dos.
Modern CSS Solutions for Old CSS Problems – Fix those nagging old CSS issues with newfangled solutions.
Spinners React – A tool for (you guessed it) generating animated spinners in React.
Reasons to Be Thankful: Bright Spots for Web Designers – Even in the middle of a pandemic, there are some good things happening for web designers.
20 Best Free Book Mockup Templates for Photoshop – Create realistic book mockups with these beautiful free templates.
The post Weekly News for Designers № 540 appeared first on Speckyboy Design Magazine.
Comments are closed.