6 reasons why you should go with a one page website

Are you considering going with a single page design for your website? Despite what some might say about it’s limitation I think this design approach can be great when it’s done well and for the right purpose.

The trick lies in knowing when to make this design choice. Understanding when it makes sense to just have one page and when you need more space to work with will save you time and can help you create a more engaging website.

A single page site can be very useful for certain types of content. Landing pages, single product offerings, and some portfolios are perfectly suited for this type of layout because oftentimes their content can work cohesively together on one page. On the other hand, a one-page design would not be suited for an online store or membership site because multiple sections are required.

With that said let’s take a look at 5 reasons why you should consider going with a one-page layout.

1. Maintenance is easier

One of the most obvious advantages of a single page design is maintenance. It’s easy to update because you only have one page to deal with.

2. They are simple to navigate and use

Single page sites help to keep your audience in one comfortable web space. With only one page it will be simple to navigate and the limited space makes it easier for visitors to find what they’re looking for. It would be pretty difficult for a visitor to “get lost” because there is only one page to scroll through.

3. Control the order of content

If order and uniformity are important when displaying your message or content then this might be the best way to go. Visitors will always land on your website the same way each time. You can arrange the information in a way that the visitors discover them in the exact order you wish them to because they have to scroll through the page from top to bottom to find what they need. Along this scrolling journey, they will have to likely pass through all the sections of content that you place on the page. Single page sites immerse the user in a simple linear experience and there is a clear beginning, middle, and end.

4. Big header elements command attention

Although this is not exclusive to one page designs bold header elements are even more noticeable when used in this type of layout. Headings help to capture your visitors attention and pull them in. With this, it’s easier for you to keep the focus on content sections.

5. It could lead to higher conversions

Since there’s less information to sort through, chances are your visitors will pay more attention to your content. Some will argue that this can translate to higher engagement and possibly more conversions and this would mean more sales and revenue for you.

6. You stand out

One page sites are not “the norm” on the web because most sites do require multiple pages so this makes them unique. They‘ve become more popular over the years but for the most part they‘re’ still a unique web design layout choice.

Ultimately the design approach you choose to take when building your website is up to you. Grab a pen and paper and write out exactly what you want to include on your website before you start working on a design. Create a rough sketch of your site and outline the types of elements you’ll need and their location. When you do this it can help you to figure out if a one-page design is a good way for you to go.

The 3 second rule

3 seconds.

That’s all the time you have to make an impression with your website. You can loose almost half of your visitors if pages don’t load quickly enough. Slow speeds kill conversions. That means a lesser chance of you being able to engage or sell to your customers. After 10 seconds you can definitely say goodbye. People are strapped for time and don’t have the patience to wait endlessly for a page to load.

It’s important to have a website that loads quickly so you can boost customer confidence and trust in your website. Pages that load quickly will make people tell other people about you. A few seconds can make all the difference!

How can your web developer help you to solve this?

Make sure they do these things:

  1. Remove unnecessary plugins or keep them to a minimum.
  2. Use high quality images optimized for web.
  3. Code semantically and follow the DRY rule in the backend to ensure everything loads fast and in the right order. If they don’t know what good semantic code is then you might need a new developer.
  4. You have a good reliable web host with up to date reliable equipment. Don’t always go the cheaper route unless you do your research. Look thoroughly into what your web host will be providing you. Sometimes cheaper companies often use cheaper equipment, which means that your visitors might have to wait longer for your pages to load.

Inclusion matters. 5 ways to make your website more accessible

Web accessibility. You might’ve heard the term before or maybe you have no idea what it means. Either way, it’s an important thing to think about when building your website. Read on to learn more about what it is and find out what you can do to make your site a little more inclusive.

What is Web Accessibility? 

Web accessibility means making your website content and multimedia accessible to people with disabilities ensuring that people who have barriers to access it can do so. Disabled Individuals can include those with a physical, mental, cognitive and or developmental disability.

With these individuals in mind you should design and build your website in a way that will provide everyone with as equal an experience as possible when they visit your site.

*UPDATE*

I read an article that pushed my thinking a bit further in regards to who web accessibility is for. Web Accessibility has always been presented to me as something aimed towards individuals with the “stereotypical conditions” mentioned above. But it’s more than this because accessibility affects all users. Individuals with temporary or conditional disabilities such as aging, slow internet connection, arthritis, sun glare, or even a broken arm are all affected. Building with accessibility in mind means building for these potential temporary or conditional stress cases aswell.

Why is it Important?  

Accessibility should be prioritized for visitors that come to your site. Not all your visitors are the same and some have special needs. Everyone should have an equal user experience, or as close as possible.

For users navigating your website with assistive technologies, adding context to images and links helps them better understand the content on your web page. For older visitors who might have arthritis or other mobility issues, ensuring that they can tab through important content is also essential.

Here are five basic things you can do (and keep in mind) to make your website more inclusive for all visitors.

Provide alternatives to audio and video content. If your web content regularly includes audio and video content, you should provide subtitles so screen readers (a software program that reads text on a website out loud) can read them. This is especially urgent if you’re producing the bulk of your own video and audio content. If you don’t include subtitles you could be completely excluding the disabled demographic from accessing your content. Making a transcription of the audio or video available is an incredibly helpful resource for your visitors.

Don’t rely on colour alone to convey your message. Colors should not be necessary to understand the content and its current state. For example, don’t highlight errors just with red text. Add a supplementary icon. If colour was removed from the screen and your website could only be viewed in black and white the message should be equally understandable. Proper colour contrast is important and will assist you in making your page as visually usable as possible to individuals with visual impairments.

Ensure there is a tab key alternative to mouse clicks. This simply means that your visitors should be able to tab through your website content in a logical way in the absence of a mouse. Some visitors may not be able to use a mouse or trackpad. These people should be able to access content through the use of a keyboard by pressing the tab or arrow keys. The tab order should match the visual order, so keyboard users are able to logically navigate through site content and not get confused.

Include alt tags for images. Alt tags (also called alt text or alternative text) is the written copy that shows ups in place of an image if it fails to load on a website. For someone who has a visual impairment and uses a screen reader, the alt tags are read aloud and are the only way a user knows what the image is. You should take alt tags seriously and use them as an opportunity to describe the image as accurately as you possibly can. For example, if it’s a photo of a girl on a beach drinking use the alt text “girl on a Negril beach drinking coconut water”). Visually impaired users will love you for this.

Use descriptive links. Oh man, the infamous “click here”. Avoid describing links this way. When embedding a link in a post, it’s more useful to describe the link based on what it’s linking to. For example, it’s better to write out, “Learn more about our sustainability efforts by reading our 2018 Sustainability Report” instead of just “Click Here”. Users can then know exactly where they are going when they click on the link. Also, try to stylistically differentiate your links with an underline or by using a different colour so that there is a colour contrast between hyperlinked text and regular text. That way, colorblind users will able to find a link immediately without having to hover over it with their cursors.

These are just some basic tips you can apply when building your website to make it more accessible. This is by no means an exhaustive list but it does provide a starting point. There is a lot more that can and should be done to truly make your website accessible according to WCAG standards.

I hope this was helpful to you and you learned something new about how you can improve your website to make it more inclusive for everyone.

Take a break

The thought of separating ourselves from our computers and phones can seem impossible and downright even scary for some people – especially those of us whose livelihood depends on the internet *ahem Developers*. I get it – we work with technology every day and there are very few areas in our lives not affected by it. Slack notifications on our phones tell us when a team member has sent a message, we correspond through email for just about everything relating to business these days and we use YouTube for learning and entertainment. Trust me, I get it. But here’s the thing the more I learn and become involved in the internet world the more I feel like we should  be open to taking scheduled breaks from all the technology around us.

The thing is technology is non stop. It’s always on and we’re always connected. It’s overwhelming at times and the need to constantly keep up with emails,  messages and app updates is endless. All of this can become really exhausting and sometimes you begin to wonder if you can really keep up. I know I have.

There are downsides to being overconnected. Special moments with your friends and family get interrupted and you become more easily agitated when things take too long. You can also miss out on the spontaneous happy surprises that come with relaxing with your thoughts. Stillness is still a thing, well I think it should be anyway.

What if for 24 hours, you put the phone on silent (or even turned it off), avoided the laptop, and decided to step away from binging movies? If a full day is too much, how about half a day?

Let’s disconnect for awhile and watch the world around us become more interesting.

Let’s take a break.

Community is everything

A few months ago when I began school and started training to become a Web Developer I decided to create an Instagram coding account called @kaykay.codes to track my journey, share my thoughts and experiences and network online with others in the web dev community. What I’ve gained and learned since then is much more than I could have asked for. I’ve grown to really appreciate and understand how important a community is (especially as a newbie) in the coding world. I would even argue that it’s the backbone of programming – we are nothing without each other! Community gives us purpose, understanding and knowledge. There are many benefits to belonging to them and I would like to share some of those with you.

We get each other

A community allows us to support one another and empathize in our struggles. As Web Developers we are often behind our computer screens plugging away at projects creating functions and debugging code. The frustrations we experience while doing these things are unique to our profession and sometimes only other Web Developers can understand. Your mom and boyfriend don’t really “get it” a lot of times. Sometimes you just want to be able to explain how frustrated you are because the console is not logging the information properly from the function you created and have someone give you some useful feedback on how to solve it. Other developers will get this and can help you.

There’s a flavour for everybody

There are a lot of communities out there and it can be difficult to navigate some on your own, especially as a newbie. The good news is there’s a flavour for everybody based on your interest, race, specialty, ethnicity, location etc. I belong to a small Telegram group called Coding Queens which is a group of underrepresented Black women in tech. The group came together as a way for us to share experiences and resources and to support one another. It’s basically a sisterhood of amazing smart women who’ve come together in support and solidarity while we all navigate through our careers in STEM. Women in the group hold a range of positions including but not limited to Web Developers, Data Scientists, Engineers and students. We’re located all over the world and I’ve learned a lot from these women through storytelling, tips and resources we share with one another. Here are a few more communities that I belong to:

We are each other’s biggest fans

The Instagram community that I’ve become apart of is literal gold for me. I’ve made friends and been able to network online and follow the journey of other developers and those in the tech space. People post a lot about their progress which includes sharing what new languages they’re learning and projects they are working on. We are each other’s biggest fans and I always get a load of compliments and words of encouragement when I post about a project I’m working on, frustration with a new language or accomplishment. It’s like we all want to see each other win, including me. It feels great to see others who are senior in their experience to mine doing what I’m working towards. Knowing that their careers have allowed them some wonderful opportunities to do workshops and speaking engagements, travel around the world, and make valuable contributions to cool projects they work on feels great. It shows me that I can dream big and gives me more things to aspire to.

You stay on the beat of what’s going on

Belonging to a social group centered around a mutual interest will keep you up to date on what’s going on in the industry. There are countless conferences, meetups and workshops happening at any given moment. The groups you become apart of will likely make announcements regularly about these events and could also have inside details on scholarships and discounts you might not otherwise know about. Conferences also sometimes give out special tickets to members of certain groups.

Opportunities!!

Job opportunities, scholarship opportunities, speaking opportunities. Opportunities, opportunities, opportunities! I can’t say it enough. There are countless opportunities that can become available to you when you’re apart of certain communities. The Women In Web Dev group I belong to sends out a weekly newsletter that points to a list of job opportunities available. I love it and look forward to it dropping in my inbox every week.

I would encourage you to seek out a few communities of your own to join based on your own unique interests. I promise you won’t regret it.

My 7 day CSS graphics and animations challenge

See those graphics up there? I did those! The best part is they are all made 100% of code. Yup, it’s possible to create fun graphic art with just code alone.

During the Christmas 2019 break from classes I decided to challenge myself to create one CSS graphic a day for 7 days. I did it as a way to practice my CSS positioning and animation skills and because I wanted to create some cute code art after being inspired by some really cool pens on CodePen. Over the 7 days I learned a lot and had opportunities to play around with CSS using shapes to create some fun and cute graphics. Here is recap of the 7 days and what I did.

Mr Bear

See the Pen CSS Bear #dailycss Day 1 by Shanakay H. (@kaykaycodes) on CodePen.

 

On the first day I took some inspiration from another Pen and decided to make a bear. I used only circles by doing a border radius of 50% on all the shapes. It was fairly simple and straightforward and took me about 30 minutes to do. I used gradients for the bubble gum to make it look a bit more realistic. For my first graphic I don’t think it was too bad and I did it all without having to Google anything to my surprise.

Bouncing Margaret

See the Pen Margaret #dailycss Day 2 by Shanakay H. (@kaykaycodes) on CodePen.

 

Margaret is a coworker of mine who is always interested in seeing what I’m learning and the projects I’m working on. As a small gift I decided to make her a CSS graphic and show her all the code that goes along with it. At first I was just going to use shapes to make a face but then I thought some animation would make it more interesting. I decided to add a shadow at the bottom and made her head bounce while the shadow expands to match the movement of her head. This was kind of challenging at first syncing the two different animations of the head and shadow but with some tweaking I make it work.

Eggs for Breakfast

See the Pen Frying Pan & Egg #dailycss Day 3 by Shanakay H. (@kaykaycodes) on CodePen.

So anyone who knows me knows that I love my eggs in the morning – especially an egg salad sandwich. I was obviously feeling hungry when I started this one and decided to create a frying pan with fried eggs moving. For this one I played around with different border radius percentages on the frying pan handle. This took me about 45 minutes to complete and was pretty straightforward overall.

Hearts and Likes

See the Pen Likes Button #dailycss Day 4 by Shanakay H. (@kaykaycodes) on CodePen.light

This is second fave – mostly because of the colour scheme. I love pink! When you hover over the heart it beats. I worked with the :before and :after pseudo class to create the heart which is something I have never worked with before. Basically the :before and :after allows you to flip the shape and gives you the two parts of the heart. This wasn’t easy at first because when I added an animation to the heart it kept on rotating to the left but then I realized I could just join the scale and rotate properties together in the animation key frames to straighten it and it eventually worked.

Sunny with Clouds Weather Report

See the Pen Weather Forecast #dailycss Day 5 by Shanakay H. (@kaykaycodes) on CodePen.light

This was probably one of the longer ones to complete and I lost track of time. I animated the clouds and sun to work in sync. The sun slowly reveals the border around it to make it look like it’s pulsing and the clouds move left to right with the opacity set to 90% so it appears transparent. I took inspiration from the iPhone weather app for the colour palette.

Janky Christmas Tree

See the Pen Christmas Tree #dailycsschallenge Day 6 by Shanakay H. (@kaykaycodes) on CodePen.light

Day 6 was Christmas Day and honestly doing a CSS graphic was the last thing on my mind. I decided to go ahead and make something because I had already missed a couple days and wanted to get it out the way. After my family left I got to work and decided to do what was probably the most appropriate fo the occasion – a Christmas tree. I worked with triangles for the first time to create the tree and used circles for the lights. I call it a Janky Christmas Tree because to me it feels kind of rushed and patched up – which is true. I completed everything in about 45 minutes.

My Self Portrait

See the Pen Self Portrait #dailycsschallenge Day 7 by Shanakay H. (@kaykaycodes) on CodePen.light

On the last day of the challenge I did a self portrait of myself with a blinking eyes animation and it’s my favourite one (although I’m probably a little bit biased hehe). I thought finishing off the challenge with something more personal was a good idea. I used a lot of circles to create my curly hair. To make my shoulder area appear in the yellow box and not “overflow” into the background I used overflow:hidden on it. I also did the same on the styling for my mouth so my tongue wouldn’t appear outside my mouth lol.

In Conclusion…

This challenge was great and allowed me to really practice and brush up on my CSS skills and I’m glad I decided to do it. I still have a long way to go and so much to learn but I’m pretty happy with the fact that I stuck to it and completed the challenge – even if I missed a couple days in between. I plan to make more CSS graphics when I have some free time over Reading Week to add to the collection.

To see the above graphics and animations and more of my work visit my CopePen.