Desk Talk focuses on everything related to front-end development and web design. Along with some best practices and tips, topics will also include information about the latest trending javascript libraries, coding resources, Wordpress frameworks, coding language spotlights, and web design trends. This blog will serve as a virtual bulletin board; blogging will be part of my learning process as a front-end developer and web designer.
Sunday, May 18, 2014
Strategies For Staying Educated About Interactive Media, Front-end Development, and Web Design
A lot of professions require keeping up to date with standards and trends, but for interactive media, it is almost a weekly commitment and should be a part of the job. With interactive media, there are trends that appear every year and it is usually a good idea to follow them. It is almost expected that people accept these trends and throw away the old ones; if you don't, you'll quickly be called outdated. I've been there. Within development, there are frameworks are pop up every now and then. If you want to stay in the business, you must learn these new frameworks. Every couple of years, the semantics of code is changed and you must learn the new tags. Browsers are always being updated, operating systems change, platforms are introduced. So how do you stay up to date? Let's explore how.
What To Look For When Hiring A Developer
A recent experience made me think about this post, but this was also a topic of debate on the Web Development subreddit on Reddit this week. I was working with the client to improve their SEO, social media, and user experience. The client told me that they had a redesign of their site in February, so I was really shocked when I first encountered their site. I was looking through it and I noticed that their web developer had placed a link to their site, which had rates for their work. I was surprised to find that this guy was charging $75/hr plus $1000 to start working on the site and the end product for my client was so terrible.
If you're hiring a web developer, you need to find somebody you can trust to give you a great product. This means that they have a great body of work, but they also have people skills. Let's go over what you should be looking for within each area.
This might be hard to judge from the client's point of view, but make sure you really like what you're seeing. If the developer happens to show a ton of projects, make sure you really are obsessed with the latest ones.
See what comes up. See if you can find any social media mentions. Explore Twitter and see if anybody has reviewed them, mentioned them, followed them. See if they are active within the community, blog, etc.
If you're hiring a web developer, you need to find somebody you can trust to give you a great product. This means that they have a great body of work, but they also have people skills. Let's go over what you should be looking for within each area.
When Looking To Hire A Developer For Your Site
Portfolio: Look For Frequent Updates
A frequently updated portfolio gives the audience a good idea of what your current work is like. However, it is really great for showing clients that you are active within the field. It shows that the developer is serious about the craft, is working to improve, and has plentiful clients or ideas.Best Projects
From the point of view of the developer, you want to make sure you are showing your best works. Basically, don't cloud the portfolio with every single project you have ever worked on. Show the best work and really try to sell it.This might be hard to judge from the client's point of view, but make sure you really like what you're seeing. If the developer happens to show a ton of projects, make sure you really are obsessed with the latest ones.
Side Projects
Look for some side projects. If a developer is spending the time to work on side projects not related to client work, then that developer really loves what he or she is doing. A developer should feel the need to work on these type of projects as well; it shows creativity and a drive to complete that idea.People Skills
If they can't communicate well, drop them. You might run into several problems during and after development, and if you haven't talk with them about your issues, you're going to have a bad time.Responsive
Mobile-first web development is key. If you their portfolio or work doesn't work for mobile, then theres a chance yours won't be coded for mobile either. An increasing amount of people are using mobile phones to access the web. You will lose valuable customers if your site fails to have great user experience on mobile.Google Them
See what comes up. See if you can find any social media mentions. Explore Twitter and see if anybody has reviewed them, mentioned them, followed them. See if they are active within the community, blog, etc.
When Hiring
People/Interview Skills
This is kind of a given, but having an employee with great interview skills shows that they care about the position, would fit in with your company, and if need be, could communicate well with clients.
Skills Test
This might be the most important one. With development, proving they have the skills in a controlled environment shows they are capable of working in that position.
Attention To Detail
Attention to detail is always great, but really important with development. This is where you need to look at their code. Look for clean, semantic code. Make sure the code is readable.
Conclusion
In the end, this is an exchange of trust. They are going to be in charge of creating an online presence for your client or company. If you can't trust them as a person or find their portfolio to be lacking in something, then you might want to look elsewhere. There are plenty of great developers out there who are willing to work for you. If price is your issue, remember: you usually get what you pay for.
Labels:
developer,
hire,
interview,
job,
projects,
responsive,
skills test,
web development
Location:
Elon, NC, USA
My favorite resource? Dribbble, of course.
Studying other artists is perhaps one of the biggest ways to grow as a designer. Having work critiqued by other artists is also extremely valuable, but we aren't all blessed with a workplace full of designers willing to critique our work. It's also fun just presenting work and getting more eyes on it.
There is where Dribbble (with 3 b's) comes into play.
Dribbble suggests this question: what are you working on? Dribbble is a community of web designers, graphic designers, and various other designers that create small snapshots (shots) of their work in progress or at completion. Members can then comment or like the shots. If you haven't figured it out yet, Dribbble has this basketball theme around it.
Anyway, it's a great way for designers to showcase their work. Designers can provide critiques, which can help improve the work because a lot of content is a work in progress. It's also a great way to get some inspiration, which is why I use it. The world's leading designers are on Dribbble and it's amazing what people can accomplish. It really helps you keep up to date because the most popular section is always flooded with the trending design elements.
Oh yeah, Dribbble is sort of private. It requires an invite to become a member, but you can still browse the site without a membership. Members just have the opportunity to contribute content, which is really fun.
The Main Page
The Shot
Jobs
Conclusion
Dribbble is a lot like Adobe's Behance, but to me, Dribbble is more creative and professional. For one, it requires an invite to become a member. I also just love the entire theme of the site; the basketball thing is pretty funny. I am always impressed with the content as well. I don't think I have ever seen anything horribly designed on the site, which is impressive. It's a great resource for getting inspiration. Dribbble really is one of my best kept secrets, but I really think every designer should be a part of it.
Location:
Elon, NC, USA
Thursday, May 8, 2014
How to push a project to Github
In a previous post, I mentioned that every developer should be using Github. Github is a cloud-hosting service that creates backups of repositories, or projects. These projects can be viewed, shared, or edited by other members of Github. Github creates a wonderful experience because it creates a worry-free backup of your work and other people can contribute towards your work, which can create bigger and better projects.
In order to use Github, you have to be a little bit familiar with a command-line interface, such as terminal for Mac. It's been a few months since I've pushed a project to Github, so I thought I would go over the steps to both help you and myself.
Before I begin with the initial Github push, there are three basic steps when pushing a project. First, edit content. This means editing a piece of code, adding images, added documents, whatever. Second, you commit the changes, which means you kind of create a save state. Three, you push the save state to Github.
This is actually an easy step and it doesn't require the command-line interface. Visit Github and perform the necessary on-screen steps. Be sure to name your repository and remember the name, because we will have to refer to it in step three. It doesn't matter what you select for the README; we are going to wipe out the settings in a second!
Also, make sure you have a folder on your desktop for your project. The beauty of Github is that you can work offline and then push your content online.
Git is required in order to push projects to Github. If you don't have it installed already, you can actually install it from Terminal. Follow the steps provided at the Git website.
Now that you have Git installed, you can get started!
In Terminal, cd to your local project folder on your computer.
Type the following in the Terminal:
git init
This creates a git repository in your project folder on your computer.
Then add files to the Git index:
git add .
Commit the added files:
git commit -m 'Whatever you wish to say'
Commiting is like a save state for your project. You can add messages to help you remember where you are at within your project's progress. This is added in between the single quotation marks.
Create a connection with Github
git remote add origin https://github.com/username/your-project.git
Make sure to change the your-project to your project's url address. You can get the url from the repository you created through Github.
Push Project to Github
git push -u origin master
This sends your commits in the master branch of Github. Basicaly, this is sending your save state to Github.
That's all! Using Terminal for the first commit and push is required. Once you have done this, you can download a Github client that will make it easier to commit and push; it doesn't require Terminal. I prefer Github for Mac. However, you can always commit and push to Github through Terminal like we just did. This time, this is all you have to do for the next commit and push:
git add .
git commit -m "type your commit message here"
git push origin master
In order to use Github, you have to be a little bit familiar with a command-line interface, such as terminal for Mac. It's been a few months since I've pushed a project to Github, so I thought I would go over the steps to both help you and myself.
Before I begin with the initial Github push, there are three basic steps when pushing a project. First, edit content. This means editing a piece of code, adding images, added documents, whatever. Second, you commit the changes, which means you kind of create a save state. Three, you push the save state to Github.
Step One - Create Your Repository
This is actually an easy step and it doesn't require the command-line interface. Visit Github and perform the necessary on-screen steps. Be sure to name your repository and remember the name, because we will have to refer to it in step three. It doesn't matter what you select for the README; we are going to wipe out the settings in a second!
Also, make sure you have a folder on your desktop for your project. The beauty of Github is that you can work offline and then push your content online.
Step Two - Install Git
Git is required in order to push projects to Github. If you don't have it installed already, you can actually install it from Terminal. Follow the steps provided at the Git website.
Step Three - Initialize Git
Now that you have Git installed, you can get started!
In Terminal, cd to your local project folder on your computer.
Type the following in the Terminal:
git init
This creates a git repository in your project folder on your computer.
Then add files to the Git index:
git add .
Commit the added files:
git commit -m 'Whatever you wish to say'
Commiting is like a save state for your project. You can add messages to help you remember where you are at within your project's progress. This is added in between the single quotation marks.
Create a connection with Github
git remote add origin https://github.com/username/your-project.git
Make sure to change the your-project to your project's url address. You can get the url from the repository you created through Github.
Push Project to Github
git push -u origin master
This sends your commits in the master branch of Github. Basicaly, this is sending your save state to Github.
Final Thoughts
That's all! Using Terminal for the first commit and push is required. Once you have done this, you can download a Github client that will make it easier to commit and push; it doesn't require Terminal. I prefer Github for Mac. However, you can always commit and push to Github through Terminal like we just did. This time, this is all you have to do for the next commit and push:
git add .
git commit -m "type your commit message here"
git push origin master
Location:
Elon, NC, USA
Thursday, May 1, 2014
UX Best Practices
UI/UX design is a new and upcoming field in the digital media world, but its concepts have been around since the creation of interactive media. Great UI/UX, or user interface and experience, is a balance of both high convertion rates and ease of use. These two are great together because it means more business for your company and there is a lack of frustration with the software that can immediately leave a bad taste in a customer's mouth. Thankfully, there is a lot of research out there for what makes great UI/UX. For your next web design project, try some of these suggestions out and see how they work out for your client's business.
1. Know Your User
This is a no brainer. You need to design for the user and not yourself. Context plays a big part in the design. What is the site about? What is the purpose? What is the end goal? Design these things with both the user and client in mind.
Also, while you may know how to use a website because you designed it, your users might not have the same intuition to click something. Make things more intuitive.
2. Surprise The User
While I just said to keep things intuitive, surprise the user occasionally. This will provide a better user experience and it will stay in the user's mind.
3. Solve Problems
One of the many reasons you have been hired as a ui/ux designer is to solve problems. A website or product can be a great tool for solving problems. Solve these problems through design, but keep things intuitive and don't over-complicate. Everything on your website is there to help the user.
4. Keep a Consistent Navigation
One of the easiest ways to confuse a user is to switch up the navigation. You may think that your navigation gets boring if it remains the same across all pages, but really it is quite comforting to know where the navigation is, know where the links are within the menu, and where they are at within the site.
5. Rethink What You Just Designed
There are multiple ways of designing something within every aspect of your design. There are thousands of fonts, colors, shapes, layouts, progressions, forms, etc. etc. etc.
For example, instead of a three column layout, try out a one column layout. A one column layout will keep your layout more focused. It leads to a better narrative and better attentiveness.
For more of these examples, there is a great blog called goodui.org. I recommend reading every one of their posts.
Labels:
rethink,
solve,
suggestions,
tips,
tricks,
ui,
user experience,
user interface,
ux,
web design
Location:
Elon, NC, USA
Thursday, April 24, 2014
The Problems With Modern Web Design
Just recently, I made myself research the top web designers of our age. Having an art history past, I am used to having artists to look up to or gain influence from. I hadn't really thought about it until the other day when I asked a visiting graphic designer who he gets the most influence from. And then it hit me, there's gotta be some web designers that are making most of the content or, atleast, analyzing it. And then I came across Trent Walton.
I just finished reading Trent Walton's post on "Device-Agnostic" web design and I couldn't agree more with everything he said. We are in a point in time where designing for the web isn't as easy as it once was. 2.4 billion people are using the web and a lot of them are from developing countries. This means the web is being accessed by an infinite amount of screen sizes, operating systems, devices, software versions, and connection speeds. Thus, designing for the web has definitely become a challenge, but the thing to do is focus on the harshest conditions first, and then go from there. Walton addresses four topics:
Hostile Browsers
Hostile browsers are a real problem. People are using all sorts of browsers to view the web. This includes browsers that are a few updates old to browsers that aren't even supported anymore, like the recently discountinued internet explorer 6 (thank god). Other situations can occur such as javascript timing out or a mobile phone temporarily losing service. Walton explains that we need to design using the progressive enhancement method.
According to wikipedia,
Tiny Screens
According to The Verge, mobile and tablet sales are far exceeding desktop sales. Again, this means that mobile should be the first consideration when designing for the web. On top of this, the experience needs to stay the same between all screen sizes. Pages should not act wonky on mobile, fonts should look the same, and interactivity shouldn't be affected. Furthermore, mobile-sensitive topics like data plans should be considered. Having large images and HD video can really eat up a data plan.
Another problem is that sometimes the mobile website doesn't have all of the features that the desktop version has. This is really annoying if you have to visit the desktop version of the site to do something. This brings up the question: if it doesn't fit or work for mobile, why does it fit for desktop?
Slow Load Times
Nothing kills an experience like slow load times; we don't have time for it. As designers, we are accustomed to building websites on fast servers around the office or at school. But in reality, most of the web doesn't have the same quality of internet speed as we do. Since 2010, the average page size has doubled. This is becoming a big problem, especially if we are in the mindset of designing for mobile first.
The problem lies within us, the web designers.
We need to be aware that everything we add to a page is adding more weight in file size. We need to question ourselves: is what I just added valuable to the website? Overall, just be more aware of files sizes. You can fix this by minifying your code, using low quality jpgs over pngs, and when applicable, using code in the place of images.
Touch Inputs
We need to design with a fat-finger approach. On desktop, links are often really small and only the size of the text that links. For mobile, buttons need to be a big size so that fingers can accurately press them. Design should be consistent across everything, so this needs to be something to think about.
Conclusion
In 2014, simply coding a site with a responsive framework doesn't cut it anymore. Mobile pages need to work just as well as the desktop version. Having a responsive site doesn't eliminate every problem: images still need to be compressed, hd videos shouldn't be on mobile pages, and specific phone orientations shouldn't be required. In the end, it might be easier to design your website as if you are designing for mobile. It really should be the first thing you consider when designing for the web in 2014.
I just finished reading Trent Walton's post on "Device-Agnostic" web design and I couldn't agree more with everything he said. We are in a point in time where designing for the web isn't as easy as it once was. 2.4 billion people are using the web and a lot of them are from developing countries. This means the web is being accessed by an infinite amount of screen sizes, operating systems, devices, software versions, and connection speeds. Thus, designing for the web has definitely become a challenge, but the thing to do is focus on the harshest conditions first, and then go from there. Walton addresses four topics:
Hostile Browsers
Hostile browsers are a real problem. People are using all sorts of browsers to view the web. This includes browsers that are a few updates old to browsers that aren't even supported anymore, like the recently discountinued internet explorer 6 (thank god). Other situations can occur such as javascript timing out or a mobile phone temporarily losing service. Walton explains that we need to design using the progressive enhancement method.
According to wikipedia,
Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.This makes a lot of sense to me, but I am unsure how to provide different experiences based on who interacts with my content. But I guess advanced browser software can be considered up to date modern browsers and everything beneath that mobile quality. If that is the case, then designing for mobile first is definitely the smartest thing to do. I am currently designing a mobile application using the Bootstrap framework. Bootstrap is advertised as a mobile-first framework and I think there are a lot more of these frameworks popping up. Anyway, while the framework is advertised as a mobile framework, it provides an equal experience on a desktop. Bootstrap is pretty popular as well, which means more people are designing in this modern way.
Tiny Screens
According to The Verge, mobile and tablet sales are far exceeding desktop sales. Again, this means that mobile should be the first consideration when designing for the web. On top of this, the experience needs to stay the same between all screen sizes. Pages should not act wonky on mobile, fonts should look the same, and interactivity shouldn't be affected. Furthermore, mobile-sensitive topics like data plans should be considered. Having large images and HD video can really eat up a data plan.
Another problem is that sometimes the mobile website doesn't have all of the features that the desktop version has. This is really annoying if you have to visit the desktop version of the site to do something. This brings up the question: if it doesn't fit or work for mobile, why does it fit for desktop?
Slow Load Times
Nothing kills an experience like slow load times; we don't have time for it. As designers, we are accustomed to building websites on fast servers around the office or at school. But in reality, most of the web doesn't have the same quality of internet speed as we do. Since 2010, the average page size has doubled. This is becoming a big problem, especially if we are in the mindset of designing for mobile first.
The problem lies within us, the web designers.
We need to be aware that everything we add to a page is adding more weight in file size. We need to question ourselves: is what I just added valuable to the website? Overall, just be more aware of files sizes. You can fix this by minifying your code, using low quality jpgs over pngs, and when applicable, using code in the place of images.
Touch Inputs
We need to design with a fat-finger approach. On desktop, links are often really small and only the size of the text that links. For mobile, buttons need to be a big size so that fingers can accurately press them. Design should be consistent across everything, so this needs to be something to think about.
Conclusion
In 2014, simply coding a site with a responsive framework doesn't cut it anymore. Mobile pages need to work just as well as the desktop version. Having a responsive site doesn't eliminate every problem: images still need to be compressed, hd videos shouldn't be on mobile pages, and specific phone orientations shouldn't be required. In the end, it might be easier to design your website as if you are designing for mobile. It really should be the first thing you consider when designing for the web in 2014.
Labels:
2014,
device,
mobile,
mobile first,
modern,
trent walton,
web design
Location:
Elon, NC, USA
Wednesday, April 23, 2014
Twitter Gets A Familiar New Look
If you haven't noticed yet, your Twitter profile page has received a makeover.
About a month ago, Twitter announced plans to roll out a new profile page that would make profile pages represent their owner's personality even more. If you think about it, the old Twitter profile page was pretty bland and generic. However, their new page is eye-catching, but it does resemble something. Twitter perhaps received some inspiration from Facebook because the two profile pages look pretty similar now. They both have a profile picture nested in the top left corner along with a large cover photo that stretches across the entire top of the screen. Below all of this rests content.
The new profile page |
For Twitter, this now includes best tweets, pinned tweets, and filtered tweets. Let's check them out!
Best Tweets
Notice the size difference. The one on the bottom is part of the new best tweet feature |
Pinned Tweets
They sit at the top of your profile page |
Filtered Tweets
Twitter understands the importance of photos and videos. They are visually stimulating and our eyes automatically fall on pictures over text. If you want to just look at tweets that have pictures or video, you can now filter tweets on your timeline. Other options include view all tweets and view tweets with replies.
All of this is a lot to take in. If you don't want to switch right away, Twitter is not pushing the switch just yet. You can demo these new features, but they won't stick until you tell Twitter that you are ready. With that said, all of these new features improve an already amazing web experience. I think I'm finished talking, so if you haven't tried out the new Twitter, visit your profile page and try it out!
Labels:
best tweet,
elon,
Facebook,
imedia,
makeover,
pinned tweet,
profile page,
Twitter,
web design
Location:
Elon, NC, USA
Subscribe to:
Posts (Atom)