Category Best practices

Read about the posts of category Best practices

The hamburger menu: 9 pros and cons

, , ,

As a UX consultant, I always think about what is better a regular menu or a hamburger menu. In mobile version obviously but in desktop?

Let me explain the pros and cons:

The hamburger menu is an actual navigation element you can find on sites, landings, webs, apps, and programs. It’s a design of three horizontal lines. Is an icon and a button that typically opens a sider menu or navigation.

Created by Norm Cox almost 40 years ago!

This is the hamburger menu: bread, hamburger and bread.  So, that’s why the name.

Hamburger menu

 

Let me share my thoughts:

 

PROS: This is a list of why use the hamburger menu:

 

  1. It’s SIMPLE and very clean.
    It’s easy to access the navigational menu.
  2. It’s recognizable for users. People know that in a hamburger menu there is a navigational menu, so we are used to.
  3. It’s the other access. If you have a menu or other navigational items, the hamburger helps to add a new one.
  4. It uses for a mobile version.

 

CONS: This are a list of why NOT use the hamburger menu:

  1. Hidden navigation
  2. Make pages less important  and less effective
  3. Low engagement: the click rates go down and down…
  4. Two clicks is an extra step to get to the goal. To achieve the content you click twice.
  5. Not for a desktop version.

So, here my  recommendations,  as Nielsen Norman Group:

Hamburger menu Recommendations:

 

Desktop:

  • Do not use in desktop user interfaces

Mobile:

  • Use it if you have more than 4 level navigation links.
  • Provide footer with page links to important information on your site

What is a 404 page: causes and solutions

, , ,

Today we want to talk about a common error on websites. The 404 pages.

What is a 404 page?

404 page is an error, the Error 404.

Error 404 is an HTTP status code that means that the page you are trying to access can not be found.

For example, if you access www.ebavs.net/cacadelavaca server will return an error page and the  404.

The 404 pages are very common in all the clients that we do consultancy SEO.

 

Causes and solutions to 404 errors

We want to explain what are the causes and the solutions to fix it.

Cause 1: A deleted page.

When you have deleted a page from your site, once search engines have analyzed and indexed, the page did not exist so is a 404 page.

Solutions:

  1. If you create new content to replace the deleted page, the best way is to make a 301 redirection of the old Url to the new one.
  2.  If you do not create new content, the best practice is to have the 404 instead to redirect to the home, we prefer not confuse the user and design properly the 404 pages.

Cause 2: An external deleted page.

When you have a link to another page and the link is not running because the site deleted the page.

Solution:

  1. Search for an alternative link
  2. If the search is not running, delete the link.

 

Cause 3: A renaming page.

That’s very common, a client decides to change or rename the page but not consider redirecting.

Solution:

  1. Create a 301 redirect

Cause 4: The link is not written ok (a misspelt)

Solution:

  1. If the link is internal, we could correct it.
  2. If the link is created to another, we configure our .htaccess file to make a redirection of the misspelt URL.

 

So, the next question is do 404 errors affect my web positioning?

Google, says no, but 404 errors could have a direct effect on our users. So if our site has a lot of links that do not work, our visits will go down. It’s important the user experience to our success site.

In other posts we will talk about: a best practice 404 page and How to know if there are 404 errors on my site.

 

3 Basics Tips images on SEO

, , , ,

A picture speaks a thousand words.

An image of SEO must speak. In my last three works, I made different consultancies for customers and I detected the same issue: the images.

How is this part important, images are important as relevant keywords. Nowadays we use more images and media to improve our websites. So this kind of content needs to be review and optimize.

The images are always forgotten. And Google likes images and users also.

 

Let’s start with a list of best practices to keep in mind.

3 Basics Tips SEO Images:

 

1. Name of images.

When we create a website we take care of the name of images. We always find projects with Incredibles names or numbers to images. I found images like DSC30303 or Screenshot22.01.2009 or Prueba. The name is so important because Google read the archive and the name of our image.
The images need to BE descriptive. Yes Descriptive, it’s mean the name must represent what we see.
It’s important to add relevant keywords also. If we review analytics we could see how customers search us and use the image naming process.

As Google says the Filename give clues about what is the image.

Example if the image is a green car:

Green car on the road

<img src=”https://exampleweb.com/images/green-car.jpg”>

 

Also if you have a brand you could ad your brand on the image like green-car-ebavs.jpg.

2. File size

I discovered 3GB for a Background image or images of 1Gb.

Bear in mind:

  • Consumers do not like to wait unless on mobile.
  • Google uses page load time as a factor in their algorithm. And now with the new Core Vitals, this is so important.

So review the file sizes, compress the images and optimize them. There are a lot of articles to do it:

 

Image optimization

Yoast SEO images optimization

The formats are relevant  also use :

  • GIF, lower quality than JPEGS used for icons, transparency, animations.

    Green car on the road

    Gif – 317Kb

  • PNG, the alternative to GIFS, allow transparency more colours. But the sizes are bigger than JPG. PNG is better used on flat and colours images.

    Green car on the road

    PNG – 606kb

  • JPG: able to compress images considerably, could have nice quality and low file size. Not transparency is allowed.
    Green car on the road

    Jpg – 290Kb

     

  • And more with Guidelines Google images

3. Alt attribute
The alt attribute (text that describes an image) is the alternative text is used to:- highlight the identity of an image

  • appears when browsers have problems rendering
  • read by screen readers to help visually issues: improves accessibility for people not see images on the website
  • read by search engines
  • Google uses the alt text on the algorithm to understand the content of the website

That’s a normal code that I discovered:

<img src=”https://exampleweb.com/images/green-car.jpg”>

That’s a good code:

<img src=https://exampleweb.com/images/green-car.jpg alt=”A green car on the road”>

The alt attribute is also a descriptive text for the image, normally we use 8 words.

 

These are 3 basics tips to follow on your sites. Are very easy and common sense tips.

 

If you want to know more about SEO, we do Workshops and we are experts on it.

Our mystery naming

, , , ,

That’s a typical conversation:

  • “Send me an e-mail to barbara@ebavs.net”
  • “What?”
  • “Yes. EBAVS”
  • “EVAVS?”
  • “No, I spell it: E from España, B from Barcelona, A from Alicante, V from Valencia and S from Salamanca”

EBAVS

What’s this? Why EBAVS?

People write as EVABS, EBAUS, IBABS….but never EBAVS.

We think that we have a serious problem with our naming: a name so obscure that customers never know what it means.

But, 18 years ago we created this naming thinking to do something that we loved, coding and the internet but never in business…

EBAVS was a contraction between Bárbara and Víctor, Víctor and Bárbara.

 

Here we reveal our mystery:

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

 

  • E: In that ancient epoch, the “E” (Email, Ebusiness) was COOL as the “I” nowadays (iPhone, Ipad), so we thought that the E was a great decision.
  • BAVS: We used the diminutive of BARBARA in English: BABS, and mixed it with the acronym of VICTOR SANTACREU: VS. Tadaaaa!

 

Also, we used dieresis on the ä, meaning two brains thinking (so creative ahh), but of course in 2000 the URLs could have signs (THANKS INTERNET!)

Imagine:

  • “Send me an e-mail to barbara@ebävs.net”
  • “What?”
  • “Yes. EBÄVS”
  • “EVAVS?”
  • “No, I spell it: E de España, B de Barcelona, A de Alicante width dieresis, V  de Valencia y S de Salamanca”

 

Actually, we think about change EBAVS to something more legible, but you know what?

If we write EBAVS on Google we have no competitors and the first pages are us. (Google suggest Ebay also..) The site,  the images, the social networks…

SERPS ebavs

 

 

We love EBAVS and the meaning.

We are weird and special and we want to continue spelling our name. Know more about us on interviews of EBAVS.

 

SEO workshop

, ,

In EBAVS/ we had to work with BETAHAUS creating intern Workshops (SEO and WordPress) for our beloved coworkers. The name “Members teach members”. This movement based on the community of Betahaus to helped all members and taught about what we are as experts.

We just did WORDPRESS Workshop with Víctor, and now it’s my turn to create a BASIC SEO WORKSHOP.

 

At first, we thought to do two Workshops, one of basic level, and the other for experts. Then we recognized that the level at Betahaus was more basic than expert, so we only do a session. We had only 2 hours and a half to do a quick and basic SEO Workshop, so, we decided to talk about basic concepts. We prepared a presentation shared with all the students and shared it at the final Workshop.

The SEO Workshop was:

  • SEM: definition of terms
  • Search Engines: how many search engines are, Google the king
  • SERPS: what is a SERP
  • SEO: definition SEO
  • PPC: definition PPC
  • PPC vs SEO
  • Why SEO
  • Google
  • Evolution SEO: from the beginning to natural searches
  • How to do SEO: analysis, objectives, benchmarks, keyword research…
  • OnPage: what is and how to do it, titles, meta descriptions, WPO, CSS, robots, sitemaps, google analytics,  images – see our article of 3 Basic tips on image SEO
  • OffPage: what is and how to do it
  • Strategy SEO: what is a strategy SEO, content redaction
  • Tools SEO: reviewing tools for manage SEO: WebMasterTools, Google Keyword Tool
  • Case Study: activities with the coworkers to review their actions and the site.

See some of our charts of the workshop:
PPC Versus SEO
ppc-vs-seo-ebavs

What is a SERP?
que-es-una-serp-workshop-ebavs

The result was amazing, about 30 members of Betahaus were at the workshop.  We also uploaded a  SlideShare presentation:
Ebavs SEO – workshop de Barbara Casas

See us on Twitter our SEO Workshop:

 

WordPress Workshop in Betahaus

, , , ,

In 2016, Betahaus asked us to develop a basic Workshop on WordPress to teach members about coworking. The movement was called “Members teach Members”.  In this scenario, Víctor Santacreu prepared a workshop defined in two masterclasses: 2 days, four hours by day. The workshop is divided into 25% theory and 75% of practice.  34 students.

 

We prepared a presentation divided into two days.

The skeleton was:

  1. What is WordPress and what is it for?
  2. Features
  3. Installation environment
  4. Download and Configuration of a theme. What is a theme?
  5. What is a plugin
  6. Widgets: what are and their function
  7. Navigation menus
  8. Pages, Posts, differences between them – also categories and tags-
  9. Shortcodes: what are and examples
  10. User management and roles
  11. Creation of forms: using a plugin
  12. FrontPage / HomePage: the difference between them and what is for
  13. Improve performance: cache plugin and technical explanation
  14. Web upload to production

 

On the first day of the workshop, we taught the first  9 points.

The students are interested in How to install WordPress, what are the differences between posts and pages? We learned a lot about themes, installed one and configured it. We explained what and why plugins are important and also a little bit of the history of WordPress.

The elementals concepts of this class: WordPress, posts, pages, categories, tags, plugins, widgets. 

slide-wordpress-workshop-ebavs

The second day was a little more complex and difficult.

We explained what’s the difference between Homepage and Frontpage, configure both of them and put it online altogether. We continue on the basis of caching and why is good how to measure page speed and we see a difference between load page without cache and with a cache.

Finally, we move our project to production: migration BBDD, upload to real.

Thanks a lot for this opportunity Betahaus, was really amazing to teach people and learn from them.

 

Wireframes, mockups and prototype

I worked conceptualizing a site development: wireframes, mockups and prototyping.

These 3 different words are so important and vital to start any digital project. Not always used the 3, many of the projects I’ve worked on often use wireframes and mockups prototyped regardless of.

These 3 are very unknown and many customers, developers, designers and users do not understand the difference between the three. So I explain what they do.

WIREFRAMES

What is a wireframe?

A wireframe is a scheme or flat screen representing the skeleton or visual structure. Are considered low fidelity (lo-fi), the scheme does not have to be the final design. (Important for the client)

The goal of a wireframe is:

  • What: sort the contents
  • Where: hierarchy structure information
  • How: basic display user-interface interaction

The wireframes are the backbone of the design.
They are created quickly and with a very simplified aesthetic visualization, straight, square lines, white, black and grey.
There are numerous tools to develop them. But in my case I usually use:

Using wireframes

The wireframes are used for documentation. In fact, a lot of clients require this documentation for their customers and the development and art’s teams.

The wireframes are static images and are always accompanied by written notes explaining the interaction. Usually, add functional documentation.

They can also be used as internal sketches or skits for a computer, for example, if a developer asks me how I should do something, I make a sketch paper creating a wireframe.

 

MOCKUP

What is a mockup?

A mockup is a medium-fidelity model and includes some visual design.

  • Represents the structure of the information
  • Displays the content
  • Demonstrates the basic features of a static model
  • Let’s review the actual visual part of the project

Using mockups

I use it in all the projects because they are more visually and allow me to understand better the project.

 

PROTOTYPING

What is a prototype?

Prototyping is the representation of high fidelity (hi-fi) of a final product and simulates the interaction of the user interface. The design.

We need a designer that translated what we have defined in the wireframes with design tools like Sketch, Photoshop, Illustrator etc ..

.
Prototyping allows us to:

  • Testing interactions very similar to the final product
  • See the real content

The prototype is a simulation. For this, I usually use InVisio: a tool that allows you to upload the prototypes (designs) and link interactions.

Using prototyping

For user tests.
Interaction simulation is so real, allows to check the interface usability.

Prototyping is expensive and requires design development and UX expert and testing.

Summary:

Design fidelity Use Tools
WIREFRAME Low fi Documentation Mockflow, mockup Balsamiq
MOCKUP Mid fi Documentation and client reviews. Mockflow, mockup Balsamiq
PROTOTYPING Hi-fi User testing Sketch, Photoshop, InVision

Digital Strategy: Instagram and Pinterest

, ,
It’s been a long time since the last post.
 In these 7 months, we had not breathed, in fact, we became parents of a child, born in late February, so in EBAVS/ we have grown a little more.  So now, it’s time to write again about my job: Digital Strategy, and in this case my personal digital strategy on Instagram and Pinterest.
 We are very happy to be a 4 little family: Victor – Family CTO, Barbara – CEO of home, Júlia aka #juliapetarda our PM and the small Dídac 5 months aka Feliciano.

Instagram is the social network that I use to reflect the evolution of our family and “petardos” (as I call them).
Instagram like all social networks has rules to increase engagement with the user:

  • daily post
  • definition publication hours
  • mentions
  • using #
  • users interaction
  • videos or boomerangs
  • analysis post with more exit, etc…

In my case, I add little rules: publish what I want and I find aesthetic with a clear criterion which is my family.

I love images, I am an addict (photos, paintings, films, art books, comics etc …) with a lot of memory’s photographic and why I love social networks based on images (I’m an art historian). For example, one of the most I use is Pinterest; reminds me of the clipping magazines I do in my adolescence.

Pinterest is an aspirational network. A  feminine network, especially for use before going to sleep, from 9 to 12 pm, is when more pinners are.

I’m a Pinterest influencer with 12.2K followers.
Why?

For many reasons:

  • Pin daily – more than 11.2K -.
  • Pin aesthetic criteria.
  • Definition boards.
  • Analysis boards with more followers and increase pins.

In summary, create a digital strategy for Pinterest.

If in personal level networks you can establish strategies,  then imagine a professional level. One of the services I usually work in EBAVS/ is a consultancy and digital strategy: social networking, UX, SEO, Web Analytics etc.

I  recommend analysis tools to review the social networks.

Pinterest:

Instagram:

So, if you want to improve your profile social networks use these tools to see what content is most liked or pined and create a strategy yourselves.

But let me say one thing, have CRITERIA, either an aesthetic or element that makes you feel very comfortable to users and creates engagement.

 

 

Scary moments: the bugs. Our particular Halloween

, , ,

I know it’s difficult to explain, but part of my job is testing an environment and find bugs. People think it’s boring, but I’ll find this part quite interesting.
Victor, call me an expert; as I told you, I always find it.

But, what is a bug?

A bug is not a “bug” (little animal) is an error in digital environments. It’s mean that something it’s supposed to run, do not run correctly.

As a digital project manager, I test websites, microsites, apps but when I’m a regular user I find it on all the sites I’m usually using. This last week, I tried to buy online food, I write “I tried” but I had a lot of problems.

  • Alcampo.es, we discovered a few months ago, that is the cheapest grocery in Barcelona, so we bought it there, but this week in my house did not run the website. First, we tweeted to Alcampo and said to them, but then discovered that our IP is blocked!! For a range of IPs, see the image below. Scaring moment!!! hahahaCSfm4z2WEAAlhkP
  • La Sirena, I tried to do my shopping online, but I had no user, so first I signed up. I received an e-mail to confirm my user, so when I logged in, said that my user did not exist, so as a “normal user” I will go, but as a professional, I tried again and recovered my password so I received 2 e-mails with 2 different passwords, quite easy for all. ;) Finally, I logged in! Yuhuuuu Then I preferred to pick my cart at the physical shop, so I used the shop searcher, but when I wrote the CP or the address did not work again. The resulted shops are not correct, I wrote CP 08014 (it means Barcelona city) and appears other cities like El Masnou, Sabadell, Terrassa, see the screenshots: (Scaaaaaring all!!)

    lasirena

 

So, this is our scary moment, our particular dairy Halloween. Bugs are like zombies appears when you least expect it…

 

CONTACT US

Nice to meet you.

So, today is your lucky day, you have landed in the place and the right team.

Say Hi

BACK TO TOP

© 2022 Made by EBAVS/ – All Rights reserved