NorthBio Web Development

NorthBio Web Development

Share

Photos from NorthBio Web Development's post 21/09/2022

WHY USE A SLIDER ON YOUR WEBSITE?

* Benefits

-maximize use of an area - A visitor may not want to scroll down and read lots of text / view images.
But they can passively and easily follow the text and images in each slide.
-get attention
-make your site stand out
-look more professional. Major websites use sliders.
-Sliders help create perception.
--look "artistic". If your site is related to web development, graphics design, social media presence, you need this.
--look "trendy". If you are sharing jokes, political commentary, have a young audience,
a graphical/animated slider makes you seem younger and more alive.

* What do you show in slides?

-news & updates about your company, industry, product/service offerings
-tell unique selling points or offer discounts right away. Show these in a slider on the home page/sales page.

* Capabilities:
sliders can show:
-images
-HTML
-multimedia: videos and sounds

* Features
These can vary depending on the slider you use. However, here are some of the
options you can find in sliders.

** Manage content/layout
-use templates
-drag and drop images into slider

** Easy to learn
-documentation
-examples of how to use different slider options

** Listing
thumbnails
playlist

** Appearance
css customizable file
animations ( between slides )

** Graphics options
full width
full screen
responsive - works well across devices

** Performance
load small file
use hardware acceleration

Photos from NorthBio Web Development's post 30/08/2022

WHAT IS MODERN DESIGN IN WEBSITES?

I explain what "modern design" in websites is and how you can apply the style yourself.

I took examples of modern design (2022) of a few projects
I worked on.

They exemplify elements of modern design. I will highlight what
these elements are.

* Elements of modern design

My website designs were inspired by various
sites I saw and modeled from around the web. It's a personal style that emerged from
my personal selection of what is popular (2022).

-rounded buttons - Also popularized in Apple interfaces. For example, the close, minimize, and maximize buttons of a window are rounded.

-gradient background for buttons (darker at edges, lighter at center)

-dropshadow around boxes - Dropshadows are also popular in Apple OS interfaces. For example, there are the buttons at the bottom of the screen for quickly starting apps.

- negative space - Negative space is an important concept. It's used a lot.

It's functional. You can navigate more easily when there are fewer things to focus on.

Less items/minimalistic probably naturally feels better than cluttered.

It feels more "premium". It's like living in a big house with lots of room
for your stuff, versus piling things to the roof in small cramped apartment.

* Futuristic elements

Thes are "futuristic" elements. They draw inspiration probably from concepts of the future in TV and film.

- reflection - See an example in image 4 ( the text "App Media" ).

It's almost like the holograms you see in communications in Star Wars; or the UIs that show augmented reality UI elements over the physical world (

Reflection uses transparency.

- transparent background image over solid color - For example, see image 4 (background of mobile app of Avril Lavigne). There is high transparency image of Avril Lavigne, on a solid color blue-gray background.

It uses background images more like a texture. It distracts less from the main elements in the foreground.

-gradients - It makes an element pop out more.

It looks more shiny. It's innately appealing like shimmering water of a lake under the sun or a well washed sportscar on a summer day.

It feels more metallic and futuristic. Or it can feel more glossy and premium.

It adds more depth and feels more realistic and 3D.

* Colors

There is a big focus on colors. It sets the tone. It tends towards making things more "techish" or "futuristic".

darker colors (in background) - like a dark room where you see only bright computer monitors and electronic lights.
glossy colors - especially on classical colors like black, white and grey
simple color themes - 1 color or 2 complementary colors. but few colors

preferred colors:
grey - metallic color
whitish - future utopia white; like shiny kitchen surface
gradient background color

for text, avoid solid black. use a darker grey
light gray for lower priority text - placeholder text and less important options ( i.e. image 5: link "View more comments") are shown in this color.

* Basic principles

These rules will help you understand quickly how to create a "modern design" feel for your webpage.

The lefthand qualities are those of modern design. The righthand qualities are standard the qualities you start with when you create a blank webpage by default.

round/curved vs. rectangular/linear
minimalistic (negative space) vs. cluttered
changing (gradient) vs. solid color/static
transparent vs. opaque
depth vs. flatness - gradients. Transparent "glass" items over background. Dropshadow
realistic optical effects vs. abstraction. Optical effects from real world: use of reflection, shading (gradients) and transparency

19/08/2022

Upload file on same page without reloading
(AJAX File upload)

Don't upload a file and wait for next page to load
This was the OLD WAY.

NEW WAY
After you select the file,
the file uploads while you stay on current page.
It could show a progress bar or percentage for the file upload.
You can then go back to using other options on the same page.

Benefits:
-easier
-more efficient
-users have come to expect this. Pinterest, Facebook and other sites use this.
-keep them on your site. long waiting time can make people quit your website.
-keep people engaged. show progress bar, percentage, quotes, tips, etc. to keep people entertained/busy while uploading

28/07/2022

Why you need automatically generated emails for your business website

Uses:
-Remind people of appointments i.e. 24 hours before
-Remind people of upcoming events on site i.e. New Years or 4th of July Sale
-Send a message based on user's life. i.e. Birthday Offer
-Notify relevant poeple in business process. For example, if an item was just bought from a shopping cart,
then send an email to shipping staff. If a user has registered for a premium service, then notify the
the professional who should follow up with them.

Capability:
-Send files
-Attach images or use HTML. You can make it a great looking experience
-Receive links to where on the website you need to go to in order to complete the next step.
i.e. The user could go to a product page, a help page, a welcome FAQ, etc. on your website.
-Send a copy of data entered by user into a form
-Generate on any user driven event
-Generate based on date and time
-Send to relevant people only

Benefits for site owner:
-Be notified of errors
-Be notified of actions affecting security. For example, if some admin user
has logged in excessively, updated/deleted a lot of records, etc.
You can set a threshold amount i.e. of logins, data management activity or
bandwidth allowed before generating an email about security.
-Engage users to return to your site
-Make the website feel more active. If you hardly update your site or talk with
users, then receiving an email with their personalized name and today's date
makes the website feel "alive" with activity.

Benefits for website users:
-Be notified when there is value to be offerer. i.e. User's account has been approved,
there are special offers, etc.
-Get immediate feedback. Examples: registration, signing up for newsletter, etc.
-Receive only emails relevant to them. i.e. Only send job offer to people looking
for jobs in a certain category