Roger.
I think I'll make some business cards/flyers too, I have lots of friends at uni or in creative collectives.
Might even post some through letterboxes in my local area.
-
Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.
Web Design and Development |OT| Pixel perfect is dead, long live responsive design
- Thread starter gutshot
- Start date
Roger.
I think I'll make some business cards/flyers too, I have lots of friends at uni or in creative collectives.
Might even post some through letterboxes in my local area.
runningjoke
Member
But they've also got The Verge which is still the worst designed site I've ever seen (100x better if you make your screen small).
I never realized how crappy SVG compatibility was until I started unit testing.
-Firefox and IE do not support CSS3 units, Chrome does
-IE will rewrite your property values (d="L1,1 2,2" becomes d="L 1 1 2 2")
-Firefox will not properly set the Bounding Box (getBBox) unless the element has height and width, even the X and Y will read 0 even if they aren't.
-Firefox and IE do not support CSS3 units, Chrome does
-IE will rewrite your property values (d="L1,1 2,2" becomes d="L 1 1 2 2")
-Firefox will not properly set the Bounding Box (getBBox) unless the element has height and width, even the X and Y will read 0 even if they aren't.
SuperEpicMan
Banned
I am having a little bit of trouble with image positioning. Basically I am using "object-fit: cover" to set an image to fill a div, as if it was set as its background image. However I am not 100% sure how to target the positioning within the div, as normally I would just use background-position to dictate where I want it. Anyone have any ideas?
Any reason you're not using background-size: cover?
SuperEpicMan
Banned
There is also an image map which needs to be positioned above it, so that they both scale in tandem.
SuperEpicMan
Banned
Actually I have just tried:
height: 100%;
width: auto;
overflow: hidden;
Which almost does what I want, but I am still unsure how to make it so the image crops the way I want it to.
height: 100%;
width: auto;
overflow: hidden;
Which almost does what I want, but I am still unsure how to make it so the image crops the way I want it to.
are you looking for object-position?
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
SuperEpicMan
Banned
Ideally, but for some reason it isn't working :/
SuperEpicMan
Banned
Syphon Filter
Member
Hey can anyone help me with something. I need to know how do I add those background videos you see in websites. Here is one example of what I mean.
https://cadre.com/
https://cadre.com/
Maybe this? https://www.youtube.com/watch?v=7S0X0OWMu_k
Oh, and for my question:
What are the most transferrable skills for front-end (And even back end) I can learn at the moment? I feel like I'm not learning at a brisk pace new things and I feel like I should but only want stuff that can easily be transferrable to different companies.
Syphon Filter
Member
Thanks. One more thing is how can I get an mp4 video online?Right now it works locally for me but what if I want to do this for someone, then I will need to get the mp4 on a server or something right? How do I got about doing that?
Daffy Duck
Member
You would upload it to the site just like adding a page, so say you have your base folder in there add a folder called video for example and your video would be there. That would be done through FTP.
The Albatross
Member
This video has a good tip on positioning <video> elements as well... Using top 50%, left 50% and then using a transform: translate (-50%, -50%), with a position absolute. Never used that before and will have to check out his video on positioning.
Hey I have a few suggestions for resources in the OP that I find helpful.
Languages
Ruby
Python
Go
Libraries and Frameworks
Node.js
Reactjs
Ruby on Rails
Django
CMSs
MediaWiki
Web Hook
Learning
Good web developer career advice
Free Code Camp
The Odin Project
Nanodegree for Front-End
Full Stack Nanodegree
Rails Tutorial
Eloquent Javascript
Practice programming projects for Rails (but probably can be done with any backend language and framework).
Exercism.io: practice problems for JavaScript, Ruby, Python, etc
Web Designer Tools
Font Awesome
Languages
Ruby
Python
Go
Libraries and Frameworks
Node.js
Reactjs
Ruby on Rails
Django
CMSs
MediaWiki
Web Hook
Learning
Good web developer career advice
Free Code Camp
The Odin Project
Nanodegree for Front-End
Full Stack Nanodegree
Rails Tutorial
Eloquent Javascript
Practice programming projects for Rails (but probably can be done with any backend language and framework).
Exercism.io: practice problems for JavaScript, Ruby, Python, etc
Web Designer Tools
Font Awesome
Thanks for this! I've updated the OP to include these and a few other suggestions.
Have any of you had experience with this set of books?
Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett
My goal is to learn some basic HTML, CSS, Javascript, and Bootstrap to make a website.
I certainly don't expect to gain any measure of mastery. Just enough to make a simple, clean looking website. The goal is to transform it into a repository for all my personal projects.
After that, I plan to tackle these two books:
Head First Design Patterns by Freeman et al.
PHP and MySQL Web Development by Luke Welling and Laura Thomson.
Unfortunately, I do not want to learn PHP because I heard it's utilized by really old people. Python is the new hot stuff, so I want to learn that instead. Nevertheless, the SQL knowledge will be invaluable.
Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett
My goal is to learn some basic HTML, CSS, Javascript, and Bootstrap to make a website.
I certainly don't expect to gain any measure of mastery. Just enough to make a simple, clean looking website. The goal is to transform it into a repository for all my personal projects.
After that, I plan to tackle these two books:
Head First Design Patterns by Freeman et al.
PHP and MySQL Web Development by Luke Welling and Laura Thomson.
Unfortunately, I do not want to learn PHP because I heard it's utilized by really old people. Python is the new hot stuff, so I want to learn that instead. Nevertheless, the SQL knowledge will be invaluable.
The Albatross
Member
Jon Duckets books are all very good and still contemporary. I bought both the HTML/CSS and the JavaScript one in a bundle on sale once, and while I don't use the HTML/CSS one much, I still flip back to the JavaScript one often. They're all well laid out, well written, and teach everything very well.
Don't go in with preconceived, and incorrect, notions that PHP is utilized by really old people or that Python is the new hot stuff. PHP still powers enormous projects like Facebook and WordPress, the most popular CMS and something behind nearly 30% of the web. Everything comes and goes and going in with preconcieved notions about something is how you'll get passed by... when I started professional development, JavaScript was the ugly programming language that everybody shunned, and now it's the hottest language. That will change again.
Foundation is really excellent. I've taken to using FoundationPress for nearly all of my WordPress client sites. It's a great theme framework that's still lean and mean.
Word of warning, if you have to support anything legacy then Foundation won't do it. It breaks in tremendous fashion with IE8 and older, and some aspects of IE9. Most the time this doesn't matter, but for a recent client they had an aspect of their site for an intranet that had to support IE8 for some legacy machines that they can't update, so I had to use Foundation for that and then fall back to an Ie8 friendly bootstrap for the internal site.
MY only real complaint with Foundation is that they rename a lot of their components to stupid names and are constantly renaming them with every release so it can be hard to find documentation. Clearing is their lightbox, Orbit is their slider, Magellan is their nav, Reveal is their modal... It's a minor pet peeve that can cause pain. They're moving away from this though with their new documentation de-emphasizing the old names.
Syphon Filter
Member
How is it compared to bootstrap?
The Albatross
Member
Six of one, half dozen of another. The syntax is similar... col-xs-# for Bootstrap, small-# for Foundation. Foundation has some really convenient wrapper classes that can map out columns for an entire row by just defining it once. ALso some helper classes like centering and offsets I find easier in Foundation... and some of their helper classes are just more explicit... ".hide-for-small-only" instead of hidden-xs. It just tells you *exactly* what it is.
But, Bootstrap has a ton of documentation and use all over the net and so you can often find more resources and plugins/tools written specifically for Bootstrap over FOundation.
Foundation is also built with sass in mind, where as Bootstrap was retrofitted with sass, and while Bootstrap is fine with sass and less, Foundation seems crafted for it. Foundation comes with a handy settings.scss partial that allows you to define everything in the project that that then cascades throughout your whole site. It's pretty great. Bootstrap probabyl has something like that too lately I just haven't used it.
Both are good and it comes down to preference. ANybody who strongly prefers Foundation over Bootstrap may be motivated by going for the plucky upstart, but both are good. I use Foundation more than Bootstrap for projects because, like I said before, I use FoundationPress a starter framework for WP themes and virtually all of my client projects are WordPress these days and so I'm just sticking with that. But I use Bootstrap for my full time job and think it's great too.
never used it because I used to work for a really, really bad company.
runningjoke
Member
You can just load 2 js files, nav and footer probably shouldn't interact with each other. But if you have them on all your pages might as well bundle them.
This is my developer friends in a nutshell. I'd call them hipsters, but I was the one who avoided frameworks for the first 4 months of coding because they weren't "pure enough" or some shit. I'm glad I did because I was forced to learn a lot I might not have learnt, but boy do they make your life easier when you're working to multiple tight deadlines.
This is good advice. From a front-end designer's perspective, both are great tools. If I'm building a fully custom page I often use one or the other for their grid systems or to save time and grab their mobile navbars, etc...
Foundation was definitely had a more intuitive grid system to code for, but both are easy to pick up if you have even a little experience with CSS grids.
There was a thing called HTML Imports which was part of the Web Component spec but I think it's dead
honestly, it's easy enough to include content using javascript but what you sound like you're planning to do should be done server side. What happens to your site if someone disables js?
HTML imports isn't dead but it will probably undergo further consideration once js modules are shipped so browsers are delaying implementing it.
Also, while this sort of stuff probably shouldn't be coordinated with js for performance reasons, I think the question "what if they disabled javascript" is an inappropriate consideration for websites. I mean, what if they're browsing in text mode on an old feature phone? Too bad. A more appropriate question would be if a search bot can properly index if a lot of content is missing in the original page load.
Million of people use the web without javascript enabled. Not only is it a valid question it's one of the most basic things you SHOULD take into consideration.
If it appears significant from your analytics that's one thing, but it's generally ill advisable to consider how the user may voluntarily alter default behavior. They might adblock, they might have custom extensions dumping stuff on the page, they can disable cookies or images. Any of these will full-stop break sites but they also aren't the default settings on any modern browser so it's the user's responsibility. Your responsibility as the one building the site is to make sure you're not running a million ad scripts such that users don't erroneously believe turning js off is an appropriate measure to take.
Code:
<noscript>C'mon bro</noscript>Is a good compromise.
Tathanen
Get Inside Her!
I absolutely agree, re:JavaScript disabling. There was a time when I refused to build a site unless it could degrade gracefully without JS, but usage patterns and web technologies have changed so much since then. If you have to build your site to function without JS now, you can't use the VAST majority of front end frameworks, and they've revolutionized the way the web works, and what you can do in the front end. The argument used to be that you shouldn't reject a segment of the market in favor of some JS bells and whistles, but JS is the fundamental underpinning of the entire interactive web in 2016. The people who disable JS are an endangered species, and these days they're choosing not just to disable trackers or annoying widgets, but the very skeleton of modern web development.
The Albatross
Member
I agree with you on principle but disagree on the context of the question. What the other poster is asking is if you want to obscure something behind JavaScript that is critical to the use of your website, and the answer should be "no."
You shouldn't make essential parts and behavior of your application/website reliant on client side javascript, and in this context, the person asking the original question would be having a website without navigation for someone without JS. If he's going to create a fallback for it, then he may as well just not use JS to load the navigation because the time it takes to maintain the fall back is the same time it takes to just do it right without relying on JS in the first place.
For some legit (but annoying) reasons, we get millions of visits a year from people who disable JavaScript. More visitors have disabled JS than we have IE10 (and older) users, which is a striking percentage. There's surprisingly a good reason for many of them that answer our surveys/interviews, they work for government, science, and research industries where they have to disable JS on their primary work station for security reasons, but need our software documentation (I work for a company that makes a popular programming language for engineers and scientists). If you go to our website, it renders horribly without JavaScript, just looks like complete shit, but everything is still there for somebody to get around for the most part. THere's almost no core functionality of the basic, navigable website that doesn't work without JavaScript.
Making a critical component not render if the client doesn't have JS is bad practice, even if your'e of the "c'mon bro" audience which I generally am. It's one thing to have image sliders, off canvas nav, text bubbles, auto-complete, and other extra features not work, but to have your primary nav not even render in the dom shouldn't be a consideration. In this case, there is virtually no benefit to putting your navigation behind a JavaScript fence, and only drawbacks... Creating a fallback in this case would take the same amount of time to just doing it the right way.
Tathanen
Get Inside Her!
See, you've got a highly specific situation here. Obviously if you're producing a product for a segment of the marketplace that has to use locked-down machines, you're going to build something that they can access. But this is a niche, not a rule. You're listing widgets as the reason for JavaScript, "extra features," but the sites I build house all of the business logic in the front-end, and directly interact with an API. There is no non-JavaScript fallback for this pattern. The alternative is to build a fundamentally different site that places all of the logic server-side and serves static built templates to the front end.
The first step should always be to know your audience, so if you're building for a no-JS segment, build for a no-JS segment. But these days that's the exception, not the rule. To universally cite "best practice" as making critical content accessible without JS is to castrate the future of the web.
I'm not saying you shouldn't use js but there's a real arrogance to assume that's the default and forget everyone else. I worked in education for years and the amount of things you see and get feedback for is incredible. Things I would never have thought about.
Remember that at it's core the web is http and html. There's millions of people use who software that doesn't even render css let alone js. These technologies are progressive and should absolutely be used but if you're drawing some arbitrary baseline so you can use the latest hot framework on github this week that's troublesome (and obviously I'm being a sarcastic prick here but you get the idea).
It's also worth noting that it's actually illegal in many parts of the world to have an inaccessible website as it falls under discrimination law
https://en.wikipedia.org/wiki/National_Federation_of_the_Blind_v._Target_Corp..
If you want a good resource read the BBC's HTML Accessibility Standards
http://www.bbc.co.uk/guidelines/futuremedia/accessibility/index.shtml
http://www.bbc.co.uk/guidelines/futuremedia/accessibility/html/progressive-enhancement.shtml
I think it's fair to say 'know your audience' but don't just cut people out because they're not you.
Remember that at it's core the web is http and html. There's millions of people use who software that doesn't even render css let alone js. These technologies are progressive and should absolutely be used but if you're drawing some arbitrary baseline so you can use the latest hot framework on github this week that's troublesome (and obviously I'm being a sarcastic prick here but you get the idea).
It's also worth noting that it's actually illegal in many parts of the world to have an inaccessible website as it falls under discrimination law
https://en.wikipedia.org/wiki/National_Federation_of_the_Blind_v._Target_Corp..
If you want a good resource read the BBC's HTML Accessibility Standards
http://www.bbc.co.uk/guidelines/futuremedia/accessibility/index.shtml
http://www.bbc.co.uk/guidelines/futuremedia/accessibility/html/progressive-enhancement.shtml
I think it's fair to say 'know your audience' but don't just cut people out because they're not you.
I did shift the question. Loading in a nav bar with ajax is terrible for performance and that's why you shouldn't do it, not because someone disables scripts. Having content on the page gives better load performance and quality perception, that's a relevant metric we should be going on.
From a business standpoint you do need to look at your metrics but as a general site you should not suppose extremely downgraded cases on a software level. Plenty of people are spending time and money on lesser IE because it's policy and yet metrics might actually show the vast majority of their traffic is mobile and only 1% actually were using IE10. Disabled JS is in the same case, not the norm and not something to be catered to unless that's an important part of your business.
Furthermore we can probably all agree disabling JS as a security measure is rather silly. Rather sites themselves should be vetted for best practices like CSP, modern certificates and SSL, etc. In fact these actions like a lot of bad business practice implemented by people who don't know what they are doing and are actively harmful to the ecosystem. Sites should absolutely take best practice seriously but should also discourage overzealous IT departments by making it hard to implement stupid policy.
Duckett's books are pretty cool, very colorful. I never got too far into it but seemed like a great book.
Head First Design Patterns is the book my Design Patterns class used in college. It's a pretty good book, really easy to read and understand. I believe there is a chapter on the MVC pattern, which is the most important pattern for web development. The book is structured around Java though iirc, so keep that in mind.
I honestly didn't consider the scenario of JS disabled.
StopMakingSense
Member
Also it can affect how Google finds stuff on your site.
Tathanen
Get Inside Her!
You'll never be able to cater to every niche, all you'll end up doing is spreading yourself way too thin. You'll never be able to go all-in on anything, you'll always have to compromise, and you'll balloon your time and budget with multifarious fallbacks. The gains will never begin to equal the investment. If a segment only makes up 1-2% of your audience, drop em like a sack of wet hammers. User trends will never change unless the internet as a whole forces em to.
As for JS dependence ruining search engine indexability, that was true until a few years ago, when the Big Guys all got their shit together and started indexing rendered JS. You gotta make sure your site hits a few main points, but it's no longer a dealbreaker.
As for JS dependence ruining search engine indexability, that was true until a few years ago, when the Big Guys all got their shit together and started indexing rendered JS. You gotta make sure your site hits a few main points, but it's no longer a dealbreaker.
Jack The Nipper
Banned
I need some major help in many parts of my project. Not just webdesign but also web page work later on. I will be creating a website but first I have to get these other points clear I have been working on a product for a couple of months now with a base idea that is made to print at a certain size. While a lot of our images are small some are larger than what our project calls for and I'd like to see what size images/posters we are able to make with high quality or at least good quality
Sizes of our largest images
Our largest images are around
3200 x 4380
Also have 2450 x 3375
1240 x 1670 (t)
This size would probably be our largest poster size even when adding other images to it because a lot of the work is actually smaller than that one and some much smaller.
These are 300dpi and created digitally. I am not sure what size they can actually be printed at while actually retaining a sharp and clear look. The help is very appreciated.
What size posters could those images be put on and still be clear and sharp?
Also TEXT/FONTS
I need some fonts and text packages that are interesting, I need some that are fun and imagitive and bouncy perhaps.
Also need some that are clear and clean and look great at a very small font. Going from a larger size to a smaller print. The fonts will be going on game cards and needs to be very clear and sharp for the non logo stuff at a possibly very small font like you see on other card games or how games have ultra small but clear fonts when you get up close to see them.
Please give me your suggestions and if anyone is serious in helping me out I'd be fine to talk to you via skype or fb and sharing what my project is before its public.
Sizes of our largest images
Our largest images are around
3200 x 4380
Also have 2450 x 3375
1240 x 1670 (t)
This size would probably be our largest poster size even when adding other images to it because a lot of the work is actually smaller than that one and some much smaller.
These are 300dpi and created digitally. I am not sure what size they can actually be printed at while actually retaining a sharp and clear look. The help is very appreciated.
What size posters could those images be put on and still be clear and sharp?
Also TEXT/FONTS
I need some fonts and text packages that are interesting, I need some that are fun and imagitive and bouncy perhaps.
Also need some that are clear and clean and look great at a very small font. Going from a larger size to a smaller print. The fonts will be going on game cards and needs to be very clear and sharp for the non logo stuff at a possibly very small font like you see on other card games or how games have ultra small but clear fonts when you get up close to see them.
Please give me your suggestions and if anyone is serious in helping me out I'd be fine to talk to you via skype or fb and sharing what my project is before its public.
PetriP-TNT
Member
Static site? If so, you can host on Github Pages so hosting is free, only thing that costs is the custom domain name. https://pages.github.com/